backend-dev

Skills are modular, self-contained packages that provide:

• Specialized workflows - Multi-step procedures for specific domains
• Tool integrations - Instructions for working with specific file formats or APIs
• Domain expertise - Structured knowledge, schemas, and business logic
• Bundled resources - Scripts, references, and assets for complex tasks

| Skill | Description | Category |

|-------|-------------|----------|

| [clone-website](./skills/clone-website) | Vibe-clone any website into production-ready Next.js 16 code using Firecrawl MCP | Frontend |

| [frontend-design](./skills/frontend-design) | Create distinctive, production-grade frontend interfaces with high design quality | Frontend |

| [frontend-ui-animator](./skills/frontend-ui-animator) | Implement purposeful UI animations for Next.js + Tailwind + React projects | Frontend |

| [frontend-ui-integration](./skills/frontend-ui-integration) | Extend user-facing workflows integrating with existing backend APIs | Frontend |

| [shadcn-management](./skills/shadcn-management) | Manage shadcn/ui components using MCP tools | Frontend |

| [rsc-data-optimizer](./skills/rsc-data-optimizer) | Optimize Next.js data fetching with React Server Components | Frontend |

| [backend-dev](./skills/backend-dev) | Comprehensive backend development from API design to deployment | Backend |

| [gemini-to-seedream-migration](./skills/gemini-to-seedream-migration) | Migrate AI image generation from Gemini 2.5 Flash to BytePlus SeeDream v4.5 | Migration |

| [product-management](./skills/product-management) | PRDs, feature analysis, user research synthesis, and roadmap planning | Planning |

| [task-generator](./skills/task-generator) | Generate structured task lists from specs or requirements | Planning |

| [agents-md-generator](./skills/agents-md-generator) | Generate hierarchical AGENTS.md structures for codebases | Documentation |

| [browser](./skills/browser) | Chrome DevTools Protocol tools for browser automation and scraping | Automation |

| [skill-creator](./skills/skill-creator) | Guide for creating effective AI skills | Meta |

| [template-skill](./skills/template-skill) | Basic template for creating new skills | Meta |

Frontend Development

#### clone-website

Vibe-clone any website into production-ready Next.js 16 code using Firecrawl MCP. Features:

• 3-phase workflow: Scrape → Analysis (mandatory review) → Code Generation
• Firecrawl MCP integration for intelligent web scraping
• Design token extraction (colors, typography, spacing, borders)
• Partial cloning support (clone specific sections like hero, pricing, footer)
• Image handling with automatic Unsplash fallback
• Tech stack: Next.js 16 + TypeScript + Tailwind CSS v4 + Shadcn UI + Lucide React

#### frontend-design

Create distinctive, memorable frontend interfaces that avoid generic "AI slop" aesthetics. Features:

• Bold aesthetic direction and creative design thinking
• Typography, color, motion, and spatial composition guidelines
• Integration with shadcn/ui projects
• Production-grade, functional code output

#### frontend-ui-animator

Implement purposeful, performant UI animations. Includes:

• 20+ ready-to-use animation patterns (fade, slide, scale, clip-reveal, marquee)
• Scroll-triggered animations with useScrollReveal hook
• Tailwind config presets for keyframes and animations
• Accessibility-first with prefers-reduced-motion support
• Phased implementation workflow (Analyze → Plan → Implement → Verify)

#### frontend-ui-integration

Implement or extend user-facing workflows with existing backend APIs. Covers:

• React + TypeScript conventi