spadeontop/Skills

Generador de Contexto de Diseño y Motor OpenCode Data

Un skill de sistema de última generación para arquitecturar, probar visualmente y generar de forma interactiva sistemas de diseño frontend eficientes en tokens (DESIGN_CONTEXT.md) junto con una previsualización HTML en vivo sin dependencias (design-preview.html).

Incorpora directamente el sistema de diseño de telemetría técnica monospace de OpenCode Data (opencode.ai/data) extraído mediante análisis MCP de las herramientas de desarrollo del navegador, con tipografía IBM Plex Mono, lienzo de carbón obsidiana (#161616), bordes de precisión de 0.5px, indicadores de estado en vivo, tarjetas de clasificación y tablas de datos de alta densidad.

Aplica estrictamente:

1. La regla de color 60-30-10 + estados funcionales de retroalimentación.
2. Accesibilidad matemática WCAG 2.1 AA/AAA (mínimo 4.5:1 para texto de cuerpo, 3.0:1 para bordes/controles, 7.0:1 para texto mejorado).
3. Arquitectura con Tailwind CSS v4 CDN del navegador (@tailwindcss/browser@4) con @theme y @custom-variant dark.
4. Recetas de utilerías semánticas eficientes en tokens (clases compactas sin hinchazón de CSS personalizado).
5. Sin emojis (iconografía SVG nítida con trazo de 1.5px/2px o etiquetas de texto limpias).

---

Cuándo Usarlo

• Al inicializar, actualizar o generar un DESIGN_CONTEXT.md para cualquier aplicación web o dashboard.
• Al crear dashboards de telemetría, tableros de clasificación de IA, herramientas para desarrolladores o plataformas densas en datos inspiradas en OpenCode Data (opencode.ai/data).
• Al establecer tokens de diseño, guías de UI o estándares de estilo para Tailwind CSS v3 o v4 (CDN o Vite/CLI).
• Al proporcionar a agentes de codificación de IA aguas abajo planos de componentes concisos e inequívocos para evitar la deriva arbitraria de códigos hexadecimales.

---

Directivas y Restricciones Principales

1. SIN VOLCADOS DE UNA SOLA VEZ: Nunca generes un DESIGN_CONTEXT.md final en el primer turno. Sigue el flujo de trabajo interactivo de 5 fases para recopilar preferencias, armonizar tokens, verificar matemáticamente el contraste, generar una previsualización visual en vivo y confirmar con el usuario.
2. RECETAS SEMÁNTICAS EFICIENTES EN TOKENS: Los planos deben escribirse con clases de utilería semánticas compactas de Tailwind (ej. px-4 py-2 rounded-input bg-primary text-primary-foreground) en lugar de bloques CSS personalizados o valores hexadecimales únicos (bg-[#1a2b3c]).
3. SIN EMOJIS: Nunca uses emojis en contextos de diseño generados, archivos de código o comunicaciones con el usuario. Utiliza especificaciones de iconos SVG limpios o etiquetas de texto concisas.
4. CUMPLIMIENTO WCAG 2.1 AA/AAA: Todas las combinaciones de color deben pasar las pruebas matemáticas de contraste:
   • Texto de cuerpo sobre lienzo/superficies: ≥ 4.5:1 (el estándar AAA apunta a ≥ 7.0:1).
   • Iconos esenciales, bordes y controles de entrada: ≥ 3.0:1.
   • Texto del botón CTA principal: ≥ 4.5:1.
5. ARQUITECTURA TAILWIND CSS V4 CDN:
   • Para HTML/JS independiente sin compilación, usa <script src="https://unpkg.com/@tailwindcss/browser@4"></script>.
   • Configura mediante <style type="text/tailwindcss"> usando @theme y @custom-variant dark (&:where(.dark, .dark *));.
   • El modo oscuro dinámico se controla mediante la clase .dark en <html> con intercambio de variables CSS entre :root y .dark.

---

Referencias Modulares y Plantillas

Este skill contiene referencias modulares detalladas y plantillas de producción:

• opencode-data-spec.md: Especificación completa del sistema de diseño OpenCode Data (IBM Plex Mono, lienzo obsidiana, bordes finos, ticker de telemetría, tarjetas de clasificación, tablas de datos, sparklines).
• archetypes.md: Preajustes seleccionados:
  1. OpenCode Data (Motor técnico monospace de opencode.ai/data)
  2. Linear / SaaS Dark (Negro obsidiana, violeta/cian eléctrico, bordes translúcidos)
  3. Ultra-Minimalista (Monocromo austero, espacio en blanco arquitectónico, cero degradados)
  4. Empresarial Moderno Limpio (Plus Jakarta Sans, azules empresariales, cuadrículas de tarjetas nítidas)
  5. Terminal Fintech (Números tabulares, escaleras de libro de órdenes, acentos de ganancias/pérdidas)
  6. Minimalista Editorial (Tipografía de exhibición, tonos de papel cálidos, elegancia literaria)
• semantic-tokens.md: Contrato universal de tokens 60-30-10, tokens funcionales y mapeo de variables CSS.
• typography-scales.md: Combinaciones tipográficas, escalas tipográficas de Tailwind y reglas para datos tabulares.
• wcag-contrast-rules.md: Fórmulas matemáticas de luminancia relativa y matriz de contraste verificada.
• preview.template.html: Previsualización HTML interactiva en vivo con Tailwind v4 CDN sin dependencias, con selector de arquetipo y alternancia de tema.
• DESIGN_CONTEXT.template.md: Plantilla de plano en markdown completa para agentes aguas abajo.
• tailwind.config.template.js: Configuración exportable para Tailwind v4 CDN, compilación CSS v4 y v3.
• validate-contrast.js: Script para Node/navegador que calcula las relaciones de contraste.

---

Flujo de Trabajo (5 Fases)

Fase 1: Toma de Requisitos y Descubrimiento

1. Verifica si el usuario ha especificado:
   • Arquetipo objetivo (Por defecto: OpenCode Data o Linear / SaaS Dark).
   • Color de marca/acento deseado (u ofrece acentos semilla seleccionados: OpenCode Indigo #8190ff, Cobalto #3b5cf6, Violeta Eléctrico #8b5cf6, Esmeralda #10b981).
   • Preferencia de tema objetivo (Modo dual por defecto, oscuro primero o claro primero).
   • Stack objetivo (Por defecto: Tailwind CSS v4 CDN del navegador para HTML/JS sin compilación, o Vite/CLI).
2. Si no se especifica, usa ask_question para aclarar las preferencias de forma interactiva.

Fase 2: Armonización Semántica y Mapeo OpenCode Data

1. Mapea los colores seleccionados a la estricta distribución 60-30-10 + estados funcionales:
   • 60% Dominante: bg-background, bg-surface, text-foreground.
   • 30% Secundario: bg-surface-elevated, bg-muted, text-muted-foreground, border-border, border-border-subtle.
   • 10% Acento: bg-primary, text-primary-foreground, hover:bg-primary-hover, ring-ring.
   • Funcional: bg-success, bg-warning, bg-destructive, bg-info y sus respectivos colores de primer plano.
2. Determina el stack tipográfico apropiado:
   • Si es OpenCode Data: Aplica IBM Plex Mono de forma global.
   • Si es Linear / SaaS Dark: Aplica Inter o Geist Sans con JetBrains Mono para métricas tabulares.

Fase 3: Validación Matemática de Contraste WCAG

1. Calcula las relaciones de contraste para cada par de primer plano/fondo usando la fórmula de luminancia relativa de wcag-contrast-rules.md.
2. Asegura:
   • El texto de cuerpo en modo oscuro sobre #161616 logra > 15:1 (AAA).
   • El texto secundario logra > 4.5:1 (AA).
   • Si el acento es oscuro, el texto en primer plano debe ser #ffffff.
   • Si el acento es neón brillante, el texto en primer plano debe ser #09090b o #161616.
3. Presenta al usuario la tabla de paleta propuesta con códigos hexadecimales exactos y relaciones de contraste.

Fase 4: Previsualización Visual en Vivo Independiente (design-preview.html)

1. Genera design-preview.html en la raíz del proyecto rellenando preview.template.html con los tokens resueltos.
2. Informa al usuario que design-preview.html está listo para abrirse en su navegador y probar:
   • Tarjetas de clasificación de OpenCode Data en vivo, ticker de estado de telemetría y tablas de datos de alta densidad.
   • Alternancia de tema en vivo (Oscuro / Claro) con persistencia en localStorage.
   • Selector de arquetipo dinámico (transformándose entre OpenCode Data, Linear, Ultra-Minimalista, etc. en tiempo real).
   • Estados de botones, entradas, barra de búsqueda con ⌘K, insignias y modales interactivos.
3. Solicita comentarios o aprobación del usuario.

Fase 5: DESIGN_CONTEXT.md de Producción y Exportación de Configuración

Tras la aprobación del usuario:

1. Escribe el DESIGN_CONTEXT.md finalizado en la raíz del proyecto usando DESIGN_CONTEXT.template.md.
2. Proporciona un fragmento de configuración exportable para el stack del usuario (<head> de Tailwind v4 CDN o tailwind.config.js).
3. Mantén design-preview.html como el banco de pruebas visual vivo para iteraciones futuras.