Skill de Claude

El "skill" de Claude te ayuda a generar componentes Jx a partir de descripciones en lenguaje natural. Puedes usarlo en Claude Web o en Claude Code.

Instalación

Claude Web

Ve a la página de Skills de Claude, haz clic en "+" > "Create a skill" -> "Upload a skill" y arrastra el archivo zip descargado desde jx.scaletti.dev/skill.zip.

Claude Code

Para instalar el skill, descárgalo desde jx.scaletti.dev/skill.zip y descomprímelo dentro de tu carpeta .claude/skills. Si no tienes una carpeta skills, debes crearla primero.

Uso

Una vez instalado, puedes usar el skill invocándolo en una conversación con Claude. Por ejemplo, en Claude Code, puedes escribir:

✦ ❯ claude
╭─── Claude Code v5.6.789 ───────────────────────────╮
│                                                    │
│                       ▐▛███▜▌                      │
│                      ▝▜█████▛▘                     │
│                        ▘▘ ▝▝                       │
╰────────────────────────────────────────────────────╯

❯  Crea un componente Jx que muestre la tarjeta de perfil de\
   un usuario con su nombre, avatar y bio.

... ✨ Sucede la magia ✨ ...

Claude detecta el skill a partir de tu prompt y usa su conocimiento empaquetado de los idioms de Jx — importaciones explícitas, props tipadas, pasada de atributos con attrs, CSS/JS por componente — para escribir el archivo .jx por ti. No necesitas escribir un slash command ni un prefijo especial; basta con que describas lo que quieres.

Qué sabe el skill

El skill cubre dos áreas:

Autoría de componentes.: Botones, tarjetas, modales, dropdowns, formularios, tablas, layouts, navegación, acordeones, toasts y otros elementos básicos de UI. Sigue un enfoque de "HTML nativo primero".

Mecánica de la librería. Cómo configurar un Catalog, registrar carpetas con prefijos, integrar con Flask / Django / FastAPI / htmx, etc.

Ejemplos de prompts:

• "Hazme un componente de notificación toast con variantes success, error e info y auto-cierre después de 5 segundos."
• "Crea un layout de sidebar que se colapse en un drawer deslizante en móvil."
• "Muéstrame cómo compartir el jinja_env de Flask con un Catalog de Jx."
• "¿Por qué <Button {{ attrs.render() }} /> no funciona cuando paso los attrs a un componente hijo?"
• "¿Cómo ejecuto jx check en CI y hago que falle el build si hay errores?"

No necesitas mencionar "Jx" explícitamente en cada mensaje — una vez que el skill se carga, Claude lo mantiene activo durante los turnos siguientes de la misma conversación.

Actualizar el skill

Para incorporar nuevas versiones del skill, vuelve a descargar skill.zip desde jx.scaletti.dev/skill.zip y:

• Claude Web — ve a la página de Skills, elimina el skill jx existente y vuelve a subir el nuevo zip.
• Claude Code — reemplaza el contenido de la carpeta .claude/skills/jx/ con el nuevo.

El skill está versionado junto con la documentación, así que cada nuevo release de Jx incluye un skill actualizado que refleja la API actual.