Skip to main content

Skills Overview

AI Design Components provides 76 production-ready Claude Skills organized into 10 comprehensive categories. Each skill has complete SKILL.md implementations with progressive disclosure, code examples, and multi-language support.

What are Claude Skills?​

Skills are modular packages that extend Claude's capabilities through specialized knowledge and workflows. They use progressive disclosure - only metadata is pre-loaded, full content loads when relevant.

Key Features:

  • Modular design - Use individually or chain together
  • Progressive disclosure - Efficient context management
  • Multi-language support - Backend skills support Python, TypeScript, Rust, Go
  • Production-ready - Complete implementations with examples
  • Skillchain compatible - Orchestrated automatically via /skillchain

Frontend Skills (15)​

Foundation (1)​

SkillDescriptionKey Features
theming-componentsDesign tokens, colors, dark mode, brand theming7 token categories, theme switching, accessible colors

Structure (3)​

SkillDescriptionKey Features
designing-layoutsGrid systems, responsive design, sidebarsCSS Grid, Flexbox, responsive breakpoints
implementing-navigationMenus, tabs, breadcrumbs, routingSidebar, top nav, tabs, accessibility
displaying-timelinesActivity feeds, history, event logsVertical/horizontal, timestamps, icons

Data Display (3)​

SkillDescriptionKey Features
visualizing-dataCharts, graphs, plots (24+ types)Bar, line, pie, scatter, heatmap, treemap
building-tablesData grids, sorting, paginationFiltering, sorting, virtual scrolling
creating-dashboardsKPI cards, widgets, analyticsGrid layouts, responsive, real-time

User Input (2)​

SkillDescriptionKey Features
building-formsForms, validation, inputs (50+ types)React Hook Form, Zod, accessibility
implementing-search-filterSearch bars, faceted filtersReal-time, autocomplete, multi-facet

Interaction (3)​

SkillDescriptionKey Features
building-ai-chatChat UI, streaming, AI interfacesMessage history, streaming, multi-modal
implementing-drag-dropKanban, sortable lists, reorderingdnd-kit, touch support, accessibility
providing-feedbackToasts, alerts, loading statesNotifications, skeleton screens, progress

Content (2)​

SkillDescriptionKey Features
managing-mediaFile upload, galleries, video/audioDrag-and-drop, previews, cloud storage
guiding-usersOnboarding, tutorials, tooltipsProduct tours, hints, wizards

Assembly (1)​

SkillDescriptionKey Features
assembling-componentsFinal integration, validationToken validation, production-ready output

Backend Skills (14)​

Data Ingestion (1)​

SkillDescriptionLanguages
ingesting-dataETL, CSV, S3, APIs, CDC, dlt pipelinesPython, TypeScript

Databases (5)​

SkillDescriptionLanguages
databases-relationalPostgreSQL, MySQL, SQLite, ORMsPython, TypeScript, Rust, Go
databases-vectorQdrant, pgvector, Pinecone, RAGPython, TypeScript
databases-timeseriesClickHouse, TimescaleDB, InfluxDBPython, TypeScript, Go
databases-documentMongoDB, Firestore, DynamoDBPython, TypeScript, Go
databases-graphNeo4j, memgraph, CypherPython, TypeScript

APIs & Messaging (3)​

SkillDescriptionLanguages
api-patternsREST, GraphQL, gRPC, tRPCPython, TypeScript, Rust
message-queuesKafka, RabbitMQ, NATS, TemporalPython, TypeScript, Go
realtime-syncWebSockets, SSE, Y.js, presenceTypeScript, Python

Platform (3)​

SkillDescriptionLanguages
auth-securityOAuth 2.1, passkeys, RBAC, JWTPython, TypeScript, Rust
observabilityOpenTelemetry, LGTM stack, tracingPython, TypeScript, Go, Rust
deploying-applicationsKubernetes, serverless, edgePython, TypeScript, Go, Rust

AI/ML (2)​

SkillDescriptionLanguages
ai-data-engineeringRAG pipelines, embeddings, chunkingPython, TypeScript
model-servingvLLM, BentoML, Ollama, inferencePython

DevOps Skills (6)​

SkillDescriptionKey Features
testing-strategiesUnit, integration, E2E testing patternsTest frameworks, coverage, best practices
building-ci-pipelinesCI/CD pipelines, GitHub Actions, automationPipeline design, testing, deployment
implementing-gitopsGitOps workflows, ArgoCD, FluxGit-based deployments, declarative config
platform-engineeringInternal developer platforms, self-servicePlatform design, developer experience
managing-incidentsIncident response, postmortems, on-callRunbooks, escalation, retrospectives
writing-dockerfilesContainer images, multi-stage buildsOptimization, security, best practices

Infrastructure Skills (12)​

SkillDescriptionKey Features
operating-kubernetesK8s deployments, operators, managementPods, services, ingress, scaling
writing-infrastructure-codeTerraform, Pulumi, CloudFormationIaC patterns, modules, state management
administering-linuxLinux server management, systemdPackage management, security, monitoring
architecting-networksNetwork design, VPC, subnetsRouting, firewalls, load balancing
load-balancing-patternsLoad balancers, traffic distributionLayer 4/7, health checks, algorithms
planning-disaster-recoveryBackup, recovery, business continuityRTO/RPO, failover, testing
configuring-nginxNginx configuration, reverse proxySSL, caching, performance tuning
shell-scriptingBash scripting, automationBest practices, error handling, portability
managing-dnsDNS configuration, Route53, zonesRecords, routing policies, DNSSEC
implementing-service-meshIstio, Linkerd, service mesh patternsmTLS, observability, traffic management
managing-configurationConfiguration management, secretsEnvironment variables, config files
designing-distributed-systemsDistributed system patterns, scalabilityConsistency, availability, partitioning

