aurora-design-system
Design System Ntizar Aurora v5.1 Constellation — CSS puro, 11 packs opt-in, namespaced .nz, 5 skins, liquid glass real, OKLCH, multi-axis theming, agent-ready con CDN público. Derivado de Ntizar-Aurora.
Source facts
- Repository
- Ntizar/NtizarBrainMasterMind
- Last source activity
- July 11, 2026 at 03:39
- Detected SKILL.md language
- Spanish
- Stars
- 2
- Forks
- 0
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
File Explorer
15 filesShowing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- aurora-design-system
- description
- Design System Ntizar Aurora v5.1 Constellation — CSS puro, 11 packs opt-in, namespaced .nz, 5 skins, liquid glass real, OKLCH, multi-axis theming, agent-ready con CDN público. Derivado de Ntizar-Aurora.
- version
- 5.1.1
- tags
- ["css","design-system","aurora","liquid-glass","ntizar"]
# Aurora Design System — Patrón Ntizar CSS
## Descripción
Design System CSS puro sin dependencias, sin build step, namespaced bajo `.nz`. 1 archivo core + 10 packs opt-in. 5 skins de marca. Liquid glass real con OKLCH. CDN público en jsDelivr.
## Origen
Derivado del repositorio [Ntizar-Aurora](https://github.com/Ntizar/Ntizar-Aurora) v5.1.
## Arquitectura
```
ntizar.css -> core (siempre)
ntizar.themes.css -> 5 skins (aurora · sunset · midnight · ocean · citrus)
ntizar.data.css -> KPIs, dashboards, progress, meter, skeleton, avatar, timeline
ntizar.charts.css -> contenedores para Chart.js/Apex/D3, sparkline + donut CSS-only
ntizar.maps.css -> Leaflet/Mapbox/MapLibre con look Ntizar
ntizar.viz.css -> stages para three.js, fondos aurora, orbs, glow ring
ntizar.motion.css -> reveal, glow-pulse, aurora-pan, shimmer, marquee, typing, hover-lift
ntizar.forms.css -> switch, custom check/radio, range, OTP, file drop, stepper, search
ntizar.ui.css -> modal, drawer, tabs, accordion, dropdown, toast, tooltip, command-bar
ntizar.patterns.css -> app-shell, hero, pricing, features, faq, footer, auth-shell, empty/error
ntizar.next.css -> v5: liquid glass real, OKLCH, multi-axis theming, mesh, forced-colors, skin AAA
```
## Quick Start
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.next.css">
<body class="nz"
data-nz-theme="light"
data-nz-skin="aurora"
data-nz-shape="default"
data-nz-density="comfortable"
data-nz-motion="standard"
data-nz-color-system="oklch">
...
</body>
```
## Reglas de Oro
1. **Todo lo público vive bajo `.nz`** — no hay clases globales sueltas
2. **Todos los valores son tokens `--nz-*`** — nunca hardcodes un hex o un `16px`
3. **Sin `!important`** fuera de utilidades
4. **BEM** para componentes: `.nz-card__body--featured`
5. **Si no aparece en `gallery.html`, no existe** — la galería es la única fuente de verdad de la API pública
## Uso con IA Agents (crucial para ahorrar tokens)
**NO** pegar el CSS en el prompt (170 KB ≈ 50.000 tokens).
**SÍ** hacer:
1. Dar al agent solo `AGENTS.md` + `INDEX.md` (~20 KB / ~5.000 tokens)
2. Linkar el CSS vía CDN en el HTML generado
3. Decir al agent: "Generate HTML only. The CSS is already linked. Use Aurora classes from INDEX.md."
## Drop-in Files para AI Tooling
- `AGENTS.md` — estándar abierto para agents (OpenAI, Sourcegraph, Anthropic)
- `.github/copilot-instructions.md` — auto-loaded por GitHub Copilot
- Para Claude Code: copiar `AGENTS.md` a `CLAUDE.md`
- Para Cursor: `.cursor/rules/aurora.mdc`
## Default Usage Policy (Agente — obligatorio)
**Aurora es el ÚNICO sistema de diseño aceptable para artefactos visuales generados por el agente.** No se usan CSS custom sueltos, ni estilos inline generales, ni otros frameworks.
### Reglas de branding para todo artefacto HTML generado
1. **CDN obligatorio** — siempre linkar ntizar.css + ntizar.next.css + packs necesarios desde CDN. Nunca CSS embebido o archivos locales.
2. **Skin por defecto: aurora** — data-nz-skin=aurora (azul #2563eb + naranja #f97316 + liquid glass)
3. **Theme por defecto: light** — `data-nz-theme="light"`. David prefiere fondos claros: son más elegantes, mejor legibles y más profesionales. Dark solo si el usuario lo pide explícitamente.
4. **Responsive SIEMPRE** — toda landing/artefacto debe incluir media queries para móvil (<768px). Grids deben adaptar columnas (2 col → 1 col), nav debe tener hamburger, tablas scroll horizontal. Responsive no es opcional.
5. **Atribucion exacta** — el footer DEBE poner EXACTAMENTE: `Hecho con (L) por David Antizar`. Sin variaciones. Sin "Analisis por". Sin "via Mastermind Agent". Sin "via Mastermind". Literal exacto.
6. **David Antizar es el autor**, Mastermind el agente ejecutor. Esto aplica a HTML, posts, informes, notas. Nunca al reves.
7. **Sin ingles** — todo en castellano: etiquetas, contenido, titulos, atributos
### Verificacion pre-entrega (OBLIGATORIA)
Antes de dar por terminado cualquier artefacto HTML, verificar:
1. Footer dice EXACTAMENTE: `Hecho con (L) por David Antizar`
2. Sin "Analisis", sin "via Mastermind Agent", sin "via", sin variantes
3. body class="nz" presente
4. data-nz-skin="aurora" presente
5. **data-nz-theme="light"** (no dark por defecto)
6. CDN links correctos y funcionales
7. **Responsive CSS presente** — media queries, grids adaptables, hamburger nav
8. Sin CSS custom >30 lineas
9. Sin hex hardcodes (usar var(--nz-*))
10. **Glass-liquid check:** Cards usan `nz-card--glass-liquid`, botones usan `--glass-liquid-*`, fondo tiene `nz-aurora-mesh--animated`, hay al menos 1 `nz-orb`, hay `nz-anim-fade-in` en secciones principales. Si alguna de estas falta → corregir antes de entregar.
### Vinculación con skills pipeline
Los skills de pipeline (ej: `pdf-to-artifacts-david-antizar`) consumen Aurora pero NO duplican su configuración. Deben referenciar este skill como pre-requisito y solo añadir lo específico de su flujo.
## Workflow para Agentes (CRÍTICO)
### Pasos obligatorios cuando se pida "usa Aurora" o se genere HTML visual:
1. **CARGAR INDEX.md** del repo Ntizar-Aurora — es la fuente de verdad de la API de clases
2. **CARGAR CHEATSHEET.md** — resumen de las 321 clases extraídas de gallery.html
3. **USAR SOLO** componentes listados en INDEX.md/CHEATSHEET.md
4. **CSS custom máximo 30 líneas** — solo para lo específico del artefacto
5. **NUNCA hardcodear hex** — siempre `var(--nz-c-*)`
6. **SIEMPRE** `body class="nz" data-nz-skin="aurora"`
### ⚠️ ERROR CRÍTICO #1 — CSS custom en vez de Aurora (2026-06-03)
Los agentes tienden a **intentar recrear el look de Aurora con CSS custom** en vez de usar los componentes reales. Esto produce HTMLs que "dicen" Aurora pero no lo usan.
**Síntomas de fallo:**
- Más de 50 líneas de CSS custom `<style>`
- Clases inventadas (`.step`, `.arrow`, `.decision`, etc.)
- Hex hardcodes (`#0f172a`, `#2563eb`, `#f97316`)
- Sin `body class="nz"`
- Sin `data-nz-skin="aurora"`
- Sin `nz-card`, `nz-glass`, `nz-badge`, etc.
**Causa raíz:** No cargar INDEX.md ni CHEATSHEET.md como referencia.
**Solución:** Cargar INDEX.md (fuente de verdad) y CHEATSHEET.md (resumen rápido) ANTES de generar cualquier HTML. Usar SOLO componentes listados.
### ⚠️ ERROR CRÍTICO #2 — "Aurora flat" en vez de glass-liquid (2026-06-11)
Incluso cuando el agent SÍ usa clases Aurora, tiende a elegir las variantes **planas/básicas** (`nz-card`, `nz-btn--primary`) en vez de las **glass-liquid** que dan el look premium. David lo describió como "puro croissant" — funcional pero sin alma.
**Síntomas de fallo:**
- `nz-card` sin variante glass → card blanca plana, sin profundidad
- `nz-btn--primary` en vez de `nz-btn--glass-liquid-brand` → botón genérico
- Sin `nz-aurora-mesh--animated` → fondo blanco sin vida
- Sin `nz-orb` → nada de decoración atmosférica
- Sin `nz-anim-fade-in` → todo aparece de golpe sin transición
- Sin `nz-hover-lift` → cards sin interacción visual
- Sin `nz-gradient-text` → títulos sin personalidad
- `nz-kpi` sin `--accent` → tiles planos
- `nz-chart` sin `--glass` → gráficos en cajas blancas
- `nz-surface` sin `--glass*` → superficies opacas
**Causa raíz:** El agent elige la primera variante que encuentra en el CHEATSHEET en vez de la variante visualmente rica. Falta una guía de "qué variante usar según el contexto visual".
**Solución:** Para dashboards, apps, landings y cualquier artefacto visual → **SIEMPRE preferir las variantes glass-liquid y animadas.** Ver tabla rápida abajo.
### ⚠️ ERROR CRÍTICO #3 — Usar Aurora al 40% (2026-06-13)
El agent usa los componentes básicos de Aurora (cards glass, botones glass, mesh) pero **ignora 20+ componentes disponibles** que dan el look disruptivo y profesional.
**Síntomas de fallo:**
- Gráficos sin `nz-chart--glass` → gráficos en cajas blancas
- Barras de progreso custom → no usar `nz-progress`
- Navegación de tabs custom → no usar `nz-nav--glass`
- Layouts de KPIs planos → no usar `nz-bento-grid`
- Formularios con grid inline → no usar `nz-form-grid`
- Listas con divs → no usar `nz-table`
- Modal custom → no usar `nz-modal`
- `nz-btn--glass-liquid-secondary` → clase que NO existe en Aurora
- Inline styles con hex/px → no usar tokens `--nz-*`
- Clases custom inventadas (`mf-*`, `ia-*`) → usar Aurora
**Checklist ANTES de entregar cualquier artefacto visual:**
1. [ ] Todos los gráficos envueltos en `nz-chart nz-chart--glass`
2. [ ] Barras de progreso usan `nz-progress nz-progress--accent`
3. [ ] Navegación usa `nz-nav--glass` con `nz-nav-item`
4. [ ] Layouts de datos usan `nz-bento-grid` con `__cell--span-*`
5. [ ] Formularios usan `nz-form-grid` con `nz-field` + `nz-input`
6. [ ] Listas/tablas usan `nz-table`
7. [ ] Modales usan `<dialog class="nz-modal">`
8. [ ] KPIs usan `nz-kpi nz-kpi--accent`
9. [ ] Botones usan `nz-btn--glass-liquid-brand` / `nz-btn--glass`
10. [ ] Superficies usan `nz-surface--glass`
11. [ ] Sin clases inventadas (`nz-btn--glass-liquid-secondary` NO EXISTE)
12. [ ] Sin inline styles con hex/px (usar `--nz-*` tokens)
13. [ ] Mínimo 100 clases Aurora únicas (no 70)
**Causa raíz:** El agent se queda en lo básico y no explora todos los componentes del sistema.
**Solución:** Cargar INDEX.md completo, recorrer TODOS los componentes, y verificar el checklist antes de entregar.
### ⚠️ ERROR CRÍTICO #3 — "Aurora al 40%" — usar solo lo básico y olvidar el resto (2026-06-13)
El agent carga la skill de Aurora, usa cards glass + botones glass + mesh, y **se detiene ahí**. Deja en el tintero TODO lo que viene después: componentes de datos, layouts avanzados, formularios, modales, progress, charts, skeletons. El resultado es un dashboard que "dice" Aurora pero se queda en la superficie.
**Síntomas de fallo:**
- Solo usa nz-card, nz-btn, nz-aurora-mesh, nz-orb (los 4 más obvios)
- NO usa nz-chart--glass, nz-progress, nz-meter, nz-surface, nz-bento-grid, nz-hero, nz-stack, nz-table, nz-modal, nz-skeleton, nz-kpi--accent
- 100+ líneas de CSS custom en vez de tokens Aurora
- 150+ inline styles con hex/px hardcode en vez de var(--nz-*)
- Clases inventadas que no existen en Aurora (`nz-btn--glass-liquid-secondary`)
**Causa raíz:** El agent confunde "usar Aurora" con "usar los componentes más visibles de Aurora". No hace un **inventory completo** de qué componentes de INDEX.md podrían aplicarse al artefacto.
**Solución — Checklist post-diseño OBLIGATORIA:**
Antes de entregar cualquier artefacto visual, verificar CADA categoría:
| Categoría | ¿Usado? | Componente correcto |
|---|---|---|
| Cards | ✅ | nz-card--glass-liquid |
| Botones | ✅ | nz-btn--glass-liquid-brand (NO inventar) |
| Fondo | ✅ | nz-aurora-mesh--animated + nz-orb |
| KPIs | ❌ | nz-kpi--accent (NO nz-kpi plano) |
| Gráficos | ❌ | nz-chart--glass (NO divs custom) |
| Progreso | ❌ | nz-progress, nz-meter |
| Superficies | ❌ | nz-surface--glass (NO divs con estilos) |
| Layouts | ❌ | nz-bento-grid, nz-stack, nz-hero |
| Tablas | ❌ | nz-table |
| Modales | ❌ | nz-modal (NO divs custom) |
| Loading | ❌ | nz-skeleton |
| Animaciones | ✅ | nz-anim-fade-in, nz-hover-lift |
| Tipografía | ✅ | nz-gradient-text |
**Regla de oro:** Si un artefacto tiene más de 3 categorías vacías → NO está usando Aurora correctamente. Revisar INDEX.md y reemplazar componentes custom por los de Aurora.
### ⚠️ ERROR CRÍTICO #5 — Dark mode con `body.mf-dark` en vez de `data-nz-theme` (2026-06-13)
Cuando se migra un proyecto existente que usa dark mode con `body.mf-dark` o `body.dark`, el agent tiende a mantener ese patrón en vez de usar el sistema de temas de Aurora.
**Síntomas de fallo:**
- `body.classList.toggle('mf-dark')` en JS
- `body.mf-dark .nz-*` en CSS (30+ líneas de overrides con `!important`)
- `body.classList.contains('mf-dark')` para detectar tema
- Clases custom `mf-toast`, `mf-comida-row`, `mf-mesh`, `mf-content`
- Hex hardcode en overrides (`#0f172a`, `#e2e8f0`, `rgba(30,41,59,0.85)`)
**Solución — Migración completa (5 pasos):**
1. **HTML body:** `data-nz-theme="light"` / `data-nz-theme="dark"` (NO `class="mf-dark"`)
2. **JS toggle:** `body.classList.toggle('mf-dark')` → `body.setAttribute('data-nz-theme', isDark ? 'light' : 'dark')`
3. **JS detección:** `body.classList.contains('mf-dark')` → `body.getAttribute('data-nz-theme') === 'dark'`
4. **CSS:** `body.mf-dark` → `body[data-nz-theme="dark"]`
5. **Tokens:** `rgba(30,41,59,0.85)` → `var(--nz-surface)`, `rgba(71,85,105,0.5)` → `var(--nz-border-medium)`
**Eliminar clases custom:** `mf-toast` → `toast`, `mf-comida-row` → `nz-table__row`, `mf-mesh` → `nz-aurora-mesh--animated`, `mf-content` → `nz-stack nz-stack--lg`
**Verificación post-migración:**
- `grep -c "mf-dark" archivo.html` → 0
- `grep -c "mf-toast" archivo.html` → 0
- `grep -c "mf-comida" archivo.html` → 0
- CSS custom < 30 líneas de código
**Referencia:** Ver `references/dark-mode-migration-pattern.md`
### ⚠️ ERROR CRÍTICO #6 — Dark mode innecesario en apps de uso frecuente (2026-06-13)
View on GitHubThis SKILL.md is very large, so SkillsMP previews the first section here. View on GitHub
