Referencia de Skills

Catálogo completo de las 67 skills disponibles en ClaudeKit

Las skills son módulos de conocimiento especializado que extienden las capacidades de ClaudeKit. En total hay 67 skills organizadas por categorías.

Tip: No necesitas memorizar todas las skills. ClaudeKit selecciona automáticamente la apropiada según tu tarea.

Categorías de Skills

🎨 Frontend

React, Next.js, Vue, UI/UX, Three.js, Tailwind

⚙️ Backend

Node.js, Python, Go, APIs, Databases

📱 Mobile

React Native, Flutter, Swift, Kotlin

🔄 DevOps

Docker, Kubernetes, Cloudflare, GCP

🧪 Testing

Vitest, Playwright, E2E, Unit tests

📚 Documentation

Mintlify, Docs management, MDX

🔧 Dev Tools

Git, MCP, Scout, Repomix

🤖 AI/ML

Claude API, Google AI, Gemini

Frontend Development

Core Frameworks

react-best-practices

Guías de optimización de rendimiento para React y Next.js de Vercel Engineering.

Cuándo usar: Escribiendo o revisando código React/Next.js

Contiene:

App Router optimization
Server Components patterns
Bundle optimization
Data fetching strategies
Image optimization Stack: React, Next.js 14+

frontend-development

Construir frontends React/TypeScript con patrones modernos.

Cuándo usar: Desarrollo de componentes React, TanStack Router

Contiene:

Componentes con Suspense
Lazy loading
TanStack Router
MUI v7 styling
Performance optimization

Stack: React, TypeScript, TanStack

web-frameworks

Construir con Next.js (App Router, RSC, SSR, ISR) y monorepos Turborepo.

Cuándo usar: React apps, server rendering, build optimization

Contiene:

Next.js App Router
React Server Components
SSR, ISR, SSG
Turborepo setup
Caching strategies

Stack: Next.js, Turborepo

tanstack

Construir con TanStack Start, Form y AI.

Cuándo usar: Full-stack React, form management, AI chat

Contiene:

TanStack Start (framework)
TanStack Form (forms)
TanStack Query (server state)
TanStack AI (streaming)

Stack: TanStack ecosystem

UI/UX Design

frontend-design

Crear interfaces frontend pulidas from designs/screenshots/videos.

Cuándo usar: Replicar UI designs, crear componentes visuales

Contiene:

Web components
3D experiences
UI replication
Quick prototypes
Avoiding “AI slop”

Stack: React, Vue, Svelte, HTML/CSS

ui-ux-pro-max

Inteligencia de diseño UI/UX con 50+ styles y palettes.

Cuándo usar: Diseño UI completo, landing pages, dashboards

Contiene:

50 design styles
21 color palettes
50 font pairings
9 tech stacks
Component library

Stack: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui

ui-styling

Estilizar UIs con componentes shadcn/ui (Radix UI + Tailwind CSS).

Cuándo usar: Componentes accesibles, theming, dark mode

Contiene:

shadcn/ui components
Theme customization
Dark mode
Responsive layouts
Design systems

Stack: Radix UI, Tailwind CSS, shadcn/ui

web-design-guidelines

Review UI code for Cumplimiento de Directrices de Interfaz Web.

Cuándo usar: “Review my UI”, “check accessibility”, “audit design”

Contiene:

WCAG compliance
Accessibility audit
Best practices check
UX review

threejs

Construir apps web 3D with Three.js (WebGL/WebGPU).

Cuándo usar: Escenas 3D, modelos, animaciones WebGL

Contiene:

556+ examples
60 API classes
20 use cases
GLTF loader
PBR materials
Physics engines
VR/XR

Stack: Three.js, WebGL, WebGPU

mermaidjs-v11

Create diagrams with Mermaid.js v11 syntax.

Cuándo usar: Flowcharts, sequence diagrams, architecture diagrams

Contiene:

