How do I install ai-design-components?

Run these in Claude Code: npx -y skills add ancoleman/ai-design-components. Then prompt normally.

Does ai-design-components auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Is ai-design-components free?

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

ai-design-components

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

FLOW.md

ancoleman@ancoleman

GitHub

Stats

Python TypeScript Bash SQL Kubernetes

What's inside

Skills

/administering-linuxManage Linux systems covering systemd services, process management, filesystems, networking, performance tuning, and troubleshooting. Use when deploying applications, optimizing server performance, diagnosing production issues, or managing users and security on Linux servers.

FAQ

ai-design-components is a Claude Code plugin with 76 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes administering-linux, ai-data-engineering, architecting-data. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is ai-design-components?: Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude
How do I install ai-design-components?: Run these in Claude Code: npx -y skills add ancoleman/ai-design-components. Then prompt normally.
Does ai-design-components auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is ai-design-components free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Flowy

ai-design-components · Flowy

README

Read on GitHub ↗

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

File tree

1530

ancoleman/ai-design-componentsView on GitHub ↗

.claude-commands/
  README.md
  skillchain/
  skillchain-data/
    registries/
      _index.yaml
      ai-ml.yaml
      backend.yaml
      cloud.yaml
      data.yaml
      developer.yaml
      devops.yaml
      finops.yaml
      frontend.yaml
      infrastructure.yaml
      security.yaml
    registry.yaml
    shared/
      chain-context-schema.yaml
      changelog.md
      compatibility.md
      execution-flow.md
      execution-protocol.md
      orchestrator-preference-guide.md
      parallel-loading.md
      preference-quick-ref.md
      PREFERENCES_IMPLEMENTATION.md
      preferences.md
      skill-graph.yaml
      theming-rules.md
      validation.md
    blueprints/
      api-first.md
      ci-cd.md
      cloud.md
      cost.md
      crud-api.md
      dashboard.md
      data-pipeline.md
      k8s.md
      ml-pipeline.md
      observability.md
      rag-pipeline.md
      security.md
    categories/
      ai-ml.md
      backend.md
      cloud.md
      data.md
      delegated.md
      developer.md
      devops.md
      dynamic.md
      finops.md
      frontend.md
      fullstack.md
      infrastructure.md
      multi-domain.md
      security.md
    help.md
    start.md
.claude-plugin/
  marketplace.json
.github/
  ISSUE_TEMPLATE/
    bug_report.yml
    config.yml
    documentation.yml
    feature_request.yml
    question.yml
    roadmap_item.yml
    skill_contribution.yml
  ROADMAP.md
  workflows/
    deploy-pages.yml
    validate-skillchain.yml
    validate-skills.yml
.gitignore
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
demo/
  DECISION_TREE.md
  examples/
    palo-alto-security-dashboard/
      Dashboard.css
      Dashboard.tsx
      DonutChart.css
      DonutChart.tsx
      EmptyState.css
      EmptyState.tsx
      index.html
      index.tsx
      KPICard.css
      KPICard.tsx
      main.tsx
      package.json
      README.md
      Toast.css
      Toast.tsx
      tokens.css
      tsconfig.json
      vite.config.ts
  KEYWORD_TRIGGERS.md
  QUICKSTART.md
  README.md
  SKILLCHAIN_WORKFLOW.md
  USER_PROMPTS.md
evaluation/
  evaluate.py
  post_gen_evaluate.py
  README.md
  scenarios.yaml
