ai-design-components

skill

ancoleman

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

View on GitHub

394 starsMITSynced Aug 2, 2026

Install to Claude Code

/plugin marketplace add ancoleman/ai-design-components

README

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

Rendered live from ancoleman/ai-design-components's GitHub README — not stored, always reflects the source repo.

95 Plugins

Name	Description	Category	Source
ui-foundation-skills	Foundational design system including tokens and theming for consistent styling across all components	—	./
theming-components	Skill bundled in ui-foundation-skills	skill	./skills/theming-components
ui-data-skills	Data visualization, tables, and dashboard components for displaying and analyzing data	—	./
visualizing-data	Skill bundled in ui-data-skills	skill	./skills/visualizing-data
building-tables	Skill bundled in ui-data-skills	skill	./skills/building-tables
creating-dashboards	Skill bundled in ui-data-skills	skill	./skills/creating-dashboards
ui-input-skills	Form systems, search, and filter components for user input and data collection	—	./
building-forms	Skill bundled in ui-input-skills	skill	./skills/building-forms
implementing-search-filter	Skill bundled in ui-input-skills	skill	./skills/implementing-search-filter
ui-interaction-skills	Interactive components including AI chat interfaces, drag-drop functionality, and feedback systems	—	./
building-ai-chat	Skill bundled in ui-interaction-skills	skill	./skills/building-ai-chat
implementing-drag-drop	Skill bundled in ui-interaction-skills	skill	./skills/implementing-drag-drop
providing-feedback	Skill bundled in ui-interaction-skills	skill	./skills/providing-feedback
ui-structure-skills	Navigation, layout, and timeline components for app structure and organization	—	./
implementing-navigation	Skill bundled in ui-structure-skills	skill	./skills/implementing-navigation
designing-layouts	Skill bundled in ui-structure-skills	skill	./skills/designing-layouts
displaying-timelines	Skill bundled in ui-structure-skills	skill	./skills/displaying-timelines
ui-content-skills	Media management and user onboarding components for content-rich experiences	—	./
managing-media	Skill bundled in ui-content-skills	skill	./skills/managing-media
guiding-users	Skill bundled in ui-content-skills	skill	./skills/guiding-users
ui-assembly-skills	Capstone skill for assembling component outputs into unified, production-ready systems with token validation and framework scaffolding	—	./
assembling-components	Skill bundled in ui-assembly-skills	skill	./skills/assembling-components
backend-data-skills	Database and data storage: relational, vector, time-series, document, graph, plus data ingestion	—	./
ingesting-data	Skill bundled in backend-data-skills	skill	./skills/ingesting-data
using-relational-databases	Skill bundled in backend-data-skills	skill	./skills/using-relational-databases
using-vector-databases	Skill bundled in backend-data-skills	skill	./skills/using-vector-databases
using-timeseries-databases	Skill bundled in backend-data-skills	skill	./skills/using-timeseries-databases
using-document-databases	Skill bundled in backend-data-skills	skill	./skills/using-document-databases
using-graph-databases	Skill bundled in backend-data-skills	skill	./skills/using-graph-databases
backend-api-skills	API development, messaging, and real-time communication	—	./
implementing-api-patterns	Skill bundled in backend-api-skills	skill	./skills/implementing-api-patterns
using-message-queues	Skill bundled in backend-api-skills	skill	./skills/using-message-queues
implementing-realtime-sync	Skill bundled in backend-api-skills	skill	./skills/implementing-realtime-sync
backend-platform-skills	Observability, security, and deployment infrastructure	—	./
implementing-observability	Skill bundled in backend-platform-skills	skill	./skills/implementing-observability
securing-authentication	Skill bundled in backend-platform-skills	skill	./skills/securing-authentication
deploying-applications	Skill bundled in backend-platform-skills	skill	./skills/deploying-applications
backend-ai-skills	AI/ML data engineering and model serving	—	./
ai-data-engineering	Skill bundled in backend-ai-skills	skill	./skills/ai-data-engineering
model-serving	Skill bundled in backend-ai-skills	skill	./skills/model-serving
devops-skills	CI/CD pipelines, GitOps workflows, testing strategies, platform engineering, and containerization	—	./
testing-strategies	Skill bundled in devops-skills	skill	./skills/testing-strategies
building-ci-pipelines	Skill bundled in devops-skills	skill	./skills/building-ci-pipelines
implementing-gitops	Skill bundled in devops-skills	skill	./skills/implementing-gitops
platform-engineering	Skill bundled in devops-skills	skill	./skills/platform-engineering
managing-incidents	Skill bundled in devops-skills	skill	./skills/managing-incidents
writing-dockerfiles	Skill bundled in devops-skills	skill	./skills/writing-dockerfiles
infrastructure-skills	Kubernetes operations, infrastructure as code, networking, service mesh, and distributed systems	—	./
operating-kubernetes	Skill bundled in infrastructure-skills	skill	./skills/operating-kubernetes
writing-infrastructure-code	Skill bundled in infrastructure-skills	skill	./skills/writing-infrastructure-code
administering-linux	Skill bundled in infrastructure-skills	skill	./skills/administering-linux
architecting-networks	Skill bundled in infrastructure-skills	skill	./skills/architecting-networks
load-balancing-patterns	Skill bundled in infrastructure-skills	skill	./skills/load-balancing-patterns
planning-disaster-recovery	Skill bundled in infrastructure-skills	skill	./skills/planning-disaster-recovery
configuring-nginx	Skill bundled in infrastructure-skills	skill	./skills/configuring-nginx
shell-scripting	Skill bundled in infrastructure-skills	skill	./skills/shell-scripting
managing-dns	Skill bundled in infrastructure-skills	skill	./skills/managing-dns
implementing-service-mesh	Skill bundled in infrastructure-skills	skill	./skills/implementing-service-mesh
managing-configuration	Skill bundled in infrastructure-skills	skill	./skills/managing-configuration
designing-distributed-systems	Skill bundled in infrastructure-skills	skill	./skills/designing-distributed-systems
security-skills	Security architecture, compliance frameworks, vulnerability management, TLS, firewalls, and SIEM	—	./
architecting-security	Skill bundled in security-skills	skill	./skills/architecting-security
implementing-compliance	Skill bundled in security-skills	skill	./skills/implementing-compliance
managing-vulnerabilities	Skill bundled in security-skills	skill	./skills/managing-vulnerabilities
implementing-tls	Skill bundled in security-skills	skill	./skills/implementing-tls
configuring-firewalls	Skill bundled in security-skills	skill	./skills/configuring-firewalls
siem-logging	Skill bundled in security-skills	skill	./skills/siem-logging
security-hardening	Skill bundled in security-skills	skill	./skills/security-hardening
developer-productivity-skills	API design, CLI development, SDK creation, documentation generation, debugging, and Git workflows	—	./
designing-apis	Skill bundled in developer-productivity-skills	skill	./skills/designing-apis
building-clis	Skill bundled in developer-productivity-skills	skill	./skills/building-clis
designing-sdks	Skill bundled in developer-productivity-skills	skill	./skills/designing-sdks
generating-documentation	Skill bundled in developer-productivity-skills	skill	./skills/generating-documentation
debugging-techniques	Skill bundled in developer-productivity-skills	skill	./skills/debugging-techniques
managing-git-workflows	Skill bundled in developer-productivity-skills	skill	./skills/managing-git-workflows
writing-github-actions	Skill bundled in developer-productivity-skills	skill	./skills/writing-github-actions
data-engineering-skills	Data architecture, streaming pipelines, transformations, SQL optimization, and performance engineering	—	./
architecting-data	Skill bundled in data-engineering-skills	skill	./skills/architecting-data
streaming-data	Skill bundled in data-engineering-skills	skill	./skills/streaming-data
transforming-data	Skill bundled in data-engineering-skills	skill	./skills/transforming-data
optimizing-sql	Skill bundled in data-engineering-skills	skill	./skills/optimizing-sql
secret-management	Skill bundled in data-engineering-skills	skill	./skills/secret-management
performance-engineering	Skill bundled in data-engineering-skills	skill	./skills/performance-engineering
ai-ml-skills	MLOps patterns, prompt engineering, LLM evaluation, and embedding optimization	—	./
implementing-mlops	Skill bundled in ai-ml-skills	skill	./skills/implementing-mlops
prompt-engineering	Skill bundled in ai-ml-skills	skill	./skills/prompt-engineering
evaluating-llms	Skill bundled in ai-ml-skills	skill	./skills/evaluating-llms
embedding-optimization	Skill bundled in ai-ml-skills	skill	./skills/embedding-optimization
cloud-provider-skills	Cloud-specific patterns and best practices for AWS, GCP, and Azure	—	./
deploying-on-aws	Skill bundled in cloud-provider-skills	skill	./skills/deploying-on-aws
deploying-on-gcp	Skill bundled in cloud-provider-skills	skill	./skills/deploying-on-gcp
deploying-on-azure	Skill bundled in cloud-provider-skills	skill	./skills/deploying-on-azure
finops-skills	Cloud cost optimization and resource tagging strategies	—	./
optimizing-costs	Skill bundled in finops-skills	skill	./skills/optimizing-costs
resource-tagging	Skill bundled in finops-skills	skill	./skills/resource-tagging

0 Comments

No comments yet — be the first to share an update.