Hakushiide/Claude-Skills

Esta habilidad guía la creación de interfaces frontend distintivas y de calidad de producción. Implementa código funcional real con una atención excepcional al detalle estético.

Ejemplos de prompts

• "Construye la sección hero a partir del resumen"
• "Crea un componente de tarjeta en estilo escandinavo"
• "Quiero que esto se sienta como una revista japonesa. Construye el diseño."
• "Construye la página de configuración. Usa el estilo que mejor se adapte."

Antes de escribir cualquier código

1. Explora el código base existente primero. Escanea específicamente:

   • Directorios de componentes: components/, ui/, shared/ y lista cada componente por su nombre y su API/props
   • Variables CSS / tokens: archivos llamados tokens.css, variables.css, theme.css, o declaraciones :root con propiedades personalizadas
   • Configuración de Tailwind: tailwind.config.js o tailwind.config.ts, comprueba theme.extend para valores personalizados
   • Temas de frameworks UI: Material UI createTheme, Chakra extendTheme, shadcn globals.css y components.json
   • Storybook: directorio .storybook/ o archivos *.stories.* que indican componentes documentados
   • Carga de fuentes: enlaces de Google Fonts, declaraciones @font-face, imports de fuentes
   • Patrones de diseño: cómo las páginas existentes manejan la cuadrícula, contenedores, puntos de ruptura y espaciado
   • Dependencias UI en Package.json: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
   • Si existen componentes que coinciden o coinciden parcialmente con lo que necesitas construir, extiéndelos o compónlos. No crees duplicados.

2. Comprende el contexto:

   • ¿Qué problema resuelve esta interfaz? ¿Quién la usa?
   • ¿Cuál es el tono emocional previsto?
   • ¿Cuáles son las restricciones duras (framework, dispositivos, rendimiento, accesibilidad)?

3. Comprométete con una dirección estética. O el usuario nombra una (ver filosofías abajo) o eliges una que se ajuste al contexto. Indica tu elección y por qué antes de escribir código.

Filosofías Estéticas

Cuando el usuario nombra una filosofía o describe una sensación, úsalas como guías de implementación concretas. Cada filosofía define tipografía, color, diseño, espaciado, movimiento y tratamiento de detalles.

Dieter Rams (Funcionalista)

Menos pero mejor. Cada elemento se gana su lugar. Nada decorativo sin función.

• Tipografía: Sans-serif limpia (Helvetica Neue, Suisse Intl, Akkurat). Espaciado ajustado en títulos. Altura de línea generosa en cuerpo. Una escala de tamaño, usada estrictamente.
• Color: Sobrio. Monocromático con un único acento funcional. Fondos blancos o gris claro. El color es información, no decoración.
• Diseño: Cuadrícula estricta. Jerarquía funcional clara. Componentes alineados a un sistema espacial. Sin asimetría por sí misma.
• Espaciado: Escala matemática y consistente (base 4px/8px). Relleno generoso. Espacio para respirar entre elementos.
• Movimiento: Mínimo. Solo transiciones con propósito (cambios de estado, revelaciones). Sin animación decorativa.
• Detalles: Bordes y divisores sutiles en lugar de sombras. Alineación precisa. Esquinas redondeadas usadas con moderación y consistencia.

Suizo / Tipográfico Internacional

Objetividad a través de la estructura. La cuadrícula es sagrada. El contenido es el rey.

• Tipografía: Sans-serif fuertes (Neue Haas Grotesk, Univers, Aktiv Grotesk). Contraste de escala dramático entre títulos y cuerpo. Subtítulos en mayúsculas con espaciado generoso.
• Color: Alto contraste. Negro, blanco y un color primario. Bloques de color audaces como elementos compositivos.
• Diseño: Cuadrícula rígida de varias columnas. Equilibrio asimétrico. Texto e imagen en diálogo. La alineación entre elementos es innegociable.
• Espaciado: Definido por el módulo de cuadrícula. Los canalones son parte del diseño, no un pensamiento posterior.
• Movimiento: Transiciones de página y revelaciones activadas por desplazamiento que respetan la cuadrícula. Sin rebotes lúdicos.
• Detalles: Líneas (horizontales) como elementos estructurales. Sin degradados. Sin sombras. La planitud es el punto.

Minimalismo Japonés (Ma)

El espacio negativo es contenido. La moderación comunica sofisticación. Silencioso sobre ruidoso.

