Generic Feature Developer

When to Use This Skill

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

• 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/

React/Next.js

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

NestJS Backend

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

Feature Decision Framework

Scope Assessment (First)

Build vs Integrate

State Management Selection

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. Add tests → 4. Document

Adding API Endpoint

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

Adding State Management

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

Database Changes

1. 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

Error Handling Strategy

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

Performance

Feature Implementation Checklist

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

See Also

• Code Review Standards - Quality checks
• Design Patterns - UI patterns

• generic-design-system

  - For styling and visual consistency

• generic-ux-designer

  - For UX flow decisions
• Project

  CLAUDE.md

  - Workflow rules

• Complex feature design → CODE_REVIEW_STANDARDS.md (architecture section)
• UI component patterns → DESIGN_PATTERNS.md (component section)