Flowcharts
Sequence diagrams
Class diagrams
ER diagrams
Gantt charts
State diagrams

Mobile

mobile-development

Construir apps móviles con React Native, Flutter, Swift/SwiftUI, Kotlin/Jetpack Compose.

Cuándo usar: iOS/Android apps, mobile UX

Contiene:

React Native
Flutter
Swift/SwiftUI
Kotlin/Jetpack Compose
Performance optimization
App store deployment

Backend Development

Core Backend

senior-backend

Desarrollo backend completo con NodeJS, Express, Go, Python, Postgres, GraphQL, REST APIs.

Cuándo usar: Building scalable backend systems

Contiene:

API scaffolding
Database design
Authentication
REST/GraphQL
Security (OWASP)
Docker/K8s

Stack: Node.js, Express, Go, Python, PostgreSQL, GraphQL

backend-development

Construir backends con NestJS, FastAPI, Django.

Cuándo usar: REST/GraphQL/gRPC APIs, auth, databases

Contiene:

NestJS (Node)
FastAPI (Python)
Django (Python)
Authentication
Microservices
Security

Stack: NestJS, FastAPI, Django

Authentication

better-auth

Agregar autenticación con Better Auth (TypeScript).

Cuándo usar: Email/password, OAuth, 2FA, passkeys

Contiene:

Email/password
OAuth providers (Google, GitHub)
2FA/MFA
Passkeys/WebAuthn
Sessions
RBAC
Rate limiting

Stack: TypeScript, Better Auth

Databases

databases

Diseñar schemas, escribir queries para MongoDB y PostgreSQL.

Cuándo usar: Database design, SQL/NoSQL queries

Contiene:

Schema design
SQL queries
Aggregation pipelines
Indexes
Migrations
Replication
Performance optimization

Stack: PostgreSQL, MongoDB

using-neon

Guías y mejores prácticas for working with Neon Serverless Postgres.

Cuándo usar: Neon Postgres setup, local development

Contiene:

Getting started
Local development
Connection methods
Neon features
Auth configuration

Stack: Neon, PostgreSQL

neon-instagres

Aprovisionar instantáneamente bases de datos Postgres listas para producción con Neon Instagres.

Cuándo usar: Database setup, PostgreSQL deployment

Contiene:

Instant provisioning
Production-ready
Connection strings
Performance optimization

Stack: Neon Instagres, PostgreSQL

DevOps & Infrastructure

devops

Desplegar en Cloudflare (Workers, R2, D1), Docker, GCP (Cloud Run, GKE), Kubernetes.

Cuándo usar: Serverless, containers, CI/CD, GitOps

Contiene:

Cloudflare Workers
Docker
GCP (Cloud Run, GKE)
Kubernetes (kubectl, Helm)
CI/CD
GitOps
Security audit

Stack: Cloudflare, Docker, GCP, Kubernetes

mintlify

Construir y desplegar sitios de documentación con Mintlify.

Cuándo usar: API docs, developer portals, knowledge bases

Contiene:

docs.json configuration
MDX components
Navigation structure
Theming
OpenAPI/AsyncAPI
Deployment

Stack: Mintlify, MDX

mcp-builder

Construir servidores MCP for LLM-external service integration.

Cuándo usar: FastMCP (Python), MCP SDK (Node/TypeScript)

Contiene:

FastMCP (Python)
MCP SDK (Node/TypeScript)
Tool design
API integration
Resource providers

Stack: MCP, FastMCP, Node.js, Python

Testing

test

Run unit, integration, y E2E tests.

Cuándo usar: Test execution, coverage analysis

Contiene:

Unit tests
Integration tests
E2E tests
Coverage analysis
Build verification

web-testing

Testing web con Playwright, Vitest, k6.

Cuándo usar: E2E/unit/integration/load testing

Contiene:

Playwright (E2E)
Vitest (unit)
k6 (load)
Test automation
Flakiness
Core Web Vitals

