AI Design Components
Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude
Install
claude plugin install ui-foundation-skills@ai-design-componentsInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Full-stack development skills for AI-assisted development with Claude
What is this?
A collection of 76 production-ready Claude Skills covering frontend, backend, DevOps, infrastructure, security, cloud, and AI/ML development. Skills provide Claude with domain expertise, decision frameworks, and production-ready code patterns.
Documentation
Full documentation: ancoleman.github.io/ai-design-components
| Resource | Description |
|---|---|
| Getting Started | Introduction and overview |
| Installation | Setup instructions |
| Skills Reference | All 76 skills documented |
| Skillchain Guide | Guided workflow system |
Quick Start
Option 1: Installer Script (Recommended)
The interactive installer handles everything - skills, skillchain, and plugins:
git clone https://github.com/ancoleman/ai-design-components.git
cd ai-design-components
./install.sh
The installer provides:
- Interactive menu for choosing what to install
- Skillchain v3.0 with 76 skills across 10 domains
- Plugin installation for all 19 plugin groups
- Automatic setup of commands and data directories
# Installer commands
./install.sh # Interactive mode
./install.sh plugins list # See all available plugins
./install.sh plugins install # Install all plugins
./install.sh skillchain # Install skillchain only
Option 2: Manual Plugin Installation
If you prefer using Claude's plugin commands directly:
# Add marketplace
claude plugin marketplace add ancoleman/ai-design-components
# Install all 19 plugins (76 skills)
claude plugin install ui-foundation-skills@ai-design-components
claude plugin install ui-data-skills@ai-design-components
claude plugin install ui-input-skills@ai-design-components
claude plugin install ui-interaction-skills@ai-design-components
claude plugin install ui-structure-skills@ai-design-components
claude plugin install ui-content-skills@ai-design-components
claude plugin install ui-assembly-skills@ai-design-components
claude plugin install backend-data-skills@ai-design-components
claude plugin install backend-api-skills@ai-design-components
claude plugin install backend-platform-skills@ai-design-components
claude plugin install backend-ai-skills@ai-design-components
claude plugin install devops-skills@ai-design-components
claude plugin install infrastructure-skills@ai-design-components
claude plugin install security-skills@ai-design-components
claude plugin install developer-productivity-skills@ai-design-components
claude plugin install data-engineering-skills@ai-design-components
claude plugin install ai-ml-skills@ai-design-components
claude plugin install cloud-provider-skills@ai-design-components
claude plugin install finops-skills@ai-design-components
Option 3: Selective Installation
Install only what you need:
# Add marketplace first
claude plugin marketplace add ancoleman/ai-design-components
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
Production-grade engineering skills for AI coding agents.