• Tipografía: Sans-serif de peso fino o serifas elegantes (Noto Sans, Cormorant). Altura de línea generosa (1.8-2.0). Tamaño de cuerpo pequeño con amplios márgenes de espacio en blanco.
• Color: Naturales apagados (grises cálidos, piedra, salvia, washi). Cambios tonales sutiles en lugar de contrastes duros. Casi monocromático.
• Diseño: Asimétrico pero equilibrado. Contenido descentrado. Grandes áreas vacías son intencionales. El contenido flota en el espacio.
• Espaciado: Espacio en blanco extremo. Relleno y márgenes 2-3 veces lo que se siente "normal". Los elementos respiran.
• Movimiento: Desvanecimientos lentos y suaves (400-600ms). Sin rebote, sin sobrepaso. Transiciones de opacidad sobre cambios de posición.
• Detalles: Bordes finos. Textura sutil (grano de papel, lino). Sin sombras marcadas. Efectos suaves y difusos.

Brutalista / Crudo

La estructura es visible. Sin pulir. La antiestética es la estética.

• Tipografía: Fuentes del sistema, monoespaciadas (JetBrains Mono, IBM Plex Mono, Courier), o caras display agresivas. Tamaños mixtos. Texto como textura.
• Color: Negro y blanco primarios. Si hay color, es crudo y chocante (amarillo construcción, naranja peligro, verde terminal). Sin degradados.
• Diseño: Bordes visibles. Modelo de caja expuesto. Bloques apilados. Aspereza deliberada. Contenido primero, la belleza nunca.
• Espaciado: Ajustado o intencionalmente desigual. Relleno que se siente comprimido.
• Movimiento: Ninguno, o discordante (cambios de estado instantáneos, cortes duros). Sin easing.
• Detalles: Contornos visibles. Los elementos de formulario predeterminados del navegador pueden ser intencionales. Interfaces solo de texto. Sin íconos a menos que sean funcionales.

Escandinavo

Cálidez más moderación. Belleza funcional. Accesible por defecto.

• Tipografía: Sans-serif redondeadas y amigables (Nunito, Poppins, Circular, Cera Pro). Pesos medios. Tamaños de lectura cómodos.
• Color: Paleta natural. Blancos cálidos, azules suaves, verdes apagados, arcilla. Acentos pastel. Sin negro puro (usar carbón).
• Diseño: Limpio y abierto. Basado en tarjetas. Esquinas redondeadas (8-12px). Diseños cómodos y generosos.
• Espaciado: Generoso pero no extremo. Todo se siente accesible y sin desorden.
• Movimiento: Easing suave y natural. Efectos de elevación sutiles al pasar el ratón. Contenido que se asienta en su lugar.
• Detalles: Sombras suaves (desenfoque grande, opacidad baja). Elementos redondeados. Subtonos cálidos en grises. Amigable con ilustraciones.

Art Decó / Geométrico

Simetría audaz. Precisión decorativa. Declaración y lujo.

• Tipografía: Caras display geométricas (Futura, Poiret One, Josefin Sans). Titulares en mayúsculas con espaciado extremo. Texto del cuerpo en serifa para contraste.
• Color: Rico y profundo. Oro/champán, esmeralda, azul marino, burdeos, negro. Acentos metálicos (degradados dorados, efectos de brillo).
• Diseño: Simétrico y centrado. Eje vertical fuerte. Marcos y bordes decorativos. Profundidad en capas.
• Espaciado: Estructurado y formal. El relleno es arquitectónico.
• Movimiento: Revelaciones elegantes. Animaciones de entrada escalonadas. Profundidad de paralaje.
• Detalles: Patrones geométricos (chevrones, destellos de sol, formas de abanico). Bordes ornamentales. Textura (mármol, metal cepillado). Tipografía de declaración a escala hero.

Neo-Memphis

Caos lúdico. Anticorporativo. Formas como personajes.

• Tipografía: Mezcla de pesos y estilos. Las fuentes en conflicto son intencionales. Titulares sobredimensionados. Texto en ángulos.
• Color: Primarios audaces y neones. Combinaciones chocantes (rosa y amarillo, azul y naranja). Sin tonos apagados. Color plano, sin degradados.
• Diseño: Cuadrícula rota. Elementos superpuestos. Formas (círculos, triángulos, garabatos) como elementos compositivos. Asimétrico a propósito.
• Espaciado: Denso en algunas áreas, vacío en otras. El ritmo es irregular.
• Movimiento: Saltarín, lúdico. Efectos de desplazamiento exagerados. Elementos que se menean, giran o explotan.
• Detalles: Bordes gruesos. Formas geométricas como decoración. Patrones (puntos, guiones, zigzags). Sombras paralelas con bordes duros y colores brillantes.

