generic-feature-developer

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 testable changes, commit frequently
4. Test & Document - Write tests, 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