Security Skills (7)​

SkillDescriptionKey Features
architecting-securitySecurity architecture, zero trustDefense in depth, least privilege
implementing-complianceCompliance frameworks, SOC 2, GDPRControls, audits, documentation
managing-vulnerabilitiesVulnerability scanning, patchingCVE management, remediation
implementing-tlsTLS/SSL configuration, certificatesmTLS, certificate management
configuring-firewallsFirewall rules, network securityiptables, cloud firewalls, segmentation
siem-loggingSecurity information and event managementLog aggregation, alerts, correlation
security-hardeningSystem hardening, CIS benchmarksOS hardening, secure configuration

Developer Productivity Skills (7)​

SkillDescriptionKey Features
designing-apisAPI design, REST, GraphQLDesign principles, versioning, documentation
building-clisCommand-line tools, CLI frameworksArgument parsing, output formatting
designing-sdksSDK design, client librariesAPI wrapping, versioning, examples
generating-documentationAuto-generated docs, API referencesDocusaurus, OpenAPI, JSDoc
debugging-techniquesDebugging strategies, toolsBreakpoints, logging, profiling
managing-git-workflowsGit workflows, branching strategiesFeature branches, releases, conflicts
writing-github-actionsGitHub Actions workflows, CI/CDWorkflows, runners, marketplace actions

Data Engineering Skills (6)​

SkillDescriptionKey Features
architecting-dataData architecture, warehouses, lakesSchema design, modeling, partitioning
streaming-dataStream processing, Kafka, event-drivenReal-time processing, windowing
transforming-dataETL/ELT, data pipelines, dbtData transformation, quality, lineage
optimizing-sqlSQL optimization, query performanceIndexes, execution plans, tuning
secret-managementSecrets management, Vault, rotationSecret storage, rotation, access control
performance-engineeringPerformance optimization, profilingBenchmarking, bottlenecks, scaling

AI/ML Skills (4)​

SkillDescriptionKey Features
implementing-mlopsMLOps pipelines, model deploymentTraining, versioning, monitoring
prompt-engineeringPrompt design, techniques, optimizationChain-of-thought, few-shot, evaluation
evaluating-llmsLLM evaluation, benchmarks, metricsQuality assessment, A/B testing
embedding-optimizationEmbedding models, vector searchChunking, retrieval, optimization

Cloud Skills (3)​

SkillDescriptionKey Features
deploying-on-awsAWS deployments, services, best practicesEC2, Lambda, RDS, S3, CloudFront
deploying-on-gcpGCP deployments, services, best practicesCompute Engine, Cloud Run, BigQuery
deploying-on-azureAzure deployments, services, best practicesVMs, App Service, Cosmos DB

FinOps Skills (2)​

SkillDescriptionKey Features
optimizing-costsCost optimization, budgets, forecastingCost allocation, savings plans, reserved instances
resource-taggingResource tagging, cost allocationTag strategies, compliance, reporting

Multi-Language Support​

All backend skills provide idiomatic patterns for multiple languages:

Python​

  • Framework: FastAPI, SQLAlchemy, Pydantic
  • Style: Type hints, async/await, modern tooling
  • Package Manager: uv, Poetry
  • Use Case: ML/AI, data engineering, rapid prototyping

TypeScript​

  • Framework: Express, Hono, Prisma, Drizzle
  • Style: Strict types, Zod validation
  • Runtime: Node.js, Bun, Deno
  • Use Case: Full-stack, serverless, edge computing

Rust​

  • Framework: Axum, SeaORM, Serde
  • Style: Memory-safe, zero-cost abstractions
  • Build: Cargo
  • Use Case: High-performance, systems programming

Go​

  • Framework: Gin, GORM, Chi
  • Style: Idiomatic Go, goroutines
  • Build: Go modules
  • Use Case: Microservices, cloud-native, CLI tools

Skill Invocation​

Individual Skills​

Load skills directly using the Skill tool:

Use the ui-foundation-skills:theming-components skill
Use the backend-data-skills:databases-relational skill

Use the /skillchain command for guided workflows:

/skillchain dashboard with charts        # Auto-selects 7 skills
/skillchain REST API with postgres       # Auto-selects 5 skills
/skillchain RAG pipeline                 # Auto-selects 6 skills

See Skillchain documentation for details.

Skill Structure​

Each skill follows Anthropic's best practices:

skills/[skill-name]/
├── SKILL.md                # Main skill file (< 500 lines)
├── init.md                 # Master plan and research
├── references/             # Detailed documentation
│   ├── patterns.md
│   ├── examples.md
│   └── library-guide.md
├── scripts/                # Utility scripts (token-free execution)
│   └── helper.py
├── examples/               # Code examples
│   ├── basic.tsx
│   └── advanced.tsx
└── assets/                 # Templates, schemas
    └── template.json

Progressive Disclosure:

  1. Level 1: Metadata (name + description) - Always in context
  2. Level 2: SKILL.md body - Loaded when skill triggers
  3. Level 3: References, scripts, examples - Loaded on-demand

Getting Started​

# Use the interactive installer
./install.sh

# Start Claude Code
claude

# Use skillchain
/skillchain:start dashboard with charts

See Skillchain documentation.

Option 2: Use Skills Directly​

# In Claude Code conversation
Use the ui-foundation-skills:theming-components skill
Then use the ui-data-skills:visualizing-data skill

Option 3: Explore Individual Skills​

Browse skill documentation by category:

Next Steps​