Skills y MCP para Claude Code

Skills y MCP para Claude Code: cómo instalarlos y usarlos

PorWeb Marketing MX

Instalar las mejores skills y MCP para Claude Code convierte tu asistente en un verdadero equipo de diseño y desarrollo. En esta guía verás cómo instalar y usar cinco recursos clave —frontend-design, UI UX Pro Max, las skills de animación de Emil Kowalski, Framer Motion y el Magic MCP de 21st.dev— paso a paso. Todos los comandos están verificados y listos para copiar.

¿Qué son las skills y los MCP en Claude Code?

Antes de instalar nada, conviene distinguir los dos conceptos. Ambos amplían lo que Claude Code puede hacer, pero funcionan de forma distinta.

  • Skills: paquetes de instrucciones y datos que enseñan a Claude Code a ejecutar una tarea con criterio, como diseñar una interfaz o revisar animaciones.
  • MCP (Model Context Protocol): servidores que conectan Claude Code con herramientas y servicios externos, dándole capacidades en tiempo real como buscar componentes o controlar WordPress.

En resumen: las skills aportan conocimiento y los MCP aportan conexiones. Si ya trabajas con automatización, algo similar ocurre al conectar n8n a Claude Code con su MCP y sus skills.

1. frontend-design: diseño con intención

Es la skill oficial del repositorio de Anthropic para crear interfaces distintivas que no parezcan plantillas genéricas. Guía las decisiones estéticas: tipografía, color, motion y composición.

npx skills add https://github.com/anthropics/skills --skill frontend-design

Una vez instalada, se activa sola cuando pides un diseño frontend. Úsala para dar carácter a una landing, definir una dirección de arte o revisar por qué una interfaz se ve “de IA”.

2. UI UX Pro Max: inteligencia de diseño con base de datos

Esta skill incluye una base de datos local con más de 67 estilos, 161 paletas de color, 57 pares tipográficos y 99 guías de UX en más de 20 stacks. Cruza tu requerimiento contra reglas por industria y recomienda patrones concretos.

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Si prefieres no usar el marketplace de plugins, puedes instalarla directamente con el gestor de skills:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

Sus scripts de búsqueda necesitan Python 3.x instalado. Pídele que “diseñe el sistema” de tu proyecto y generará un archivo con la paleta, tipografía y estilo recomendados.

3. Skills de animación de Emil Kowalski

Emil Kowalski (ex-Vercel y Linear, creador de Sonner y Vaul) publicó una colección de cinco skills centradas en el pulido y las animaciones. Se instalan todas de una vez.

npx skills add https://github.com/emilkowalski/skills
  • emil-design-eng: filosofía de pulido de UI y decisiones de animación.
  • apple-design: principios de diseño y motion de Apple aplicados a la web.
  • animation-vocabulary: el nombre exacto de cada efecto de animación.
  • review-animations: revisión estricta de tus animaciones.
  • improve-animations: auditoría y plan de mejora priorizado.

Son ideales para llevar una interfaz de “funciona” a “se siente bien”. Combínalas con la librería del siguiente punto.

4. Framer Motion: animaciones fluidas en React

A diferencia de las anteriores, esto no es una skill sino una librería de npm. Es el estándar de facto para animar componentes en React con muy poco código.

npm i framer-motion

Después importas el componente motion y animas cualquier elemento con la prop animate:

import { motion } from "framer-motion";

<motion.div animate={{ opacity: 1, y: 0 }} />

5. Magic MCP de 21st.dev: componentes de UI con IA

El Magic MCP de 21st.dev es un servidor que conecta Claude Code con un catálogo enorme de componentes. Puede buscar componentes, generar UI con variantes, refinar código existente y traer logos de marca en SVG.

Primero obtén tu API key gratuita en 21st.dev/mcp. Luego registra el servidor en Claude Code pasando la clave como variable de entorno:

claude mcp add 21st-dev-magic --env API_KEY=tu_api_key -- npx -y @21st-dev/magic@latest

Verifica la conexión con claude mcp list; debe aparecer como “Connected”. Ten en cuenta los límites del plan gratuito: la búsqueda es libre, pero instalar componentes y generar UI consumen créditos mensuales.

Cómo combinar skills y MCP para Claude Code en un flujo real

La verdadera potencia aparece al encadenarlos. Un flujo de trabajo típico para una interfaz nueva sería así:

  1. Genera el sistema de diseño con UI UX Pro Max (paleta, tipografía, estilo).
  2. Da dirección estética y evita lo genérico con frontend-design.
  3. Construye los componentes con el Magic MCP de 21st.dev.
  4. Anima con Framer Motion y afina el detalle con las skills de Emil Kowalski.

Este enfoque modular funciona con muchas más utilidades. Por ejemplo, puedes instalar Graphify en Claude Code para mapear tu repositorio, o instalar Claude SEO con sus 25 sub-skills para auditar el sitio. Y si publicas en WordPress, el ciclo se cierra con Royal MCP y sus 67 herramientas.

Preguntas frecuentes

Resuelve tus dudas sobre la configuración de Claude Code, servidores MCP y herramientas de UI.

Una skill aporta conocimiento e instrucciones que ya viven dentro de Claude Code, mientras que un MCP es un servidor externo que le da capacidades nuevas conectándose a otras herramientas en tiempo real.

No para instalarlas: basta con copiar y pegar un comando. Algunas, como UI UX Pro Max, requieren tener Python 3.x instalado para que sus scripts de búsqueda funcionen.

El instalador muestra un análisis de seguridad por cada skill. Aun así, conviene revisar los scripts antes de usarlos, ya que se ejecutan con los permisos de tu agente.

Tiene un plan gratuito con búsquedas libres y una cuota mensual de créditos para instalar componentes y generar UI. El plan Pro elimina esos límites.

Framer Motion está diseñado para React. Para proyectos en Vue, Svelte o HTML puro conviene usar alternativas como GSAP o las animaciones nativas de CSS.

Publicaciones Similares