Stack: Playwright, Vitest, k6

fix

SIEMPRE activar antes de corregir CUALQUIER bug, error, test failure.

Cuándo usar: Bugs, errors, test failures, CI/CD issues

Contiene:

Bug fixing workflow
Root cause analysis
Test failures
CI/CD issues
Type errors
Lint errors

Documentation & Project Management

docs

Analizar codebase and manage project documentation.

Cuándo usar: Init docs, update docs, summarize

Contiene:

Documentation initialization
Documentation updates
Codebase summaries
Project documentation

project-manager

Rastrear progreso, update plan statuses, manage Claude Tasks.

Cuándo usar: Project oversight, status checks, plan completion

Contiene:

Progress tracking
Plan status updates
Task management
Milestone tracking
Report generation

plans-kanban

Ver dashboard de planes con progress tracking y timeline.

Cuándo usar: Kanban boards, plan status, phase progress

Contiene:

Kanban boards
Plan status overview
Phase progress
Milestone tracking
Project visibility

Development Tools

git

Operaciones Git con conventional commits.

Cuándo usar: Staging, committing, pushing, PRs, merges

Contiene:

Conventional commits
Git workflow
Branch management
PR management
Merges

Stack: Git, GitHub

scout

Exploración rápida de codebase using parallel agents.

Cuándo usar: File discovery, task context, quick searches

Contiene:

File discovery
Task context gathering
Quick searches
Internal (Explore) agents
External (Gemini/OpenCode) agents

repomix

Empaquetar repositorios en archivos compatibles con IA (XML, Markdown, plain text).

Cuándo usar: Codebase snapshots, LLM context, security audits

Contiene:

XML format
Markdown format
Plain text format
Codebase snapshots
LLM context preparation
Security audits

Stack: Repomix

worktree

Crear git worktree aislado para parallel development.

Cuándo usar: Parallel development in monorepos

Contiene:

Git worktrees
Parallel development
Isolated environments
Monorepo workflow

Stack: Git

mcp-management

Gestionar servidores MCP - discover, analyze, execute tools/prompts/resources.

Cuándo usar: MCP integrations, tool selection

Contiene:

MCP server discovery
Tool analysis
Resource execution
Multi-server management
Context-efficient discovery

Stack: MCP

use-mcp

Utilizar herramientas de servidor MCP con intelligent discovery.

Cuándo usar: MCP tool execution

Contiene:

MCP tool discovery
Intelligent execution
Server integration

Stack: MCP

skill-creator

Crear o actualizar skills de Claude optimized for Skillmark benchmarks.

Cuándo usar: New skills, skill scripts, benchmark optimization

Contiene:

Skill creation
Skill scripts
References
Benchmark optimization
Extending Claude’s capabilities

team

Orquestar Equipos de Agentes para parallel multi-session collaboration.

Cuándo usar: Research, implementation, review, debug workflows

Contiene:

Agent teams
Parallel collaboration
Independent teammates
Multi-session workflows
Task coordination

kanban

Tablero de orquestación de agentes IA para task visualization.

Cuándo usar: Task visualization, team coordination

Contiene:

Kanban boards
Task visualization
Team coordination
Progress tracking

AI & Machine Learning

claude-api

Build apps con the Claude API or Anthropic SDK.

Cuándo usar: Code imports anthropic/@anthropic-ai/sdk

Contiene:

Claude API
Anthropic SDK
Agent SDK
Message APIs
Streaming

Stack: Anthropic Claude, Python, Node.js

google-adk-python

Build AI agents con Google ADK Python.

Cuándo usar: Multi-agent systems, A2A protocol, MCP tools

Contiene:

Multi-agent systems
A2A protocol
MCP tools
Workflow agents
State/memory
Vertex AI deployment

Stack: Google ADK, Python

ai-multimodal

Analizar imágenes/audio/video con Gemini API.

Cuándo usar: Vision analysis, transcription, OCR, design extraction

Contiene:

