generic-feature-developer

Files (1)

• SKILL.md

SKILL.md (first lines)

# Generic Feature Developer

Guide feature development across any tech stack.

## When to Use This Skill

**Use for:**

- Adding new features to existing codebase
- Modifying or extending current systems
- Planning architectural changes
- Choosing between implementation approaches
- Designing data flow for new functionality

**Don't use when:**

- Pure UI/styling work → use `generic-design-system`
- UX design decisions → use `generic-ux-designer`
- Code review → use `generic-code-reviewer`

## Development Workflow

1. **Understand** - Read CLAUDE.md, identify affected files, list constraints
2. **Plan** - Choose patterns, design data flow, identify edge cases
3. **Implement** - Small reviewable changes, commit frequently
4. **Review & Document** - Review the diff against edge cases and callers, update docs, performance check

## Architecture by Project Type

### Static Sites

```
project/
├── index.html
├── css/           # variables.css, style.css
├── js/            # main.js, utils.js
└── assets/
```

**Patterns:** CSS variables, ES modules, event delegation

### React/Next.js

```
src/
├── components/    # ui/, features/, layout/
├── hooks/
├── stores/
├── services/
└── types/
```

**Patterns:** Container/Presentational, custom hooks, Zustand/React Query

### NestJS Backend

```
src/
├── modules/[feature]/
│   ├── feature.module.ts
│   ├── feature.controller.ts
│   ├── feature.service.ts
│   └── dto/
└── common/        # guards, decorators
```

**Patterns:** Module organization, DTOs, Guards, Prisma

## Feature Decision Framework

### Scope Assessment (First)

| Scope                 | Action                                |
| --------------------- | ------------------------------------- |
| Single component      | Implement directly                    |
| Cross-cutting concern | Design interface first                |
| New subsystem         | Create architecture doc, get approval |

### Build vs Integrate

| Factor                   | Build Custom | Use Library |
| ------------------------ | ------------ | ----------- |
| Core to product          | Yes          |             |
| Commodity feature        |              | Yes         |
| Tight integration needed | Yes          |             |
| Time-critical            |              | Yes         |
| Long-term ownership      | Yes          |             |

### State Management Selection

| Scope           | Solution                 |
| --------------- | ------------------------ |
| Component-local | useState/useReducer      |
| Feature-wide    | Context or Zustand slice |
| App-wide        | Zustand/Redux store      |
| Server state    | React Query/SWR          |
| Form state      | React Hook Form          |

### API Design Checklist

- [ ] RESTful or GraphQL decision documented
- [ ] Authentication method chosen
- [ ] Error response format standardized
- [ ] Pagination strategy defined
- [ ] Rate limiting considered

## Common Features

### Adding UI Component

1. Create component → 2. Export → 3. Review usage and edge cases → 4. Document

### Adding API Endpoint

1. Define route → 2. Add validation → 3. Implement service → 4. Review error paths

### Adding State Management

1. Define shape → 2. Create store → 3. Add actions → 4. Connect components

From travisjneuman/.claude, MIT.

More from travisjneuman/.claude