skill

ai-design-components

Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude

ancoleman/ai-design-componentscommunitylistedunreviewednot running here yet

Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below; one-click install arrives with accounts.

README

synced Oct 17, 2026

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