Image analysis (Gemini)
Video generation (Veo 3)
Image generation (Imagen 4)
Transcription
OCR
Design extraction

Stack: Google Gemini API

ai-artist

Generar imágenes vía Nano Banana con 129 curated prompts.

Cuándo usar: Image generation, creative projects

Contiene:

129+ curated prompts
Image generation
Creative modes (search, creative, wild)
Style validation

Stack: Nano Banana

Utilities

ask

Answer technical y architectural questions con expert consultation.

Cuándo usar: Technical questions, architecture decisions

Contiene:

Expert consultation
Technical answers
Architecture advice
Best practices

preview

Generar explicaciones visuales con ASCII + Mermaid.

Cuándo usar: Explaining unfamiliar code, architecture diagrams

Contiene:

ASCII diagrams
Mermaid diagrams
Code explanations
Architecture visualization
Slides
Visual explanations

watzup

Revisar cambios recientes y wrap up current work session.

Cuándo usar: Session wrap-up, progress review

Contiene:

Recent changes review
Session summary
Progress tracking
Wrap-up

code-review

Revisar calidad de código, receive feedback con technical rigor.

Cuándo usar: Before PRs, after implementation

Contiene:

Code quality
Technical feedback
Best practices
Security scanning
Performance issues

code-reviewer

Skill de code review completa para TypeScript, JavaScript, Python, Swift, Kotlin, Go.

Cuándo usar: Automated code analysis, best practices

Contiene:

Automated analysis
Best practices checking
Security scanning
Review workflow

Stack: TypeScript, JavaScript, Python, Swift, Kotlin, Go

simplify

Revisar código modificado for reuse, quality, efficiency.

Cuándo usar: After implementation, optimization

Contiene:

Code review
Reuse analysis
Quality checks
Efficiency improvements
Fix issues

debug

Depurar sistemáticamente con root cause analysis before fixes.

Cuándo usar: Bugs, test failures, unexpected behavior

Contiene:

Systematic debugging
Root cause analysis
Multi-layer validation
Problem decomposition

sequential-thinking

Aplicar análisis paso a paso para complex problems.

Cuándo usar: Complex problems, multi-step reasoning

Contiene:

Step-by-step analysis
Hypothesis verification
Adaptive planning
Problem decomposition

ultra-think

Deep analysis y problem solving con multi-dimensional thinking.

Cuándo usar: Complex analysis, problem solving

Contiene:

Multi-dimensional thinking
Deep analysis
Complex problem solving

brainstorm

Hacer lluvia de ideas sobre soluciones con trade-off analysis y brutal honesty.

Cuándo usar: Ideation, architecture decisions, feature exploration

Contiene:

Brainstorming
Trade-off analysis
Architecture decisions
Feature exploration
Feasibility assessment

cook

SIEMPRE activar antes de implementar CADA feature, plan, or fix.

Cuándo usar: Implementation workflow

Contiene:

Planning
Implementation
Testing
Code review
Documentation
Git commit

bootstrap

Inicializar nuevos proyectos con research, tech stack, design, planning.

Cuándo usar: New project setup

Contiene:

Research
Tech stack selection
Design planning
Implementation planning
Project initialization

Media Processing

media-processing

Procesar medios multimedia con FFmpeg (video/audio), ImageMagick (images), RMBG (AI background removal).

Cuándo usar: Encoding, format conversion, thumbnails, batch processing

Contiene:

FFmpeg (video/audio)
ImageMagick (images)
RMBG (background removal)
HLS/DASH
Batch processing

Stack: FFmpeg, ImageMagick, RMBG

chrome-devtools

Automatizar navegadores con Puppeteer CLI scripts.

Cuándo usar: Screenshots, performance analysis, web scraping

Contiene:

Puppeteer CLI
Screenshots
Performance analysis
Network monitoring
Web scraping
Form automation

Stack: Puppeteer, Chrome DevTools

Payment & Integrations

