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

Clone this repository
Copy the desired skill folder to your AI agent's skills directory
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:

Follow the skill structure outlined above
Keep SKILL.md under 500 lines
Use references/ for detailed documentation
Include concrete examples with actual file paths
Test the skill with real-world scenarios

License

Individual skills may have their own licenses. Check each skill's directory for specific licensing information.

Built for Factory AI and compatible AI coding assistants.

Curated & Created by Faiz Intifada (@faizntfd)