Generic Feature Developer Skill

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

Understand - Read CLAUDE.md, identify affected files, list constraints
Plan - Choose patterns, design data flow, identify edge cases
Implement - Small testable changes, commit frequently
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 | |

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

Create component → 2. Export → 3. Add tests → 4. Document

Adding API Endpoint

Define route → 2. Add validation → 3. Implement service → 4. Test

Adding State Management

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

Database Changes

Design schema → 2. Create migration → 3. Update models → 4. Add service

Data Flow Patterns

Frontend Data Flow

User Action → Event Handler → State Update → Re-render → UI Feedback

Optimistic updates: Update UI immediately, rollback on error
Pessimistic updates: Wait for server confirmation
Decision: Optimistic for low-risk (likes), pessimistic for high-risk (payments)

API Request Flow

Request → Auth Check → Validation → Business Logic → Database → Response

Early exit on validation failure
Transaction boundaries around multi-step operations
Consistent error response format

Event-Driven Patterns

| Event Type | Approach | | ---------------- | --------------------------- | | User events | Immediate feedback | | Server events | WebSocket/SSE for real-time | | Background tasks | Queue for long operations |

Error Handling Strategy

| Error Type | Frontend | Backend | | ------------ | ------------------------- | ------------------ | | Validation | Inline field errors | 400 + field errors | | Auth | Redirect to login | 401/403 | | Not Found | Empty state or redirect | 404 | | Server Error | Generic message + retry | 500 + log | | Network | Offline indicator + queue | N/A |

Frontend Pattern

try {
  await apiCall();
} catch (error) {
  if (error instanceof ValidationError) showFieldErrors(error.fields);
  else showGenericError();
}

Backend Pattern

if (err instanceof ValidationError)
  return res.status(400).json({ errors: err.errors });
if (err instanceof AuthError)
  return res.status(401).json({ message: "Unauthorized" });

Testing Strategy

| Layer | Type | Tools | | ----- | ----------- | --------------- | | UI | Component | Testing Library | | Logic | Unit | Jest, Vitest | | API | Integration | Supertest | | E2E | End-to-end | Playwright |

Performance

Frontend: Code splitting, lazy loading, memoization, debounce Backend: DB indexing, caching, connection pooling, background jobs

Feature Implementation Checklist

Before marking feature complete:

[ ] Works for happy path
[ ] Error states handled
[ ] Loading states implemented
[ ] Edge cases tested
[ ] TypeScript types complete
[ ] Tests written
[ ] Documentation updated

Agent Skills: Generic Feature Developer

Install this agent skill to your local

Skill Files