payment-integration

Integrar pagos con SePay (VietQR), Polar, Stripe, Paddle, Creem.io.

Cuándo usar: Checkout, webhooks, subscriptions, QR codes

Contiene:

SePay (VietQR)
Polar
Stripe
Paddle (MoR subscriptions)
Creem.io (licensing)
Checkout
Webhooks
Subscriptions

Stack: Stripe, Paddle, Polar, SePay, Creem.io

shopify

Construir apps de Shopify, extensions, themes con Shopify CLI.

Cuándo usar: Shopify apps, extensions, themes

Contiene:

GraphQL/REST APIs
Polaris UI
Liquid templates
Checkout customization
Webhooks
Billing integration

Stack: Shopify, Shopify CLI

Other Skills

agent-browser

CLI de automatización de navegadores optimizado para IA con context-efficient snapshots.

Cuándo usar: Long autonomous sessions, cloud browser testing

Contiene:

Browser automation
Context-efficient snapshots
Self-verifying workflows
Video recording
Cloud browser testing (Browserbase)

Stack: Browserbase

context-engineering

Verificar límites de uso de contexto, monitor tokens, optimize consumption.

Cuándo usar: Context percentage, rate limits, token optimization

Contiene:

Context usage monitoring
Token consumption optimization
Rate limits
Agent architectures
Memory systems

copywriting

Fórmulas de copywriting de conversión, headline templates, email copy patterns.

Cuándo usar: High-converting copy, headlines, emails, landing pages

Contiene:

Copywriting formulas
Headline templates
Email patterns
Landing page structures
CTA optimization
Writing style extraction

gkg

Análisis de código semántico con GitLab Knowledge Graph.

Cuándo usar: Go-to-definition, find-usages, impact analysis

Contiene:

Go-to-definition
Find-usages
Impact analysis
Architecture visualization

Stack: GitLab Knowledge Graph

Languages: Ruby, Java, Kotlin, Python, TypeScript/JavaScript

markdown-novel-viewer

Ver archivos markdown con calm, book-like reading experience.

Cuándo usar: Long-form content, documentation preview

Contiene:

Markdown viewing
Book-like reading
Distraction-free
HTTP server

remoting

Mejores prácticas para Remotion - Video creation in React.

Cuándo usar: Remotion video projects

Contiene:

Video creation
React-based video
Animations
Rendering

Stack: Remotion, React

shader

Escribir fragment shaders GLSL para procedural graphics.

Cuándo usar: Generative art, textures, visual effects, WebGL

Contiene:

SDF shapes
Patterns (Perlin, simplex, cellular)
fBm
Colors (HSB/RGB)
Matrices
Gradients
Animations

Stack: GLSL, WebGL, Three.js shaders

Cómo Usar Skills

Activación Automática

ClaudeKit selecciona automáticamente la skill apropiada según tu tarea:

# Frontend development
claude cook "Crear componente Button con React"

# Backend API
claude cook "Crear REST API con Express"

# Testing
claude test "authentication flow"

# Database
claude ask "Diseñar schema para e-commerce"

Activación Manual

Puedes especificar una skill explícitamente:

# Usar skill específica
claude cook "Diseñar UI" --skill:ui-ux-pro-max

# Múltiples skills
claude cook "Feature completa" --skills:frontend-development,backend-development,databases

Skills más Populares

Las 10 skills más utilizadas en producción:

cook - Implementación completa de features
fix - Solución de bugs
ask - Consultas técnicas
test - Ejecución de tests
code-review - Review de código
debug - Debugging sistemático
frontend-development - Desarrollo frontend
senior-backend - Desarrollo backend
databases - Base de datos
devops - Deployment y DevOps

Ver También

Comandos Reference - Todos los comandos disponibles
Agentes Reference - Agentes especializados
Guía de Workflows - Workflows completos

¿Preguntas? Usa claude ask "tu pregunta sobre skills" en cualquier momento.