designing-layouts

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.

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 |

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 devop