Skill de Claude para generar componentes Jx a partir de descripciones en lenguaje natural
Scanned 9/28/2026
Install to Claude Code
Skills Directorynpx -y skills add jpsca/jx --skill tools --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Tools?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/jpsca-tools)More formats (shields.io, HTML) on the badges page.
---
title: Skill de Claude
description: Skill de Claude para generar componentes Jx a partir de descripciones en lenguaje natural
---
El ["skill" de Claude](https://jx.scaletti.dev/skill.zip) te ayuda a generar componentes Jx a partir de descripciones en lenguaje natural. Puedes usarlo en [Claude Web](https://claude.ai){target="_blank"} o en [Claude Code](https://claude.ai/code){target="_blank"}.
## Instalación
### Claude Web
Ve a la [página de Skills de Claude](https://claude.ai/customize/skills){target="_blank"}, haz clic en "+" > "Create a skill" -> "Upload a skill" y arrastra el archivo zip descargado desde [jx.scaletti.dev/skill.zip](https://jx.scaletti.dev/skill.zip).
### Claude Code
Para instalar el skill, descárgalo desde [jx.scaletti.dev/skill.zip](https://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:
```bash
✦ ❯ 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](https://jx.scaletti.dev/skill.zip) y:
- **Claude Web** — ve a la [página de Skills](https://claude.ai/customize/skills){target="_blank"}, 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.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
