菜单
Genera componentes UI HTML+Tailwind desde un design system; atoms responsive, compounds dual-file y guarda en .ux/components/<slug>/.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/chichex/cvm --skill ux-components命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Arma un loop ping-pong automatico entre el pane actual y un pane validador en herdr. Usar para rondas de validacion paralelas que avisan con accionables hasta verde o hasta un cap.
Audita la codebase buscando deepening opportunities y shallow modules, y emite un reporte HTML autocontenido. Usar cuando el usuario quiere oportunidades de refactor arquitectural, consolidar modulos acoplados o mejorar testeabilidad.
Activa un modo persistente de delegacion para preservar contexto. Usar cuando el usuario dice modo delegator, delega todo, preserva contexto, /delegator on u /delegator off.
基于 SOC 职业分类
正在显示 SKILL.md
| name | ux-components |
| description | Genera componentes UI HTML+Tailwind desde un design system; atoms responsive, compounds dual-file y guarda en .ux/components/<slug>/. |
Generar componentes UI en HTML+Tailwind que consumen un design system. Default: ~18 componentes esenciales (atoms (atomos) responsive single-file + compounds (compuestos) dual-file (archivo separado por viewport) cuando la interaccion difiere). Flags para limitar el alcance. Los argumentos del skill pueden traer flags y/o lista de componentes especifica.
Skill interactivo.
Detectar flags:
--desktop — generar solo version desktop (sin responsive classes).--mobile — generar solo version mobile (sin breakpoints).--only <list> — generar solo los componentes listados (comma-separated, ej. button,input,modal).--from <path> — usar tokens desde <path> (default: .ux/design-system/).--slug <name> — usar <name> como subdirectorio (default: default).Si no hay flags, default: responsive (mobile + desktop con breakpoints, dual-file donde aplica), todos los 18 esenciales, slug default.
Buscar .ux/design-system/tailwind.config.js y .ux/design-system/tokens/semantic.json.
Si no existen:
No encontre un design system en `.ux/design-system/`. Opciones:
1) Generarlo primero con `/ux-design-system` (recomendado)
2) Pasame el path con `--from <path>`
3) Generar componentes con paleta default (Tailwind base, no recomendado)
Si el usuario no paso --slug, preguntar:
Como llamamos al set de componentes? (kebab-case, max 40 chars — default: "default")
Guardar SLUG. El output va a .ux/components/<slug>/.
Atoms — responsive single-file (12):
button — primary, secondary, ghost, danger variantsinput — text, email, password, with-label, with-errortextareaselectcheckboxradio — radio groupswitchbadge — variants por statusavatar — image, initials, fallbackalert — info, success, warning, dangertooltip — top, bottom, left, righttoast — info, success, warning, dangerCompounds/Layout — single-file responsive (8):
13. card
14. tabs
15. accordion
16. empty-state
17. spinner / skeleton
18. breadcrumbs
Compounds/Layout — DUAL-FILE (interaccion difiere):
19. modal (desktop overlay) + sheet (mobile bottom sheet) — 2 archivos
20. nav (desktop top nav) + drawer (mobile hamburger) — 2 archivos
21. sidebar (desktop) + (mobile usa drawer) — 1 archivo (sidebar.html) + nota
22. table (desktop data grid) + card-list (mobile collapse) — 2 archivos
23. filters-bar (desktop inline) + filters-sheet (mobile bottom sheet) — 2 archivos
24. date-picker (desktop popover) + date-picker-fullscreen (mobile) — 2 archivos
Total: 18 atoms/compounds single-file + 6 compounds que generan 2 archivos = 24 archivos en default.
Si flags --desktop o --mobile, los dual-file se reducen a un solo archivo cada uno.
Si flag --only, generar solo los listados.
Mostrar al usuario el alcance final antes de generar:
Voy a generar:
- 12 atoms (single-file)
- 6 single-file compounds
- 6 dual-file compounds (12 archivos)
Total: <N> archivos en `.ux/components/<slug>/`
Procedo? (si/no/ajustar)
Path base: .ux/components/<slug>/
Por cada componente, generar archivo HTML self-contained:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><componente></title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = /* import desde ../../design-system/tailwind.config.js */
</script>
<style>
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
</style>
</head>
<body class="min-h-screen bg-bg-page p-8">
<!-- DOC -->
<header class="mb-8">
< =>
<1-liner descripcion>
Default
Variant —
States
Preview @ 375px (mobile)
bg-action-primary, text-text-primary). Nunca primitivos.<!-- target: desktop --> o <!-- target: mobile -->). Tokens compartidos.| Componente | Desktop | Mobile |
|---|---|---|
modal / sheet | Overlay centrado, max-w-md, fade-in | Bottom sheet, full-width, slide-up |
nav / drawer | Horizontal nav bar + dropdowns | Hamburger button → slide-in drawer izquierda |
table / card-list | <table> con columns, sort headers | <div> con cada row colapsada en card |
filters-bar / filters-sheet | Row horizontal con chips/selects | Button "Filtros" → bottom sheet con form |
date-picker / date-picker-fullscreen | Popover calendar 280x320 | Modal full-screen con scroll-pickers |
.ux/components/<slug>/README.md:
# Componentes UI
Generado con `/ux-components`. Consume tokens de `../../design-system/`.
## Atoms (single-file responsive)
- [button](button.html)
- [input](input.html)
- ...
## Compounds/Layout single-file
- [card](card.html)
- ...
## Dual-file (mobile + desktop)
- [modal](modal.html) (desktop) + [sheet](sheet.html) (mobile)
- [nav](nav.html) + [drawer](drawer.html)
- [table](table.html) + [card-list](card-list.html)
- [filters-bar](filters-bar.html) + [filters-sheet](filters-sheet.html)
- [date-picker](date-picker.html) + [date-picker-fullscreen](date-picker-fullscreen.html)
## Como usar
Abri cada `.html` en browser. Tailwind CDN + tokens del design system cargados.
Para usar en tu app: copiar el snippet HTML del componente, asegurarse de tener el `tailwind.config.js` del design system.
Preguntar: Confirmás que guardo el output en .ux/components/<slug>/? (si/no, default: si). Si acepta, si la carpeta .ux/components/<slug>/ no existe, crearla con mkdir -p .ux/components/<slug>/ antes de escribir. Luego crear cada .html y el README.md con el tool de edicion seguro disponible.
Reportar skill, directorio, design system de origen, target, cantidad de componentes, archivos generados, lista de componentes dual-file y si se guardo.
skill: /ux-components
saved: true
directory: .ux/components/<slug>/
design_system_from: <path>
target: <responsive | desktop | mobile>
components_count: <N>
files_generated: <N>
dual_file_components: <list>
.ux/components/<slug>/./ux-design-system primero).gh ni depender de GitHub.