AI Design Components Agent Skill

<p align="center"> <img src="https://ancoleman.github.io/ai-design-components/img/logo.png" alt="AI Design Components Logo" width="150"> </p>

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

# Install specific plugin groups
claude plugin install infrastructure-skills@ai-design-components
claude plugin install devops-skills@ai-design-components
claude plugin install security-skills@ai-design-components

Plugin Commands Reference

# Marketplace
claude plugin marketplace add ancoleman/ai-design-components    # Add
claude plugin marketplace rm ai-design-components               # Remove
claude plugin marketplace list                                  # List all
claude plugin marketplace update ai-design-components           # Update

# Plugins
claude plugin install <plugin>@ai-design-components             # Install
claude plugin uninstall <plugin>                                # Uninstall

# Validation
claude plugin validate .claude-plugin/marketplace.json          # Validate

Using Skillchain

Once installed, use the /skillchain:start command for guided workflows:

/skillchain:start dashboard with charts and filters
/skillchain:start REST API with postgres
/skillchain:start kubernetes with monitoring
/skillchain:start RAG pipeline with embeddings

Skill Categories

Category	Skills	Description
Frontend	15	UI components, forms, data viz, navigation
Backend	14	Databases, APIs, auth, observability
DevOps	6	CI/CD, GitOps, platform engineering
Infrastructure	12	IaC, Kubernetes, networking, distributed systems
Security	7	Architecture, compliance, TLS, hardening
Developer Productivity	7	APIs, CLIs, SDKs, documentation
Data Engineering	6	Architecture, streaming, SQL, secrets
AI/ML	4	MLOps, RAG, prompt engineering
Cloud	3	AWS, GCP, Azure patterns
FinOps	2	Cost optimization, tagging

See Skills Overview for the complete list.

Prerequisites

• Claude Code CLI - Install Claude Code
• Context7 MCP (recommended) - For up-to-date library documentation

Resources

• Plugin Commands Reference - Complete CLI reference for marketplace/plugin management
• Anthropic Skills Documentation
• Skills Best Practices
• LLM Ecosystem Guide

License

MIT License - See LICENSE for details.

---

View Full Documentation | Built following Anthropic's Skills best practices