Editorial / Revista

Diseño liderado por contenido. La tipografía hace el trabajo pesado. Cada página es un pliego.

• Tipografía: Serifa display para titulares (Playfair Display, Fraunces, Instrument Serif). Sans-serif limpia para cuerpo (DM Sans, Source Sans). Escala dramática (titulares hero de 72-120px). Citas destacadas. Capitulares.
• Color: Mínimo. Blanco y negro con un acento. Color usado editorialmente (para resaltar, no decorar).
• Diseño: Cuadrícula de columnas fuerte (3-5 columnas). Imágenes a sangre completa. Texto envolvente. Anchuras de columna mixtas. Ritmo vertical.
• Espaciado: Márgenes generosos. Interlineado ajustado en titulares, abierto en cuerpo. Espacio en blanco como herramienta compositiva.
• Movimiento: Revelaciones activadas por desplazamiento. Paralaje en imágenes. Transiciones de página suaves.
• Detalles: Líneas finas como divisores. Tipografía de pies de foto. Metadatos de número/fecha. Detalles inspirados en impresión (números de folio, encabezados continuos).

Directrices de Implementación

• Tipografía: Elige fuentes distintivas cargadas a través de Google Fonts o CDN. Evita los valores predeterminados genéricos (Inter, Roboto, Arial, fuentes del sistema). Combina una fuente display con una fuente para el cuerpo.
• Color: Usa variables CSS para consistencia. Un color dominante con acentos marcados supera a las paletas seguras y distribuidas uniformemente.
• Movimiento: Transiciones CSS para HTML. Framer Motion / Motion library para React. Concéntrate en momentos de alto impacto (revelaciones de carga de página, cambios de estado) sobre microinteracciones dispersas.
• Composición espacial: Los diseños inesperados ganan atención. Asimetría, superposición, flujo diagonal, elementos que rompen la cuadrícula. O, si la filosofía lo exige, cuadrículas estrictas ejecutadas con precisión.
• Fondos y profundidad: Crea atmósfera. Mallas de degradado, texturas de ruido, patrones geométricos, transparencias en capas, superposiciones de grano. Coincide con la filosofía elegida.

NUNCA produzcas estéticas genéricas de IA: degradados morados sobre blanco, fuente Inter, cuadrículas de tarjetas predecibles, diseños de componentes de manual. Cada salida debe sentirse diseñada para su contexto específico.

Haz coincidir la complejidad de la implementación con la visión estética. Una interfaz Dieter Rams son 50 líneas de CSS preciso. Una interfaz Neo-Memphis son 300 líneas de caos creativo. Ambos son correctos.

Mobile-First

Construye el diseño móvil primero, luego escala hacia arriba. Esto no es negociable.

• Comienza con un diseño de una sola columna a 375px de ancho.
• Añade complejidad en cada punto de ruptura (consultas de medios min-width, no max-width).
• Los objetivos táctiles deben tener al menos 44x44px en móvil.
• El texto del cuerpo debe tener al menos 16px en móvil (evita el zoom de iOS al enfocar un input).
• La navegación debe tener un patrón específico para móvil (hamburguesa, pestañas inferiores o cajón). No confíes en barras de navegación horizontales que se desbordan.
• Comprueba que las longitudes de línea se mantengan cómodas (45-75 caracteres) en cada punto de ruptura.

Modo Oscuro

Si existe un archivo de tokens de diseño (de /design-tokens), usa su paleta de modo oscuro. Si no, genera soporte para modo oscuro junto con el tema claro.

• Usa propiedades personalizadas CSS para que cambiar de tema signifique cambiar los valores de las variables, no reescribir los componentes.
• Soporta tanto la consulta de medios prefers-color-scheme (preferencia del sistema) como un atributo [data-theme="dark"] (alternancia manual).
• No inviertas simplemente los colores. Los fondos oscuros deben ser cálidos o fríos para que coincidan con la filosofía (carbón cálido para escandinavo, pizarra fría para suizo, casi negro para brutalista).
• Reduce el texto blanco puro a blanco roto (por ejemplo, #E5E5E5 o rgba(255,255,255,0.87)) para reducir la fatiga visual.
• Las sombras en modo oscuro deben ser más oscuras y más transparentes, no los mismos valores que en modo claro.
• Los colores de acento pueden necesitar ajustes de luminosidad para mantener las relaciones de contraste WCAG contra fondos oscuros.
• Incluye una consulta de medios prefers-reduced-motion para los usuarios que la necesiten. Desactiva o simplifica todas las animaciones y transiciones dentro de esa consulta.