From endys-skills
Usar cuando el usuario pida generar, refactorizar o revisar diseño frontend (layouts, componentes, estilos, copy) en proyectos React/Vite + Tailwind 4 + tokens CSS. Aplica tanto a UI de producto (dashboards, formularios, tablas) como a páginas de marketing (landings, pricing). Activar especialmente si el usuario menciona: diseño, UI, UX, estilos, componentes visuales, landing pages, o cuando haya riesgo de caer en patrones "AI-like" o "template SaaS".
How this skill is triggered — by the user, by Claude, or both
Slash command
/endys-skills:ui-rulesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Documento operativo: define qué puede y qué no puede hacer la IA al generar interfaces, qué tokens debe usar y cómo verificar el resultado. Stack objetivo: React/Vite + Tailwind 4 + tokens CSS. Aplica a UI de producto (dashboards, formularios, tablas) y a páginas de marketing.
Documento operativo: define qué puede y qué no puede hacer la IA al generar interfaces, qué tokens debe usar y cómo verificar el resultado. Stack objetivo: React/Vite + Tailwind 4 + tokens CSS. Aplica a UI de producto (dashboards, formularios, tablas) y a páginas de marketing.
Esta sección es contractual: define el rol de la IA y el flujo de trabajo. Si algo de aquí se rompe, el resto de las reglas dejan de aplicar bien.
Button, Card, Section, Stack, Grid, Badge, Input, Table, StatCard, EmptyState, Skeleton (lista a mantener en components/README.md).Estas son las que rompen la sensación de "template AI" en primera mirada. Si una sola falla, el resultado se siente genérico aunque todo lo demás esté bien.
Prohibido:
linear-gradient o radial-gradient en botones, inputs, cards, headers o fondos de sección.background-clip: text con gradientes en headings.box-shadow con blur > 40px o spread positivo grande).Patrón válido:
background: var(--color-primary) sólido. Hover: misma base con oklch ajustando luminosidad ±0.04.var(--color-bg) o var(--color-surface) planos, según data-theme.--color-surface → --color-surface-elevated), no añadas gradiente.Excepciones permitidas:
Prohibido:
Patrón válido:
Ejemplo de prompt correcto:
"Construye una sección de features con layout bento 2+1: la card grande (col-span-2) muestra captura del módulo de visitas con un título corto encima; las dos cards pequeñas son pares título+párrafo sobre reporting y permisos. Usa
Cardvariantesurface-elevatedpara la grande,surfacepara las pequeñas."
Prohibido:
text-align: center en bloques de más de una línea.Patrón válido:
max-width controlado (típico: 65ch para prosa, var(--container-md) para layouts).Prohibido:
Fórmula de headline válida:
[verbo activo concreto] + [audiencia específica] + [resultado medible o diferenciador]
Regla práctica: si el headline funciona tal cual para otro producto de otra industria, está mal escrito.
Todo lo visual sale de tokens. Cero valores arbitrarios. Los tokens viven en theme.css (o @theme si es Tailwind 4) y se consumen vía variables CSS o utilidades del framework.
:root[data-theme="light"] {
--color-bg: oklch(0.99 0 0);
--color-surface: oklch(0.97 0 0);
--color-surface-elevated: oklch(1 0 0);
--color-text: oklch(0.2 0 0);
--color-text-muted: oklch(0.45 0 0);
--color-border: oklch(0.2 0 0 / 0.12);
--color-primary: oklch(0.55 0.18 250);
--color-primary-hover: oklch(0.51 0.18 250);
--color-primary-active: oklch(0.47 0.18 250);
--color-primary-soft: oklch(0.95 0.04 250);
--color-success: oklch(0.65 0.15 145);
--color-warning: oklch(0.75 0.15 75);
--color-danger: oklch(0.6 0.2 25);
}
Reglas:
l en oklch.Dark mode:
oklch(1 0 0 / 0.08)).--font-sans: "Satoshi", system-ui, sans-serif;
--font-display: "Boska", "Satoshi", serif;
--text-xs: 0.75rem; /* 12px — meta, labels */
--text-sm: 0.875rem; /* 14px — botones, nav */
--text-base: 1rem; /* 16px — body */
--text-lg: 1.125rem; /* 18px — lead paragraphs */
--text-xl: 1.5rem; /* 24px — h3 */
--text-2xl: 2rem; /* 32px — h2 */
--text-3xl: clamp(2.5rem, 5vw, 3.5rem); /* h1 / hero */
Reglas:
--font-display solo desde --text-xl (24px) hacia arriba.--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
Reglas:
--space-3, entre cards --space-6, entre secciones --space-16 a --space-24.--radius-sm: 0.25rem; /* 4px — badges, chips */
--radius-md: 0.5rem; /* 8px — inputs, buttons */
--radius-lg: 0.75rem; /* 12px — cards pequeñas */
--radius-xl: 1rem; /* 16px — cards grandes, modales */
--radius-2xl: 1.5rem; /* 24px — paneles, hero containers */
--radius-full: 9999px; /* pills, avatares circulares */
Reglas:
inner-radius = outer-radius - padding. Evita el efecto "burbuja dentro de burbuja".border-radius: 9999px indiscriminadamente.--shadow-1: 0 1px 2px oklch(0.2 0 0 / 0.06);
--shadow-2: 0 4px 12px oklch(0.2 0 0 / 0.08);
--shadow-3: 0 12px 32px oklch(0.2 0 0 / 0.12);
border: 1px solid oklch(1 0 0 / 0.08)).--shadow-1 → --shadow-2), no transform: scale(1.05)..section-dense { padding-block: var(--space-12); }
.section-default { padding-block: var(--space-20); }
.section-spacious { padding-block: var(--space-24); }
section-default consecutivas.--color-surface muy sutil en filas pares si la tabla supera ~12 filas.--color-surface-elevated, cursor: pointer solo si la fila es clicable.position: sticky; top: 0).--space-2 vertical), comfortable (--space-3, default), spacious (--space-4).Prohibido: bordes gruesos entre filas; color de fondo distinto por estado de fila (usar badge en columna de estado); centrar contenido textual.
var(--color-primary-soft) de fondo, label legible, X para cerrar. Máximo 4-5 visibles, el resto colapsa en "+ N filtros".Estructura obligatoria (en este orden):
--text-xs, muted--text-2xl o más, --font-display si > 24pxProhibido: valor pequeño y label grande (jerarquía invertida); íconos decorativos grandes al lado del valor; cards con fondo de color por categoría; más de 4 KPIs en una fila.
--text-sm. No labels flotantes.--text-xs muted. Error text en el mismo lugar con --color-danger.--space-6 entre grupos, --space-3 entre campos del mismo grupo.Loading:
Empty state:
<tbody>, ocupando una fila con colspan completo.Error:
aspect-ratio definido en CSS para evitar CLS.loading="lazy" en imágenes below-the-fold. Hero y above-the-fold sin lazy.cubic-bezier(0.2, 0, 0, 1) para entradas, cubic-bezier(0.4, 0, 1, 1) para salidas. Nunca linear ni ease.prefers-reduced-motion.Todos los elementos clicables tienen 4 estados visualmente distintos:
defaulthover (cambio sutil de color o sombra)active (presionado, color más oscuro)focus-visible (anillo de 2px con --color-primary y outline-offset: 2px)Prohibido: quitar el outline sin reemplazo. outline: none solo si hay :focus-visible con anillo equivalente.
alt en todas las imágenes; vacío (alt="") si es decorativa.aria-label en botones de solo ícono.aria-live para toasts y errores.font-display: swap + preload de la principal.width y height declarados o aspect-ratio CSS para evitar CLS.React.lazy.@tanstack/react-virtual o similar).Al terminar cualquier UI generada, la IA corre este checklist y reporta resultado. Cualquier "sí" en una pregunta de prohibición es falla.
linear-gradient o radial-gradient fuera de data viz o skeleton?border-left de color de acento como decoración de card?prefers-reduced-motion?aspect-ratio o dimensiones declaradas?npx claudepluginhub nicoendys/skills --plugin endys-skillsCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.