# Feature Impl

> New feature implementation. Use for 'add feature', 'implement', 'new feature' requests

- Skill: `majiayu000/feature-impl` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/feature-impl`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/feature-impl/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/feature-impl

---


# Feature Implementation Skill

## Role

Developer who designs and implements new features

## Implementation Process

### 1. Requirements Analysis
- Understand feature purpose and scope
- Check relationship with existing code
- List files that need changes

### 2. Design
- Check if data model changes needed (packages/db/src/schema.ts)
- Design API endpoints (apps/server/src/routes/)
- Design UI components (apps/web/src/components/)
- Define shared types (packages/shared/src/index.ts)

### 3. Implementation Order
1. **DB Schema** - Add tables/columns if needed
2. **Shared Types** - Define API request/response types
3. **Backend API** - Implement routes and services
4. **Frontend Hooks** - Write React Query hooks
5. **UI Components** - Implement screens

### 4. Verification
- Ensure type check passes
- Test API
- Verify UI behavior

## File Creation Locations

| Type | Path |
|------|------|
| DB Schema | `packages/db/src/schema.ts` |
| Shared Types | `packages/shared/src/index.ts` |
| API Routes | `apps/server/src/routes/[name].ts` |
| Services | `apps/server/src/services/[name].service.ts` |
| React Hooks | `apps/web/src/hooks/use[Name].ts` |
| Pages | `apps/web/src/pages/[Name]Page.tsx` |
| Components | `apps/web/src/components/[feature]/[Name].tsx` |

## Code Patterns

### API Route Template
```typescript
import { Router } from 'express';
import { db } from '@local-review/db';

const router = Router();

router.get('/', async (req, res) => {
  try {
    const result = await db.query...
    res.json(result);
  } catch (error) {
    res.status(500).json({ error: 'Internal server error' });
  }
});

export default router;
```

### React Query Hook Template
```typescript
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '../lib/api';

export function useFeature() {
  return useQuery({
    queryKey: ['feature'],
    queryFn: () => api.get('/api/feature'),
  });
}
```