Initial commit

2025-11-29 18:20:21 +08:00
commit bbbaf7acad
63 changed files with 38552 additions and 0 deletions
--- a/commands/feature/README.md
+++ b/commands/feature/README.md
@@ -0,0 +1,502 @@
+# Feature Implementation Skill
+
+Production-ready feature implementation across database, backend, and frontend layers with incremental phased approach and comprehensive quality standards.
+
+## Overview
+
+This skill provides a complete workflow for implementing full-stack features from database schema to frontend components. It follows industry best practices including layered architecture, comprehensive testing, security hardening, and performance optimization.
+
+## Available Operations
+
+### `implement` - Complete Full-Stack Implementation
+
+Implement a feature across all layers (database, backend, frontend, integration) with production-ready code, tests, and documentation.
+
+**Usage:**
+```bash
+/10x-fullstack-engineer:feature implement description:"user authentication with OAuth and 2FA" tests:"comprehensive"
+```
+
+**Parameters:**
+- `description` (required) - Detailed feature description
+- `scope` (optional) - Specific area to focus on
+- `priority` (optional) - high|medium|low
+- `tests` (optional) - Coverage level
+- `framework` (optional) - react|vue|angular
+
+**What it does:**
+1. **Requirements Understanding** - Clarifies functional and non-functional requirements
+2. **Codebase Analysis** - Examines existing patterns and conventions
+3. **Implementation Design** - Designs database schema, API endpoints, and UI components
+4. **Incremental Implementation** - Implements in phases (data → backend → frontend → integration)
+5. **Quality Assurance** - Tests, security, performance, and documentation
+
+### `database` - Database Layer Only
+
+Implement database migrations, models, schemas, indexes, and validation for a feature.
+
+**Usage:**
+```bash
+/10x-fullstack-engineer:feature database description:"user profiles table with indexes" migration:"add_user_profiles"
+```
+
+**Parameters:**
+- `description` (required) - Database changes needed
+- `migration` (optional) - Migration name
+- `orm` (optional) - prisma|typeorm|sequelize
+
+**What it does:**
+- Schema design with proper types and constraints
+- Index strategy for query optimization
+- Migration scripts (up and down)
+- ORM models/entities
+- Database operation tests
+
+**Supports:**
+- SQL databases (PostgreSQL, MySQL, SQLite)
+- NoSQL databases (MongoDB)
+- ORMs (Prisma, TypeORM, Sequelize, Mongoose)
+
+### `backend` - Backend Layer Only
+
+Implement repositories, services, API endpoints, validation, and tests for a feature.
+
+**Usage:**
+```bash
+/10x-fullstack-engineer:feature backend description:"REST API for product search with filters" validation:"strict"
+```
+
+**Parameters:**
+- `description` (required) - Backend functionality needed
+- `api` (optional) - REST|GraphQL
+- `validation` (optional) - strict|standard
+- `auth` (optional) - required|optional
+
+**What it does:**
+- **Data Access Layer** - Repositories with query builders
+- **Business Logic Layer** - Services with validation and error handling
+- **API Layer** - Controllers and routes
+- **Validation** - Request/response schemas
+- **Testing** - Unit and integration tests
+
+**Supports:**
+- Express, Fastify, NestJS, Koa frameworks
+- Zod, Joi, class-validator validation
+- JWT authentication
+- RBAC authorization
+
+### `frontend` - Frontend Layer Only
+
+Implement components, state management, API integration, and tests for a feature.
+
+**Usage:**
+```bash
+/10x-fullstack-engineer:feature frontend description:"product catalog with infinite scroll and filters" framework:"react"
+```
+
+**Parameters:**
+- `description` (required) - UI functionality needed
+- `framework` (optional) - react|vue|angular
+- `state` (optional) - redux|zustand|context
+- `tests` (optional) - unit|integration|e2e
+
+**What it does:**
+- **Components** - Reusable, accessible UI components
+- **State Management** - Zustand, Redux, Context API
+- **API Integration** - HTTP client with interceptors
+- **Custom Hooks** - Reusable logic
+- **Testing** - Component and hook tests
+
+**Supports:**
+- React, Vue, Angular, Svelte
+- TypeScript
+- React Hook Form, Formik for forms
+- React Query, SWR for server state
+- TailwindCSS, CSS-in-JS
+
+### `integrate` - Integration & Polish
+
+Complete integration testing, performance optimization, security hardening, and documentation.
+
+**Usage:**
+```bash
+/10x-fullstack-engineer:feature integrate feature:"authentication flow" scope:"E2E tests and performance"
+```
+
+**Parameters:**
+- `feature` (required) - Feature name
+- `scope` (optional) - e2e|performance|security|documentation
+- `priority` (optional) - high|medium|low
+
+**What it does:**
+- **E2E Testing** - Playwright/Cypress tests for user workflows
+- **Performance** - Frontend (lazy loading, memoization) and backend (caching, indexes) optimization
+- **Security** - Input validation, XSS/CSRF protection, rate limiting, security headers
+- **Documentation** - API docs (OpenAPI), user guides, developer documentation
+
+### `scaffold` - Generate Boilerplate
+
+Scaffold feature structure and boilerplate across all layers.
+
+**Usage:**
+```bash
+/10x-fullstack-engineer:feature scaffold name:"notification-system" layers:"database,backend,frontend"
+```
+
+**Parameters:**
+- `name` (required) - Feature name (kebab-case)
+- `layers` (optional) - database,backend,frontend (default: all)
+- `pattern` (optional) - crud|workflow|custom
+
+**What it does:**
+Generates complete boilerplate structure:
+- Database migrations and entities
+- Repository, service, controller, routes
+- API client and types
+- React components and hooks
+- Test files
+
+## Feature Types Supported
+
+### Authentication & Authorization
+- User registration/login
+- OAuth/SSO integration
+- 2FA/MFA
+- Session management
+- JWT token handling
+- RBAC/ABAC
+
+### Data Management (CRUD)
+- Resource listing with pagination
+- Filtering and sorting
+- Search functionality
+- Create/update/delete operations
+- Soft delete support
+- Audit logging
+
+### Real-time Features
+- WebSocket connections
+- Server-Sent Events (SSE)
+- Live updates
+- Presence tracking
+- Collaborative editing
+
+### Payment Integration
+- Stripe/PayPal checkout
+- Subscription management
+- Invoice generation
+- Payment webhooks
+- Refund processing
+
+### File Management
+- Upload with progress
+- Image optimization
+- S3/GCS integration
+- Virus scanning
+- File validation
+
+### Search Features
+- Full-text search
+- Faceted search
+- Autocomplete
+- Advanced filtering
+- Relevance scoring
+
+## Implementation Phases
+
+### Phase 1: Requirements Understanding
+- Functional requirements clarification
+- Non-functional requirements (performance, security, scalability)
+- Acceptance criteria definition
+- Edge case identification
+
+### Phase 2: Codebase Analysis
+- Project structure discovery
+- Tech stack identification
+- Existing patterns examination
+- Convention adoption
+
+### Phase 3: Implementation Design
+- **Database Design** - Schema, relationships, indexes
+- **Backend Design** - API endpoints, request/response models, service architecture
+- **Frontend Design** - Component structure, state management, API integration
+
+### Phase 4: Incremental Implementation
+
+#### Phase 4.1 - Data Layer
+1. Create migration scripts
+2. Create/update models
+3. Test database operations
+
+#### Phase 4.2 - Backend Layer
+1. Create repository layer
+2. Create service layer
+3. Create API controllers
+4. Create routes
+5. Write tests
+
+#### Phase 4.3 - Frontend Layer
+1. Create API client
+2. Create React hooks
+3. Create components
+4. Write component tests
+
+#### Phase 4.4 - Integration & Polish
+1. End-to-end tests
+2. Performance optimization
+3. Security hardening
+4. Documentation
+
+## Quality Standards
+
+### Code Quality
+- [x] Single Responsibility Principle
+- [x] DRY (Don't Repeat Yourself)
+- [x] Proper error handling
+- [x] Input validation
+- [x] Type safety (TypeScript)
+- [x] Consistent naming conventions
+
+### Testing
+- [x] Unit tests (>80% coverage)
+- [x] Integration tests for APIs
+- [x] Component tests for UI
+- [x] E2E tests for critical flows
+- [x] Edge case coverage
+
+### Security
+- [x] Input validation and sanitization
+- [x] SQL injection prevention (parameterized queries)
+- [x] XSS prevention (DOMPurify)
+- [x] CSRF protection
+- [x] Authentication/authorization
+- [x] Rate limiting
+- [x] Security headers (Helmet)
+- [x] No hardcoded secrets
+
+### Performance
+- [x] Database indexes on frequently queried columns
+- [x] Query optimization (eager loading, no N+1)
+- [x] Response caching
+- [x] Connection pooling
+- [x] Frontend code splitting
+- [x] Lazy loading images
+- [x] Memoization
+- [x] Virtualization for long lists
+
+### Accessibility
+- [x] Semantic HTML
+- [x] ARIA labels
+- [x] Keyboard navigation
+- [x] Alt text for images
+- [x] Color contrast (WCAG 2.1 AA)
+- [x] Screen reader support
+
+### Documentation
+- [x] API documentation (OpenAPI/Swagger)
+- [x] Code comments for complex logic
+- [x] Usage examples
+- [x] Deployment instructions
+- [x] Environment variables documented
+
+## Common Workflows
+
+### 1. Implement Complete CRUD Feature
+
+```bash
+# Full-stack implementation
+/10x-fullstack-engineer:feature implement description:"blog post management with rich text editor, categories, tags, and draft/publish workflow"
+
+# What you get:
+# - Database: posts, categories, tags tables with relationships
+# - Backend: REST API with CRUD endpoints, validation, search
+# - Frontend: Post list, detail, create/edit forms, rich text editor
+# - Tests: Unit, integration, E2E
+# - Docs: API documentation
+```
+
+### 2. Add New API Endpoints to Existing Feature
+
+```bash
+# Backend only
+/10x-fullstack-engineer:feature backend description:"Add bulk operations API for products (bulk delete, bulk update status, bulk export)"
+```
+
+### 3. Build New UI Screen
+
+```bash
+# Frontend only
+/10x-fullstack-engineer:feature frontend description:"Admin dashboard with charts showing sales, users, and revenue metrics" framework:"react" state:"zustand"
+```
+
+### 4. Optimize Existing Feature
+
+```bash
+# Integration & polish
+/10x-fullstack-engineer:feature integrate feature:"product catalog" scope:"performance and E2E tests"
+```
+
+### 5. Quick Feature Scaffolding
+
+```bash
+# Generate boilerplate
+/10x-fullstack-engineer:feature scaffold name:"email-notifications" layers:"database,backend"
+
+# Then customize the generated files
+```
+
+## Architecture Patterns
+
+### Layered Architecture
+
+```
+┌─────────────────────────────────────┐
+│         Presentation Layer          │  React/Vue/Angular Components
+│  (Components, Hooks, State)         │
+└──────────────┬──────────────────────┘
+               │ API Client
+┌──────────────▼──────────────────────┐
+│          API Layer                  │  Controllers, Routes, Middleware
+│  (Request/Response Handling)        │
+└──────────────┬──────────────────────┘
+               │
+┌──────────────▼──────────────────────┐
+│       Business Logic Layer          │  Services, Validation, Rules
+│  (Domain Logic)                     │
+└──────────────┬──────────────────────┘
+               │
+┌──────────────▼──────────────────────┐
+│       Data Access Layer             │  Repositories, Query Builders
+│  (Database Operations)              │
+└──────────────┬──────────────────────┘
+               │
+┌──────────────▼──────────────────────┐
+│         Database Layer              │  PostgreSQL, MongoDB, etc.
+│  (Schema, Migrations, Indexes)      │
+└─────────────────────────────────────┘
+```
+
+### Repository Pattern
+- Abstracts data access
+- Enables testability
+- Centralizes query logic
+
+### Service Pattern
+- Contains business logic
+- Orchestrates repositories
+- Handles validation
+
+### Controller Pattern
+- HTTP request/response handling
+- Delegates to services
+- Thin layer
+
+## Example Output
+
+For a feature like "user authentication", the implementation includes:
+
+### Database Layer
+```sql
+-- Migration: users and sessions tables
+CREATE TABLE users (
+    id UUID PRIMARY KEY,
+    email VARCHAR(255) UNIQUE NOT NULL,
+    password_hash VARCHAR(255) NOT NULL,
+    email_verified BOOLEAN DEFAULT FALSE,
+    created_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE INDEX idx_users_email ON users(email);
+```
+
+### Backend Layer
+```typescript
+// Service with business logic
+async register(input: RegisterInput): Promise<{ user: User; tokens: AuthTokens }> {
+  this.validateEmail(input.email);
+  this.validatePassword(input.password);
+
+  const passwordHash = await bcrypt.hash(input.password, 12);
+  const user = await this.userRepository.create({ email: input.email, passwordHash });
+  const tokens = await this.generateTokens(user.id);
+
+  return { user, tokens };
+}
+```
+
+### Frontend Layer
+```typescript
+// React component with state management
+export const LoginForm: React.FC = () => {
+  const { login, isLoading, error } = useAuth();
+  const { register, handleSubmit, formState: { errors } } = useForm();
+
+  const onSubmit = async (data) => {
+    await login(data.email, data.password);
+  };
+
+  return <form onSubmit={handleSubmit(onSubmit)}>...</form>;
+};
+```
+
+## Error Handling
+
+The skill handles various scenarios:
+
+### Unclear Requirements
+- Asks specific questions about acceptance criteria
+- Requests clarification on edge cases
+- Provides examples to confirm understanding
+- Suggests sensible defaults
+
+### Missing Context
+- Lists needed information (tech stack, patterns)
+- Attempts to discover from codebase
+- Documents assumptions made
+- Provides alternatives if context unclear
+
+### Implementation Blockers
+- Clearly identifies the blocker
+- Suggests alternative approaches
+- Provides workarounds if available
+- Documents issue for resolution
+- Continues with unblocked portions
+
+## Dependencies
+
+This skill works with common tech stacks:
+
+**Backend:**
+- Node.js with Express, Fastify, NestJS
+- TypeScript
+- TypeORM, Prisma, Sequelize (ORMs)
+- PostgreSQL, MySQL, MongoDB
+- Jest, Vitest (testing)
+
+**Frontend:**
+- React, Vue, Angular
+- TypeScript
+- Zustand, Redux, Context API (state)
+- React Hook Form, Zod (forms/validation)
+- React Testing Library (testing)
+- Playwright, Cypress (E2E)
+
+## Tips for Best Results
+
+1. **Be specific in descriptions** - More detail leads to better implementations
+2. **Specify framework/ORM** - Helps generate appropriate code
+3. **Start with scaffold** - Use `scaffold` for quick boilerplate, then customize
+4. **Layer-by-layer approach** - Implement database → backend → frontend for complex features
+5. **Use integrate for polish** - Don't skip the integration phase for production features
+
+## Related Skills
+
+This skill is part of the 10x Fullstack Engineer plugin:
+- `/api` - API design and implementation
+- `/database` - Database design and optimization
+- `/test` - Test generation and coverage
+- `/deploy` - Deployment and CI/CD
+
+## License
+
+MIT