AI Design Components plugin
A Claude Code marketplace of 19 plugins and 76 skills for frontend, backend, DevOps and security, with a skill chain command
- 525 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skills steer Claude toward writing code, infrastructure configuration and DevOps commands that the agent can run in your project
- The install.sh installer creates commands and data directories in Claude Code settings
- The cloud and infrastructure groups describe working with AWS, GCP and Azure accounts and resources
Install
- Works in
Manual install
claude plugin marketplace add ancoleman/ai-design-components
claude plugin install devops-skills@ai-design-componentsAdds the marketplace and installs one group. The other 18 plugins install with the same command and a different name.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skills steer Claude toward writing code, infrastructure configuration and DevOps commands that the agent can run in your project
- The install.sh installer creates commands and data directories in Claude Code settings
- The cloud and infrastructure groups describe working with AWS, GCP and Azure accounts and resources
This is third-party code. Review the repository files before installing.
What it does
AI Design Components is a Claude Code marketplace of 19 plugins holding 76 skills for full-cycle development. The frontend part covers design tokens and themes, forms and tables, and dashboards with charts. The backend part handles databases, APIs and authorization. The remaining plugins cover DevOps and infrastructure as code, security, data and MLOps, and separate groups describe AWS, GCP and Azure cloud patterns. Each skill gives Claude a base of domain knowledge, a decision framework for picking an approach and ready code patterns. The theming-components skill serves as the shared styling layer that the other component skills refer to. The /skillchain:start command assembles a chain of skills for a task. Describe the goal, for example a dashboard with charts and filters, a REST API with Postgres or a RAG pipeline with embeddings. You can install all plugins at once with the interactive install.sh script or one by one with claude plugin commands.
Who it is for. For developers who run a whole product with Claude Code, from the interface to infrastructure and security.
Good fit when
- You need to build a dashboard with charts, tables and filters and keep one theme system, including dark and high contrast
- You need to pick and describe a design for a REST API with a database, authorization and observability
- You want a chain of skills from /skillchain:start for a task such as Kubernetes with monitoring or a RAG pipeline
- You want only the groups you need installed, for example infrastructure-skills, devops-skills and security-skills
- Your interface needs right-to-left language support: the theming-components skill covers CSS logical properties
Not a fit when
- You need one small skill: the set is built for the full development cycle, and installing it for a single topic is excessive
- You do not work in Claude Code: installation is built around its marketplace and claude plugin commands
- You need skills for a specific Russian service: the set is general and covers international technologies
- You need examples on the freshest library and cloud API versions: the repository was last changed in December 2025
Example request
/skillchain:start dashboard with charts and filters: build a sales dashboard with monthly charts and filters by region and managerLimitations
- Claude Code CLI is required. For up-to-date library documentation the author suggests adding the Context7 MCP server.
- The install.sh script sets up skills, skillchain commands and data directories, so read it before running.
- Skill texts and documentation are in English.
- The last commit dates from December 2025, and library and cloud service versions in the examples may go stale.
- Component skills refer to theming-components as the shared styling layer, so install the ui-foundation-skills plugin together with the other UI plugins.
How to disable. Remove the plugins you installed with claude plugin uninstall and the marketplace with claude plugin marketplace rm ai-design-components. If you installed through install.sh, delete the skillchain commands and data directories the installer created by hand.
FAQ
How do I install AI Design Components in Claude Code?
Add the marketplace with claude plugin marketplace add ancoleman/ai-design-components, then install plugins by group, for example claude plugin install ui-data-skills@ai-design-components. The other path is to clone the repository and run ./install.sh with its interactive menu.
How does the /skillchain:start command work?
You describe the task in one phrase, for example REST API with postgres or kubernetes with monitoring, and the command picks a chain of skills that takes Claude through the relevant areas in order. ./install.sh skillchain installs the skillchain component.
Which skills are in the set?
The skills are split into plugin groups such as ui-data-skills, devops-skills and security-skills. The full list with descriptions is in the project's documentation on GitHub Pages.
Can I install only part of the set?
Yes. After adding the marketplace install plugins one at a time with claude plugin install. ./install.sh plugins list shows every plugin.
Do I need an extra MCP server?
It is not required for the skills, but the author recommends adding Context7 MCP so Claude gets up-to-date library documentation.
Discussion
No questions or reviews yet.
Related
PluginsClaudeKit Skills
ClaudeKit - Agent Skills
A plugin marketplace for Claude Code with a set of thirty-plus skills: frontend, backend, devops, databases, documents, debugging and MCP work
Claude Code Skills and Agents
Claude Code Skills & Agents
A Claude Code plugin bundling skills and sub-agents: deep research, image generation, GitHub work, code review and model switching
Claude Skills for full-stack developers
Claude Skills
67 skills across languages, frameworks, DevOps and security, plus 9 workflow commands for Jira and Confluence epics
A marketplace of Claude Code plugins for engineering workflows: feature planning, tests, review, git automation and a code execution runtime
A plugin and skill marketplace for Claude Code: Cloudflare, frontend, design assets, writing, releases and integrations
Softaworks Agent Toolkit
Softaworks Agent Skills
A marketplace of skills, subagents and commands for coding agents: development, documentation, planning and workplace communication
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| AI Design Components (this entry) | no | 525 | |
| Agentic Plugin Marketplace by wshobson | no | 41,937 | a much larger marketplace with agents and commands, generated for Codex, Cursor and other clients |
| Claude Code Templates | no | 32,964 | a CLI and template catalog for Claude Code with hooks, MCP and agents |
README in short
The README briefly describes the set and the install options, then gives a marketplace command reference, skillchain examples and a category table. The full documentation lives on GitHub Pages.
README badge
Original SKILL.md
---
name: theming-components
description: Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages.
---
# Design Tokens & Theming System
Comprehensive design token system providing the foundational styling architecture for all component skills, enabling brand customization, theme switching, RTL support, and consistent visual design.
## Overview
Design tokens are the **single source of truth** for all visual design decisions. This skill provides:
1. **Complete Token Taxonomy**: 7 core categories (color, typography, spacing, borders, shadows, motion, z-index)
2. **Theme Switching**: Light/dark mode, high-contrast, custom brand themes
3. **RTL/i18n Support**: CSS logical properties for automatic right-to-left language support
4. **Multi-Platform Export**: CSS variables, SCSS, iOS Swift, Android XML, JavaScript
5. **Component Integration**: Skill chaining architecture for consistent styling across all components
**Critical Architectural Principle:**
```
Component Skills (Behavior + Structure) → Use tokens for ALL visual styling
Design Tokens (Styling Variables) → Define colors, spacing, typography
Theme Files (Token Overrides) → Light, dark, brand-specific values
```
---
## Quick Start
### Using Tokens in Components
**Step 1: Reference tokens in your component:**
```css
.button {
background-color: var(--button-bg-primary);
color: var(--button-text-primary);
padding-inline: var(--button-padding-inline);
padding-block: var(--button-padding-block);