---
name: product-skill
description: |
  Product requirement analysis and user story creation skill.
  Use when users need to: analyze requirements, create user stories,
  write PRDs, or define acceptance criteria.
  Triggers: "analyze requirement", "create user story", "write PRD"
---

# Product Skill

## Overview
This skill helps transform raw requirements into structured product documentation.

## Instructions

### Step 1: Requirement Analysis
Identify: Who are the users? What do they want? Why is this important?

### Step 2: User Story Creation
Generate stories using template:
## US-XXX: [Story Title]
**As a** [user type]
**I want** [goal]
**So that** [benefit]

### Step 3: PRD Generation
Create Product Requirements Document with:
1. Executive Summary
2. User Stories
3. Functional Requirements
4. Non-Functional Requirements

## Output
- Structured user stories
- Complete PRD document
- Acceptance criteria matrix

---
name: ui-design-skill
description: |
  UI design specification and component documentation skill.
  Triggers: "design UI", "create spec", "component specification"
---

# UI Design Skill

## Phase 1: Layout Planning
Design page structure with responsive breakpoints.

## Phase 2: Component Design
Document each component with:
- Visual specs (size, colors, typography)
- States (default, hover, active, disabled)
- Variants

## Phase 3: Interaction Specification
Define behaviors and animations.

## Output
- Page layout diagrams
- Component specifications
- Interaction documentation

---
name: backend-skill
description: |
  Backend API development and database architecture skill.
  Triggers: "design API", "create model", "backend implementation"
dependencies: python>=3.8, fastapi, sqlalchemy
---

# Backend Development Skill

## API Design Patterns
RESTful endpoints with Pydantic models.

## Database Models
SQLAlchemy models with relationships.

## Authentication
JWT tokens with bcrypt password hashing.

## Example: Login Endpoint
@router.post("/login")
async def login(request: LoginRequest, db: Session):
    # Check account lock
    if await is_locked(request.email, db):
        raise HTTPException(status_code=429)
    
    # Verify user
    user = await get_user(request.email, db)
    if not verify(request.password, user.hash):
        await record_failure(request.email, db)
        raise HTTPException(status_code=401)
    
    return {"token": create_token(user.id)}

---
name: frontend-skill
description: |
  Frontend React component development skill.
  Triggers: "build component", "implement page", "frontend"
dependencies: react, typescript, @tanstack/react-query
---

# Frontend Development Skill

## Component Template
export const Component: React.FC<Props> = ({ id, onSuccess }) => {
  const { data } = useQuery({ queryKey: ['data', id], queryFn: () => fetch(id) });
  const mutation = useMutation({ mutationFn: update, onSuccess });

  return (
    <Card>
      <h3>{data?.name}</h3>
      <Button onClick={() => mutation.mutate(id)}>
        Update
      </Button>
    </Card>
  );
};

## API Integration
// useAuth.ts - Authentication hook
// useApi.ts - Data fetching hook
// apiService.ts - API client

---
name: testing-skill
description: |
  Automated testing skill for unit, integration, and E2E tests.
  Triggers: "write test", "run test", "coverage report"
dependencies: jest, pytest, playwright
---

# Testing Skill

## Unit Test (Jest)
describe('AuthService', () => {
  it('should return token on valid credentials', async () => {
    const result = await authService.login({ email, password });
    expect(result).toHaveProperty('token');
  });
});

## Integration Test (Supertest)
describe('POST /api/v1/auth/login', () => {
  it('should return 200 with token', async () => {
    const res = await request(app).post('/login').send({ email, password });
    expect(res.status).toBe(200);
  });
});

## E2E Test (Playwright)
test('successful login', async ({ page }) => {
  await page.fill('[data-testid="email"]', 'test@example.com');
  await page.fill('[data-testid="password"]', 'password123');
  await page.click('[data-testid="submit"]');
  await expect(page).toHaveURL('/dashboard');
});

---
name: code-review-skill
description: |
  Automated code review and quality analysis skill.
  Triggers: "review code", "quality check", "security scan"
dependencies: eslint, security-scan
---

# Code Review Skill

## Review Categories
1. Code Quality (complexity, naming, comments)
2. Security Vulnerabilities (OWASP Top 10)
3. Best Practices (error handling, logging)

## Output Format
{
  "summary": {
    "files_reviewed": 15,
    "issues_found": 8,
    "quality_score": "A"
  },
  "issues": [
    {
      "severity": "high",
      "message": "SQL Injection Risk",
      "fix": "Use parameterized queries"
    }
  ]
}

---
name: dev-pipeline
description: |
  Complete development pipeline orchestrator.
  Coordinates: product → UI → backend → frontend → testing → review.
  Triggers: "build feature", "start development", "run pipeline"
---

# Development Pipeline

## Sub-Skills Configuration
sub_skills:
  - name: product-skill
    trigger: "requirements"
    depends_on: []
    
  - name: ui-design-skill
    trigger: "design"
    depends_on: ["product-skill"]
    
  - name: backend-skill
    trigger: "backend"
    depends_on: ["product-skill"]
    
  - name: frontend-skill
    trigger: "frontend"
    depends_on: ["backend-skill"]
    
  - name: testing-skill
    trigger: "testing"
    depends_on: ["frontend-skill"]
    
  - name: code-review-skill
    trigger: "review"
    depends_on: ["testing-skill"]

## Usage
/dev-pipeline --feature "user-login" --input "./requirements.md"