Categorías

Últimos recursos

Ver todos

Skills

Instrucciones reales que tu asistente de IA carga solo cuando la tarea lo pide, para Claude, ChatGPT y Grok. Una nueva cada semana.

Herramientas con las que trabajoNotionSupabasen8nClaudeChatGPTGrokGoogle SheetsPythonC#Next.jsTailwind CSSGitHubPlaywrightDockerCloudflare

Qué es una skill

Es una carpeta con un archivo de instrucciones (SKILL.md) que tu asistente lee únicamente cuando la tarea lo necesita. Así no repites el mismo pedido largo cada vez, y el resultado sale más constante. Es un formato abierto: la misma idea funciona en los tres asistentes.

  • Claude. En Personalizar → Skills, y también en Claude Code.
  • ChatGPT. En la app de escritorio escribe @ y elige la skill; en Codex, $nombre.
  • Grok. En Grok Build, desde la carpeta .grok/skills, y se llama con /nombre.

Una skill puede incluir programas. Instala solo las que vengan de fuentes que conozcas y revísalas antes de usarlas.

Skills disponibles

Claude
DiseñoIntermedio

Diseño de interfaces web

frontend-design

Guía a Claude para diseñar páginas y paneles con identidad propia en vez de plantillas genéricas: paleta, tipografía, composición, movimiento y un mínimo de accesibilidad.

Para qué sirve: Que tu página o tu panel se vea pensado para tu negocio y no como cualquier otro.

Cómo usarla

  1. En Claude abre Personalizar → Skills y busca frontend-design. En Claude Code se instala desde el repositorio oficial de Anthropic.
  2. Pídelo así: «Diseña la página de [tu negocio] para [tu público]. Antes de programar, propón paleta y tipografías.»
  3. Revisa el resultado en el celular y en el computador antes de aceptarlo.

Funciona con

  • Claude

Lo revisas tú antes de aplicarlo · Creada por Anthropic

ChatGPT
DiseñoIntermedio

Del diseño de Figma al código

figma-implement-design

Convierte un diseño de Figma en código con fidelidad visual, reutilizando los componentes, colores y medidas que ya tiene tu proyecto.

Para qué sirve: Pasar de un diseño a una pantalla real sin rehacerla a ojo.

Cómo usarla

  1. Conecta Figma (servidor MCP) y ten a mano el enlace del diseño o selecciona el nodo en la app de Figma.
  2. En Codex instálala con $skill-installer figma-implement-design y llámala con $figma-implement-design. En la app de escritorio de ChatGPT escribe @ y elígela.
  3. Compara el resultado con la captura del diseño: tipografía, colores, estados y móvil.

Funciona con

  • ChatGPT
  • Figma

Lo revisas tú antes de aplicarlo · Creada por OpenAI

Grok
DiseñoIntermedio

Pantallas útiles, accesibles y con todos sus estados

frontend-ux-engineer

Skill de la comunidad para Grok Build: construye pantallas pensando en el flujo real del usuario, con estados de carga, vacío, error y éxito, y revisa móvil y escritorio.

Para qué sirve: Que tus formularios y paneles no se rompan con datos reales ni en el celular.

Cómo usarla

  1. Grok Build lee las skills de la carpeta .grok/skills. Copia allí la carpeta frontend-ux-engineer del repositorio awesome-grok-build (licencia MIT).
  2. Llámala con /frontend-ux-engineer y cuéntale la tarea: «Crea la pantalla de solicitudes con estados de carga y error.»
  3. Pide que corra las pruebas y revisa tú la pantalla en móvil.

Funciona con

  • Grok

Lo revisas tú antes de aplicarlo · Creada por Comunidad

Claude
ProgramaciónIntermedio

Probar tu web con un navegador automático

webapp-testing

Enseña a Claude a abrir tu web local con Playwright, hacer clic, llenar formularios, sacar capturas y leer los errores de la consola.

Para qué sirve: Encontrar antes de publicar los fallos que verías tú al usar la página.

Cómo usarla

  1. Instálala en Claude Code desde el repositorio oficial de Anthropic (paquete de ejemplos) o actívala en Claude si tu plan la incluye.
  2. Pídelo así: «Usa webapp-testing para probar el formulario de contacto de mi web en http://localhost:3000 y dime qué falla.»
  3. La skill espera a que la página termine de cargar antes de revisarla. Pide que te muestre las capturas.

Funciona con

  • Claude
  • Playwright

Lo revisas tú antes de aplicarlo · Creada por Anthropic

ChatGPT
ProgramaciónIntermedio

Revisión de seguridad de tu código

security-best-practices

Revisa código en Python, JavaScript/TypeScript o Go con buenas prácticas de seguridad y entrega un informe con hallazgos por gravedad y número de línea.

Para qué sirve: Detectar riesgos, como datos mal protegidos, antes de que lleguen a producción.

Cómo usarla

  1. Instálala con $skill-installer security-best-practices (en Codex) o actívala desde la app si está disponible.
  2. Solo actúa cuando la pides: «Haz una revisión de seguridad de esta carpeta y genera el informe.»
  3. Te entrega un archivo de informe y propone las correcciones una por una; tú decides cuáles aplicar.

Funciona con

  • ChatGPT
  • Python

Lo revisas tú antes de aplicarlo · Creada por OpenAI

Grok
ProgramaciónIntermedio

Revisión de código antes de publicar

agentic-code-review

Revisa un cambio (diff o pull request) por orden de riesgo: errores, seguridad, pérdida de datos, pruebas y rendimiento. Entrega hallazgos con archivo, línea y gravedad de P0 a P3.

Para qué sirve: Tener una segunda mirada antes de publicar cambios hechos por ti o por una IA.

Cómo usarla

  1. Copia la carpeta agentic-code-review del repositorio awesome-grok-build (licencia MIT) a .grok/skills.
  2. Llámala con /agentic-code-review: «Revisa mis cambios sin aplicar nada.»
  3. Es una revisión de solo lectura: no corrige nada sin tu aprobación. Empieza por lo que marque P0 y P1.

Funciona con

  • Grok
  • GitHub

Lo revisas tú antes de aplicarlo · Creada por Comunidad