AI Skills Collection

A curated collection of AI agent skills designed to enhance Claude's capabilities with specialized knowledge, workflows, and tool integrations. These skills transform Claude from a general-purpose assistant into a domain-specific expert. Made by Faiz Intifada (@faizntfd)

What are Skills?

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

Available Skills

| Skill | Description | Category | |-------|-------------|----------| | clone-website | Vibe-clone any website into production-ready Next.js 16 code using Firecrawl MCP | Frontend | | frontend-design | Create distinctive, production-grade frontend interfaces with high design quality | Frontend | | frontend-ui-animator | Implement purposeful UI animations for Next.js + Tailwind + React projects | Frontend | | frontend-ui-integration | Extend user-facing workflows integrating with existing backend APIs | Frontend | | shadcn-management | Manage shadcn/ui components using MCP tools | Frontend | | rsc-data-optimizer | Optimize Next.js data fetching with React Server Components | Frontend | | backend-dev | Comprehensive backend development from API design to deployment | Backend | | gemini-to-seedream-migration | Migrate AI image generation from Gemini 2.5 Flash to BytePlus SeeDream v4.5 | Migration | | product-management | PRDs, feature analysis, user research synthesis, and roadmap planning | Planning | | task-generator | Generate structured task lists from specs or requirements | Planning | | agents-md-generator | Generate hierarchical AGENTS.md structures for codebases | Documentation | | browser | Chrome DevTools Protocol tools for browser automation and scraping | Automation | | skill-creator | Guide for creating effective AI skills | Meta | | template-skill | Basic template for creating new skills | Meta |

Skill Categories

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 conventions
• Design system integration
• State management patterns
• Testing requirements (unit, integration, component tests)

shadcn-management

Manage shadcn/ui components via MCP tools:

• Search and discover components in registries
• View implementation details and examples
• Get installation commands
• Build complex UI features with multiple components

rsc-data-optimizer

Optimize slow client-side data fetching to instant server-side rendering:

• Convert useEffect + useState patterns to Server Components
• Parallel data fetching with Promise.all
• Hybrid SSR + client-side patterns
• Streaming with Suspense boundaries
• Caching strategies (static, revalidate, on-demand)

Backend Development

backend-dev

End-to-end backend development workflow:

• Multi-expert system (Architect, Security Engineer, DevOps, Database Specialist)
• API design and database architecture
• Security-first implementation
• CI/CD and infrastructure automation
• Testing strategies (unit, integration, E2E, load testing)

Migration & Integration

gemini-to-seedream-migration

Migrate AI image generation from Google Gemini 2.5 Flash to BytePlus SeeDream v4.5. Features:

• 6-phase proven migration workflow (Environment → Client → Routes → Dependencies → Testing → Docs)
• Production-ready TypeScript client template with comprehensive error handling
• Complete API parameter mapping (Gemini SDK → BytePlus REST)
• HTTP status code handling (400, 401, 429, 500, 503)
• Image format conversion (base64 → data URI)
• Resolution control (2K, 4K, exact pixels)
• Comprehensive testing checklist (21 validation points)
• Troubleshooting guide for 14 common issues
• Based on successful real-world production migration

Planning & Documentation

product-management

Core product management activities:

• Writing and updating PRDs
• Feature request analysis (RICE, ICE frameworks)
• User research synthesis
• Roadmap planning
• Competitive analysis

task-generator

Generate structured task lists from specs or requirements:

• 2-phase workflow (parent tasks → sub-tasks)
• Markdown checklist format with relevant files
• Automatically triggered after ExitSpecMode
• Junior developer-friendly task descriptions

agents-md-generator

Generate hierarchical AGENTS.md structures optimized for AI coding agents:

• Lightweight root files with links to detailed sub-files
• Token-efficient JIT indexing
• Technology-specific templates (Design Systems, Database, API, Testing)

Automation & Tools

browser

Minimal Chrome DevTools Protocol tools:

• Start Chrome with or without profile
• Navigate pages
• Execute JavaScript
• Take screenshots
• Interactive element picker

skill-creator

Guide for creating effective AI skills:

• Skill anatomy and structure
• Progressive disclosure patterns
• Best practices for SKILL.md writing
• Packaging and validation scripts

template-skill

Basic template for creating new skills:

• Minimal SKILL.md structure
• Ready to customize for new skill development

Installation

For Factory AI Users

Copy desired skill folders to your Factory skills directory:

# Copy a single skill
cp -r skills/frontend-ui-animator ~/.factory/skills/

# Or copy all skills
cp -r skills/* ~/.factory/skills/

Manual Installation

1. Clone this repository
2. Copy the desired skill folder to your AI agent's skills directory
3. Ensure the skill's dependencies are available (check individual skill READMEs if present)

Skill Structure

Each skill follows a consistent structure:

skill-name/
├── SKILL.md              # Main skill instructions (required)
├── references/           # Additional documentation loaded on-demand
│   └── *.md
├── scripts/              # Executable code (Python/Bash)
│   └── *.py
└── assets/               # Templates, images, boilerplate
    └── *

SKILL.md Format

---
name: skill-name
description: What the skill does and when to use it
---

# Skill Instructions

Markdown content with workflows, patterns, and guidelines.

Usage Examples

Website Cloning

User: "Clone the landing page from stripe.com"

→ Skill scrapes the page using Firecrawl MCP
→ Analyzes structure, design tokens, and components
→ Presents analysis report for user review
→ After confirmation, generates Next.js 16 code:
  - app/layout.tsx, app/page.tsx, app/globals.css
  - components/landing/Hero.tsx, Features.tsx, etc.
  - Downloads images to public/images/

Frontend UI Animation

User: "Add animations to my landing page"

→ Skill analyzes pages and components
→ Creates animation audit table
→ Implements phased animations (hero → hover → scroll reveals)
→ Adds Tailwind config presets
→ Ensures accessibility compliance

Backend API Development

User: "Create a REST API for user management"

→ Skill coordinates expert systems
→ Designs API contracts and database schema
→ Implements secure authentication
→ Sets up testing and CI/CD
→ Generates deployment documentation

Product Requirements

User: "Write a PRD for a new search feature"

→ Skill gathers context and constraints
→ Structures problem statement and goals
→ Defines user stories and requirements
→ Documents technical considerations
→ Identifies risks and launch plan

API Migration

User: "Migrate my image generation from Gemini to BytePlus SeeDream"

→ Skill provides 6-phase workflow
→ Updates environment variables (.env.example, validators)
→ Creates production-ready BytePlus REST client
→ Migrates API routes with error handling
→ Removes Gemini SDK dependency
→ Provides testing checklist and troubleshooting guide
→ Result: Working BytePlus integration in 3-4 hours

Contributing

Contributions are welcome! When adding new skills:

1. Follow the skill structure outlined above
2. Keep SKILL.md under 500 lines
3. Use references/ for detailed documentation
4. Include concrete examples with actual file paths
5. Test the skill