https://github.com/ancoleman/ai-design-components
Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude
https://github.com/ancoleman/ai-design-components
ai-design anthropic claude claude-code claude-skills design-system full-stack react skills typescript ui-components
Last synced: 4 months ago
JSON representation
Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude
- Host: GitHub
- URL: https://github.com/ancoleman/ai-design-components
- Owner: ancoleman
- License: mit
- Created: 2025-11-13T19:42:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-12-04T20:44:27.000Z (7 months ago)
- Last Synced: 2025-12-06T01:56:16.816Z (7 months ago)
- Topics: ai-design, anthropic, claude, claude-code, claude-skills, design-system, full-stack, react, skills, typescript, ui-components
- Language: Python
- Size: 4.02 MB
- Stars: 5
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
> Full-stack development skills for AI-assisted development with Claude
[](./VERSION)
[](./LICENSE)
[](https://ancoleman.github.io/ai-design-components/docs/skills/overview)
[](https://ancoleman.github.io/ai-design-components/)
## 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](https://ancoleman.github.io/ai-design-components/)**
| Resource | Description |
|----------|-------------|
| [Getting Started](https://ancoleman.github.io/ai-design-components/docs/intro) | Introduction and overview |
| [Installation](https://ancoleman.github.io/ai-design-components/docs/installation) | Setup instructions |
| [Skills Reference](https://ancoleman.github.io/ai-design-components/docs/skills/overview) | All 76 skills documented |
| [Skillchain Guide](https://ancoleman.github.io/ai-design-components/docs/skillchain/overview) | Guided workflow system |
## Quick Start
### Option 1: Installer Script (Recommended)
The interactive installer handles everything - skills, skillchain, and plugins:
```bash
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
```bash
# 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:
```bash
# 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:
```bash
# 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
```bash
# 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 @ai-design-components # Install
claude plugin uninstall # Uninstall
# Validation
claude plugin validate .claude-plugin/marketplace.json # Validate
```
## Using Skillchain
Once installed, use the `/skillchain:start` command for guided workflows:
```bash
/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](https://ancoleman.github.io/ai-design-components/docs/skills/overview) for the complete list.
## Prerequisites
- **Claude Code CLI** - [Install Claude Code](https://docs.anthropic.com/en/docs/claude-code)
- **Context7 MCP** (recommended) - For up-to-date library documentation
## Resources
- [Plugin Commands Reference](https://ancoleman.github.io/ai-design-components/docs/guides/plugin-commands) - Complete CLI reference for marketplace/plugin management
- [Anthropic Skills Documentation](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview)
- [Skills Best Practices](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices)
- [LLM Ecosystem Guide](https://ancoleman.github.io/ai-design-components/llm-ecosystem)
## License
MIT License - See [LICENSE](./LICENSE) for details.
---
**[View Full Documentation](https://ancoleman.github.io/ai-design-components/)** | Built following [Anthropic's Skills best practices](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview)