Skip to main content
ClaudeWave
ancoleman avatar
ancoleman

ai-design-components

Ver en GitHub

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

Skills374 estrellas55 forksPythonMITActualizado 6mo ago
ClaudeWave Trust Score
77/100
Trusted
Passed
  • Open-source license (MIT)
  • Healthy fork ratio
  • Clear description
  • Topics declared
Flags
  • !Inactive (>180d)
Last scanned: 6/11/2026
Install as a Claude Code skill
Method: Clone
Terminal
git clone https://github.com/ancoleman/ai-design-components ~/.claude/skills/ai-design-components
1. Clone the repository into your ~/.claude/skills directory (or copy the skill folder containing SKILL.md).
2. Start a new Claude Code session so the skill registry reloads.
3. Invoke it by name, or let Claude trigger it automatically when the task matches.
💡 If the repo bundles several skills, copy only the folders you need.

24 items en este repositorio

Manage 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.

Instalar

Data pipelines, feature stores, and embedding generation for AI/ML systems. Use when building RAG pipelines, ML feature serving, or data transformations. Covers feature stores (Feast, Tecton), embedding pipelines, chunking strategies, orchestration (Dagster, Prefect, Airflow), dbt transformations, data versioning (LakeFS), and experiment tracking (MLflow, W&B).

Instalar

Strategic guidance for designing modern data platforms, covering storage paradigms (data lake, warehouse, lakehouse), modeling approaches (dimensional, normalized, data vault, wide tables), data mesh principles, and medallion architecture patterns. Use when architecting data platforms, choosing between centralized vs decentralized patterns, selecting table formats (Iceberg, Delta Lake), or designing data governance frameworks.

Instalar

Design cloud network architectures with VPC patterns, subnet strategies, zero trust principles, and hybrid connectivity. Use when planning VPC topology, implementing multi-cloud networking, or establishing secure network segmentation for cloud workloads.

Instalar

Design comprehensive security architectures using defense-in-depth, zero trust principles, threat modeling (STRIDE, PASTA), and control frameworks (NIST CSF, CIS Controls, ISO 27001). Use when designing security for new systems, auditing existing architectures, or establishing security governance programs.

Instalar

Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.

Instalar

Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support. Use when creating ChatGPT-style interfaces, AI assistants, code copilots, or conversational agents. Handles streaming text, token limits, regeneration, feedback loops, tool usage visualization, and AI-specific error patterns. Provides battle-tested components from leading AI products with accessibility and performance built in.

Instalar

Constructs secure, efficient CI/CD pipelines with supply chain security (SLSA), monorepo optimization, caching strategies, and parallelization patterns for GitHub Actions, GitLab CI, and Argo Workflows. Use when setting up automated testing, building, or deployment workflows.

Instalar

Build professional command-line interfaces in Python, Go, and Rust using modern frameworks like Typer, Cobra, and clap. Use when creating developer tools, automation scripts, or infrastructure management CLIs with robust argument parsing, interactive features, and multi-platform distribution.

Instalar

Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages. Includes 50+ input types, validation strategies, accessibility patterns (WCAG 2.1), multi-step wizards, and UX best practices. Provides decision trees from data type to component selection, validation timing guidance, and error handling patterns. Use when creating forms, collecting user input, building surveys, implementing validation, designing multi-step workflows, or ensuring form accessibility.

Instalar

Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids. Use when creating tables, implementing sorting/filtering/pagination, handling large datasets (10-1M+ rows), building spreadsheet-like interfaces, or designing data-heavy components. Provides performance optimization strategies, accessibility patterns (WCAG/ARIA), responsive designs, and library recommendations (TanStack Table, AG Grid).

Instalar

Configure host-based firewalls (iptables, nftables, UFW) and cloud security groups (AWS, GCP, Azure) with practical rules for common scenarios like web servers, databases, and bastion hosts. Use when exposing services, hardening servers, or implementing network segmentation with defense-in-depth strategies.

Instalar

Configure nginx for static sites, reverse proxying, load balancing, SSL/TLS termination, caching, and performance tuning. When setting up web servers, application proxies, or load balancers, this skill provides production-ready patterns with modern security best practices for TLS 1.3, rate limiting, and security headers.

Instalar

Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts. Use this skill when building business intelligence dashboards, monitoring systems, executive reports, or any interface that requires multiple coordinated data displays with filters, metrics, and visualizations working together.

Instalar

Debugging workflows for Python (pdb, debugpy), Go (delve), Rust (lldb), and Node.js, including container debugging (kubectl debug, ephemeral containers) and production-safe debugging techniques with distributed tracing and correlation IDs. Use when setting breakpoints, debugging containers/pods, remote debugging, or production debugging.

Instalar

Deployment patterns from Kubernetes to serverless and edge functions. Use when deploying applications, setting up CI/CD, or managing infrastructure. Covers Kubernetes (Helm, ArgoCD), serverless (Vercel, Lambda), edge (Cloudflare Workers, Deno), IaC (Pulumi, OpenTofu, SST), and GitOps patterns.

Instalar

Selecting and implementing AWS services and architectural patterns. Use when designing AWS cloud architectures, choosing compute/storage/database services, implementing serverless or container patterns, or applying AWS Well-Architected Framework principles.

Instalar

Design and implement Azure cloud architectures using best practices for compute, storage, databases, AI services, networking, and governance. Use when building applications on Microsoft Azure or migrating workloads to Azure cloud platform.

Instalar

Implement applications using Google Cloud Platform (GCP) services. Use when building on GCP infrastructure, selecting compute/storage/database services, designing data analytics pipelines, implementing ML workflows, or architecting cloud-native applications with BigQuery, Cloud Run, GKE, Vertex AI, and other GCP services.

Instalar

Design APIs that are secure, scalable, and maintainable using RESTful, GraphQL, and event-driven patterns. Use when designing new APIs, evolving existing APIs, or establishing API standards for teams.

Instalar

When designing distributed systems for scalability, reliability, and consistency. Covers CAP/PACELC theorems, consistency models (strong, eventual, causal), replication patterns (leader-follower, multi-leader, leaderless), partitioning strategies (hash, range, geographic), transaction patterns (saga, event sourcing, CQRS), resilience patterns (circuit breaker, bulkhead), service discovery, and caching strategies for building fault-tolerant distributed architectures.

Instalar

Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints. Use when structuring app layouts, building responsive designs, or creating complex page structures.

Instalar

Design production-ready SDKs with retry logic, error handling, pagination, and multi-language support. Use when building client libraries for APIs or creating developer-facing SDK interfaces.

Instalar

Displays chronological events and activity through timelines, activity feeds, Gantt charts, and calendar interfaces. Use when showing historical events, project schedules, social feeds, notifications, audit logs, or time-based data. Provides implementation patterns for vertical/horizontal timelines, interactive visualizations, real-time updates, and responsive designs with accessibility (WCAG/ARIA).

Instalar
Casos de uso

Resumen de Skills

README no disponible. Visita el repo en GitHub para la documentación completa.
ai-designanthropicclaudeclaude-codeclaude-skillsdesign-systemfull-stackreactskillstypescriptui-components

Lo que la gente pregunta sobre ai-design-components

¿Qué es ancoleman/ai-design-components?

+

ancoleman/ai-design-components es skills para el ecosistema de Claude AI. Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude Tiene 374 estrellas en GitHub y se actualizó por última vez 6mo ago.

¿Cómo se instala ai-design-components?

+

Puedes instalar ai-design-components clonando el repositorio (https://github.com/ancoleman/ai-design-components) o siguiendo las instrucciones del README en GitHub. ClaudeWave también te ofrece bloques de instalación rápida en esta misma página.

¿Es seguro usar ancoleman/ai-design-components?

+

Nuestro agente de seguridad ha analizado ancoleman/ai-design-components y le ha asignado un Trust Score de 77/100 (tier: Trusted). Revisa el desglose completo de comprobaciones superadas y flags en esta página.

¿Quién mantiene ancoleman/ai-design-components?

+

ancoleman/ai-design-components es mantenido por ancoleman. La última actividad registrada en GitHub es de 6mo ago, con 3 issues abiertos.

¿Hay alternativas a ai-design-components?

+

Sí. En ClaudeWave puedes explorar skills similares en /categories/skills, ordenados por popularidad o actividad reciente.

Despliega ai-design-components en tu cloud

Lleva este repo a producción en minutos. Cada plataforma genera su propio entorno con variables de entorno editables.

¿Mantienes este repo? Añade un badge a tu README

Pega el badge en tu README de GitHub para mostrar que está auditado por ClaudeWave. Cada badge enlaza de vuelta a esta página y muestra el Trust Score actual.

Featured on ClaudeWave: ancoleman/ai-design-components
[![Featured on ClaudeWave](https://claudewave.com/api/badge/ancoleman-ai-design-components)](https://claudewave.com/repo/ancoleman-ai-design-components)
<a href="https://claudewave.com/repo/ancoleman-ai-design-components"><img src="https://claudewave.com/api/badge/ancoleman-ai-design-components" alt="Featured on ClaudeWave: ancoleman/ai-design-components" width="320" height="64" /></a>

Más Skills

farion1231
cc-switch
yesterday

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io

99.4k6.6kRust
Skillsai-toolsclaude-codeInstall
code-yeongyu
oh-my-openagent
today

omo/lazycodex: The coding agent for tokenmaxxers;the one and only agent harness for complex codebases. For your Codex, for your OpenCode

62k5kTypeScript
Skillsaiai-agentsInstall
Egonex-AI
Understand-Anything
yesterday

Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.

58.2k4.8kTypeScript
Skillsantigravity-skillsbusiness-knowledgeInstall
K-Dense-AI
scientific-agent-skills
today

Turn any AI agent into an AI Scientist. The #1 Agent Skills library for science, used by 160,000+ scientists worldwide. 140 ready-to-use skills plus 100+ scientific databases covering biology, chemistry, medicine, and drug discovery. Compatible with Cursor, Claude Code, Codex, Antigravity, and the open Agent Skills standard.

28.1k2.9kPython
Skillsagent-skillsai-scientistInstall
VoltAgent
awesome-agent-skills
today

A curated collection of 1000+ agent skills from official dev teams and the community, compatible with Claude Code, Codex, Gemini CLI, Cursor, and more.

25.2k2.7k
Skillsagent-skillsai-agentsInstall
JimLiu
baoyu-skills
today

No description provided.

21.4k2.5kTypeScript
Skillsagent-skillsclaude-skillsInstall