AgentToolHub
Skill

frontend-designer

frontend-designer — a Claude Code skill from jamesrochabrun/skills

Features

  • ✓Curated Claude Code skills for diverse domains
  • ✓Interactive scripts and reference materials
  • ✓Select individual skills or install as a plugin
  • ✓Organized by category for easy navigation
  • ✓Explore 24+ skills including AI, Engineering, and Design
  • ✓Visit [GitHub](https://github.com/jamesrochabrun/skills) for more details

Installation Guide

You have two ways to use this skills collection:

Option 1: Install ALL Skills (Bundle)

Get all 23 skills at once with intelligent routing:

bash
/plugin marketplace add jamesrochabrun/skills
/plugin install all-skills@skills-marketplace

When to use this:

  • You want access to all skills

  • You prefer Claude to automatically choose relevant skills

  • You work across multiple domains (engineering, product, design, etc.)

    • Option 2: Install Individual Skills

    Pick only the skills you need for better performance and focused context:

    bash
    # First, add the marketplace
/plugin marketplace add jamesrochabrun/skills

# Then install specific skills
/plugin install anthropic-architect@skills-marketplace
/plugin install prd-generator@skills-marketplace
/plugin install frontend-designer@skills-marketplace
# ... install any skills you need

    When to use this:

  • You work in specific domains

  • You want optimal performance with smaller context

  • You prefer explicit skill activation

    • Available Individual Skills

    AI & Architecture:

  • /plugin install anthropic-architect@skills-marketplace

  • /plugin install anthropic-prompt-engineer@skills-marketplace

    • Engineering:

  • /plugin install openai-prompt-engineer@skills-marketplace

  • /plugin install git-worktrees@skills-marketplace

  • /plugin install llm-router@skills-marketplace

  • /plugin install engineer-expertise-extractor@skills-marketplace

  • /plugin install engineer-skill-creator@skills-marketplace

    • Product Management:

  • /plugin install prd-generator@skills-marketplace

  • /plugin install technical-launch-planner@skills-marketplace

    • Design:

  • /plugin install design-brief-generator@skills-marketplace

  • /plugin install frontend-designer@skills-marketplace

  • /plugin install apple-hig-designer@skills-marketplace

  • /plugin install book-illustrator@skills-marketplace

    • Content & Writing:

  • /plugin install content-brief-generator@skills-marketplace

  • /plugin install kids-book-writer@skills-marketplace

    • Trading & Finance:

  • /plugin install trading-plan-generator@skills-marketplace

    • Database & Query:

  • /plugin install query-expert@skills-marketplace

    • QA & Testing:

  • /plugin install qa-test-planner@skills-marketplace

    • Educational & Learning:

  • /plugin install math-teacher@skills-marketplace

  • /plugin install reading-teacher@skills-marketplace

  • /plugin install leetcode-teacher@skills-marketplace

    • Apple Development:

  • /plugin install swift-concurrency@skills-marketplace

  • /plugin install swiftui-animation@skills-marketplace

  • /plugin install releasing-macos-apps@skills-marketplace

    • Plugin Structure

    The plugin follows the standard Claude Code plugin architecture:

    text
    skills/
├── .claude-plugin/
│   ├── plugin.json          # Plugin metadata
│   └── marketplace.json     # Marketplace configuration (25 plugins: 1 bundle + 24 individual)
├── skills/                   # All skills collection (24 total)
│   ├── anthropic-architect/
│   ├── anthropic-prompt-engineer/
│   ├── openai-prompt-engineer/
│   ├── git-worktrees/
│   ├── llm-router/
│   ├── engineer-expertise-extractor/
│   ├── engineer-skill-creator/
│   ├── swift-concurrency/
│   ├── swiftui-animation/
│   ├── releasing-macos-apps/
│   ├── prd-generator/
│   ├── technical-launch-planner/
│   ├── design-brief-generator/
│   ├── frontend-designer/
│   ├── apple-hig-designer/
│   ├── book-illustrator/
│   ├── content-brief-generator/
│   ├── kids-book-writer/
│   ├── trading-plan-generator/
│   ├── query-expert/
│   ├── qa-test-planner/
│   ├── math-teacher/
│   ├── reading-teacher/
│   └── leetcode-teacher/
├── README.md                 # This file
└── LICENSE

    How It Works

    Marketplace Configuration:

  • The marketplace.json exposes 25 installable options

  • 1 "all-skills" bundle with strict: false (intelligent routing across all 24 skills)

  • 24 individual skills with strict: true (explicit activation when installed)

    • Installation Flexibility:

  • Install the bundle for comprehensive coverage with smart skill selection

  • Install individual skills for focused, high-performance context

  • Mix and match based on your needs

    • Reviews