install.sh
LICENSE
pages/
  .gitignore
  blog/
    2025-12-02-skillchain-v2.1.md
    2025-12-03-v0.4.0-progressive-disclosure.md
    2025-12-03-v0.4.1-master-plans.md
    2025-12-08-skillchain-v3.0.md
    authors.yml
    tags.yml
  docs/
    guides/
      best-practices.md
      creating-skills.md
      llm-ecosystem.md
      plugin-commands.md
      research-methodology.md
      skill-validation.md
    installation.md
    intro.md
    master-plans/
      ai-ml/
        _category_.json
        embedding-optimization.md
        evaluating-llms.md
        implementing-mlops.md
        prompt-engineering.md
      cloud/
        _category_.json
        deploying-on-aws.md
        deploying-on-azure.md
        deploying-on-gcp.md
      data/
        _category_.json
        architecting-data.md
        optimizing-sql.md
        performance-engineering.md
        secret-management.md
        streaming-data.md
        transforming-data.md
      developer-productivity/
        _category_.json
        building-clis.md
        debugging-techniques.md
        designing-apis.md
        designing-sdks.md
        generating-documentation.md
        managing-git-workflows.md
        writing-github-actions.md
      devops/
        _category_.json
        building-ci-pipelines.md
        implementing-gitops.md
        managing-incidents.md
        platform-engineering.md
        testing-strategies.md
        writing-dockerfiles.md
      finops/
        _category_.json
        optimizing-costs.md
        resource-tagging.md
        security-hardening.md
      infrastructure/
        _category_.json
        administering-linux.md
        architecting-networks.md
        configuring-nginx.md
        designing-distributed-systems.md
        implementing-service-mesh.md
        load-balancing-patterns.md
        managing-configuration.md
        managing-dns.md
        operating-kubernetes.md
        planning-disaster-recovery.md
        shell-scripting.md
        writing-infrastructure-code.md
      overview.md
      security/
        _category_.json
        architecting-security.md
        configuring-firewalls.md
        implementing-compliance.md
        implementing-tls.md
        managing-vulnerabilities.md
        siem-logging.md
    skillchain/
      architecture-diagram.md
      architecture.md
      blueprints.md
      chain-context.md
      delegated-execution.md
      dynamic-chains.md
      installation.md
      overview.md
      usage.md
    skills/
      ai-ml/
        _category_.json
        embedding-optimization.md
        evaluating-llms.md
        implementing-mlops.md
        prompt-engineering.md
      backend/
        _category_.json
        ai-data-engineering.md
        deploying-applications.md
        implementing-api-patterns.md
        implementing-observability.md
        implementing-realtime-sync.md
        ingesting-data.md
        model-serving.md
        securing-authentication.md
        using-document-databases.md
        using-graph-databases.md
        using-message-queues.md
        using-relational-databases.md
        using-timeseries-databases.md
        using-vector-databases.md
      cloud/
        _category_.json
        deploying-on-aws.md
        deploying-on-azure.md
        deploying-on-gcp.md
      data-engineering/
        _category_.json
        architecting-data.md
        optimizing-sql.md
        performance-engineering.md
        secret-management.md
        streaming-data.md
        transforming-data.md
      developer-productivity/
        _category_.json
        building-clis.md
        debugging-techniques.md
        designing-apis.md
        designing-sdks.md
        generating-documentation.md
        managing-git-workflows.md
        writing-github-actions.md
      devops/
        _category_.json
        building-ci-pipelines.md
        implementing-gitops.md
        managing-incidents.md
        platform-engineering.md
        testing-strategies.md
        writing-dockerfiles.md
      finops/
        _category_.json
        optimizing-costs.md
        resource-tagging.md
      frontend/
        _category_.json
        assembling-components.md
        building-ai-chat.md
        building-forms.md
        building-tables.md
        creating-dashboards.md
        designing-layouts.md
        displaying-timelines.md
        guiding-users.md
        implementing-drag-drop.md
        implementing-navigation.md
        implementing-search-filter.md
        managing-media.md
        providing-feedback.md
        theming-components.md
        visualizing-data.md
      infrastructure/
        _category_.json
        administering-linux.md
        architecting-networks.md
        configuring-nginx.md
        designing-distributed-systems.md
        implementing-service-mesh.md
        load-balancing-patterns.md
        managing-configuration.md
        managing-dns.md
        operating-kubernetes.md
        planning-disaster-recovery.md
        shell-scripting.md
        writing-infrastructure-code.md
      overview.md
      security/
        _category_.json
        architecting-security.md
        configuring-firewalls.md
        implementing-compliance.md
        implementing-tls.md
        managing-vulnerabilities.md
        security-hardening.md
        siem-logging.md
  docusaurus.config.ts
  package-lock.json
  package.json
  README.md
  sidebars.ts
  src/
    components/
      HomepageFeatures/
        index.tsx
        styles.module.css
    css/
      custom.css
    pages/
      index.module.css
      index.tsx
      llm-ecosystem.module.css
      llm-ecosystem.tsx
      markdown-page.md
    theme/
      BlogLayout/
        index.tsx
        styles.module.css
  static/
    .nojekyll
    design/
      skillchain-architecture-philosophy.md
    img/
      apple-touch-icon.png
      favicon.ico
      logo.png
      social-card.jpg
    llm-ecosystem.html
  tsconfig.json
README.md
scripts/
  fix_skill_invocations.py
  requirements.txt
  runtime/
    BLUEPRINT_SPEC.md
    completeness_checker.py
    example_blueprint.md
    INTEGRATION.md
  skill-fixes/
    add_toc.py
    fix_second_person.py
    rename_to_gerund.py
    update_docs_gerund.py
  sync_registry_invocations.py
  validation/
    __init__.py
    __main__.py
    blueprints.py
    cli.py
    config/
      __init__.py
      community.yaml
      project.yaml
      rules.yaml
    formatters.py
    README.md
    result.py
    rules.py
    tui.py
    validator.py
SETUP.md
skills/
  administering-linux/
    examples/
      configs/
        sshd_config.hardened
      scripts/
        backup.sh
      systemd-units/
        backup.service
        backup.timer
        webapp.service
    outputs.yaml
    references/
      filesystem-management.md
      network-configuration.md
      performance-tuning.md
      security-hardening.md
      systemd-guide.md
      troubleshooting-guide.md
    SKILL.md
  ai-data-engineering/
    examples/
      dagster-pipelines/
        embedding_pipeline.py
      feast-features/
        README.md
        requirements.txt
        setup_features.py
... 1600 more

ai-design-components

Skills

ai-design-components

Skills

Badges

README

What is this?

Documentation

Quick Start

Option 1: Installer Script (Recommended)

Option 2: Manual Plugin Installation

Option 3: Selective Installation

Plugin Commands Reference

Using Skillchain

Skill Categories

Prerequisites

Resources

License

File tree