A curated collection of agent skills for Claude Code and compatible agent platforms.
| Skill | Purpose | Use When |
|---|---|---|
| agent-browser | Browser automation | Interacting with websites, scraping, testing web apps |
| brainstorming | Design exploration | Starting any creative work, building features, components |
| find-skills | Skill discovery | Looking for tools, asking "how do I do X" |
| frontend-design | Visual interface creation | Building web components, pages, landing pages |
| frontend-skill | Premium UI development | Art direction, award-level composition |
| pua | Performance coaching | User frustration, repeated failures, debugging |
| skill-creator | Skill development | Creating or improving skills |
| ui-ux-pro-max | Professional design | High-end UI/UX work |
| vercel-react-best-practices | React optimization | Writing, reviewing React/Next.js code |
| web-design-guidelines | UI code review | Reviewing UI for accessibility and best practices |
| writing-plans | Implementation planning | Multi-step tasks with clear specs |
Purpose: Browser automation CLI for AI agents.
Use Cases:
- Navigate websites and interact with pages
- Fill forms, click buttons, take screenshots
- Scrape data, test web applications
- Handle authentication flows
Key Commands:
agent-browser open <url>— Navigate to URLagent-browser snapshot -i— Get interactive elements with refsagent-browser click @e1/agent-browser fill @e2 "text"— Interact via refsagent-browser screenshot— Capture page images
Purpose: Collaborative design exploration before implementation.
When to Use: Before any creative work — creating features, building components, adding functionality, or modifying behavior.
Process:
- Explore project context
- Ask clarifying questions (one at a time)
- Propose 2-3 approaches with trade-offs
- Present design sections for approval
- Write design doc to
docs/superpowers/specs/ - Invoke
writing-plansfor implementation
Hard Gate: Do NOT write code until design is approved.
Purpose: Discover and install skills from the open agent skills ecosystem.
When to Use:
- "How do I do X?"
- "Find a skill for X"
- "Is there a skill that can..."
Key Commands:
npx skills find [query]— Search for skillsnpx skills add <package>— Install a skill- Browse: https://skills.sh/
Purpose: Create distinctive, production-grade frontend interfaces.
When to Use: Building web components, pages, artifacts, posters, or applications.
Design Principles:
- Bold aesthetics — Choose an extreme direction (minimalist, maximalist, retro-futuristic, etc.)
- Typography — Distinctive, characterful font choices
- Motion — Well-orchestrated animations, scroll-triggered effects
- Spatial composition — Unexpected layouts, asymmetry, overlap
Avoid: Generic AI aesthetics (Inter font, purple gradients, predictable layouts)
Purpose: Ship premium, award-level interfaces with art direction and restraint.
When to Use: When quality depends on art direction, hierarchy, imagery, and motion.
Defaults:
- Start with composition, not components
- Full-bleed hero, no card grids
- Brand-first hierarchy
- Two typefaces max, one accent color
- Cardless layouts preferred
Litmus Checks:
- Is the brand unmistakable in the first screen?
- Can the page be understood by scanning headlines only?
- Would the design feel premium without decorative shadows?
Purpose: High-agency problem-solving with performance coaching.
When to Use:
- User frustration or repeated failures (2+)
- Passive behavior or quality complaints
- Triggers: "try harder", "figure it out", "stop giving up", "you broke it"
Methodology Routing:
| Task Type | Flavor | Core Method |
|---|---|---|
| Debug/Bug | Huawei | RCA root cause + Blue Team self-attack |
| New Feature | Musk | The Algorithm: question → delete → simplify → accelerate → automate |
| Code Review | Jobs | Subtraction priority + pixel-perfect + DRI |
| Research | Baidu | Search is primary productivity |
| Architecture | Amazon | Working Backwards + 6-Pager |
| Performance | ByteDance | A/B Test + data-driven |
Purpose: Create, modify, and measure skill performance.
When to Use:
- Creating a skill from scratch
- Editing or optimizing existing skills
- Running evals to test skills
- Benchmarking skill performance
Workflow:
- Capture intent (what, when, output format)
- Interview and research edge cases
- Write
SKILL.mdwith YAML frontmatter - Create test cases in
evals/evals.json - Run with-skill vs baseline subagents
- Review, iterate, package
Purpose: Professional UI/UX design for high-end work.
When to Use: Complex UI/UX projects requiring professional design expertise.
Purpose: React and Next.js performance optimization from Vercel Engineering.
When to Use:
- Writing new React components or Next.js pages
- Implementing data fetching
- Reviewing code for performance
- Optimizing bundle size or load times
Rule Categories (65 rules):
| Priority | Category | Prefix |
|---|---|---|
| 1 | Eliminating Waterfalls | async- |
| 2 | Bundle Size Optimization | bundle- |
| 3 | Server-Side Performance | server- |
| 4 | Client-Side Data Fetching | client- |
| 5 | Re-render Optimization | rerender- |
| 6 | Rendering Performance | rendering- |
| 7 | JavaScript Performance | js- |
| 8 | Advanced Patterns | advanced- |
Purpose: Review UI code for Web Interface Guidelines compliance.
When to Use:
- "Review my UI"
- "Check accessibility"
- "Audit design"
- "Review UX"
Process:
- Fetch latest guidelines from source
- Read specified files
- Check against all rules
- Output findings in
file:lineformat
Purpose: Write comprehensive implementation plans for multi-step tasks.
When to Use: You have a spec or requirements for a multi-step task, before touching code.
Output: Plans saved to docs/superpowers/plans/YYYY-MM-DD-<feature-name>.md
Structure:
- Bite-sized tasks (2-5 minutes each)
- Exact file paths
- Complete code in every step
- Exact commands with expected output
- DRY, YAGNI, TDD, frequent commits
Install individual skills using the Skills CLI:
npx skills add owner/repo@skill-nameOr install from this repository:
# Clone the repository
git clone https://github.com/ninehills/skills.git
cd skills
# Install a specific skill
npx skills add ./agent-browser -gEach skill follows this structure:
skill-name/
├── SKILL.md # Required: skill definition with YAML frontmatter
├── references/ # Optional: documentation loaded as needed
├── scripts/ # Optional: executable code for deterministic tasks
└── assets/ # Optional: templates, icons, fonts
See individual skill directories for license information.