TidyFactor · alwkala · Sep 5, 2026 · Sep 5, 2026
diff --git a/.tidyfactor b/.tidyfactor
@@ -2,10 +2,10 @@
   "ecosystem": "tidyfactor",
   "track": "design",
   "name": "tidyfactor-design",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "npmPackage": "@alwkala/tidyfactor-design",
   "github": "https://github.com/TidyFactor/Design",
-  "skillFile": "../tidyfactor-design-v1.8.0.skill",
+  "skillFile": "../tidyfactor-design-v1.9.0.skill",
   "category": "design-system",
   "type": "interactive-prototyping",
   "outputs": [

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,32 @@
 
 All notable changes to the **[@tidyfactor/design](https://www.npmjs.com/package/@tidyfactor/design)** package will be documented in this file.
 
+## [1.9.0] - 2026-09-05
+
+### 🎨 Added — Core UI Component & Page Composition Library (Volume 01–03)
+- **8 Authoritative Component Architecture Matrices (`references/memory/21-` through `28-`)**:
+  1. **`21-eyebrow-kicker-matrix.md`**: 16 micro-hierarchy kicker alternatives across 4 structural families with slot contracts.
+  2. **`22-hero-section-matrix.md`**: 8 GSAP ScrollTrigger + SVG motion architectures (Kinetic Split-Type, Scribble Signature, Text-Mask Scene, Organic Blob, Aurora Grain, Video Scrub, Split-Flap, Dimensional Isometric).
+  3. **`23-card-architecture-matrix.md`**: 16 modular card alternatives with explicit `flex-col`, `mt-auto` CTA anchoring, and solid borders.
+  4. **`24-button-cta-matrix.md`**: 16 button alternatives with full 8-state matrices (`idle`, `hover`, `active`, `focus`, `disabled`, `loading`, `success`, `error`).
+  5. **`25-divider-separator-matrix.md`**: Volume 03 Section Transitions & Seams with parametric SVG `wavePath` generation, 4-layer ownership mental model, and GSAP scroll morphing.
+  6. **`26-metrics-stat-matrix.md`**: 12 tabular stat cards with `font-variant-numeric: tabular-nums`, SVG progress rings, and `initCounters` trigger.
+  7. **`27-list-indicator-matrix.md`**: 12 trust bullet indicators (Status Rings, Dot Trackers, Milestone Trees) with zero emoji slop.
+  8. **`28-shared-motion-primitives.md`**: Shared GSAP/SVG foundations including easing curves, `prepDraw`/`drawIn` SVG strokes, `splitChars` kinetic typography, `initDepthParallax`, and `initScrollProgress`.
+- **Heritage Detailing Contract (`references/memory/19-heritage-lanes-atmosphere.md`)**:
+  - Added Section 6 codifying the **Zero Motif Overlap Invariant**: architectural motifs (mashrabiya, lotus, kufic) are isolated to section seams or watermarks via CSS `mask-image` and low opacity (≤0.08) with zero text collisions.
+- **Rule 15 Codification — Token Efficiency & Semantic Density Doctrine (YAML Primacy)**:
+  - Created canonical [`brand.yaml`](brand.yaml) reducing context load by ~40% (~1,290 vs ~2,180 tokens), eliminating trailing-comma syntax hazards.
+  - Maintained dual-engine backward compatibility with `brand.json`.
+- **Governance Audit Remediation & Rule 10/11 Compliance**:
+  - Added `tests/scenarios.md` with 3 test scenarios (happy-path, edge-case, negative anti-trigger).
+  - Consolidated divergent quality bars into `references/memory/06-quality-bar.md` with the 7-Axis Self-Critique Stamp (`P5 H5 E5 S5 R5 V5 D5`).
+  - Added `<!-- last-verified: 2026-09-05 -->` to all 31 operational memory files.
+  - Aligned `manifest.json` and `scripts/optimize_images.py` invocation contracts.
+  - Upgraded `tools/validate_skill.py` to full 13-check automated audit suite (100% pass).
+
+---
+
 ## [1.8.0] - 2026-09-02
 
 ### ⚡ Added — Declarative Decision Gates, Staleness Tracking & Manifest v1.1.0

diff --git a/README.ar.md b/README.ar.md
diff --git a/README.de.md b/README.de.md
@@ -1,8 +1,8 @@
 <div align="center">
 
-# tidyfactor-design `v1.5.0`
+# tidyfactor-design `v1.9.0`
 
-**Code-Native UI-Design-Lifecycle & Interaktive Prototyping Engine für KI-Coding-Agenten**
+**Code-Native UI-Design-Lifecycle-Engine und Anti-Slop Designsystem-Suite für KI-Agenten**
 
 [![npm version](https://img.shields.io/npm/v/@tidyfactor/design.svg?style=for-the-badge&color=0284C7)](https://www.npmjs.com/package/@tidyfactor/design)
 [![License: Apache-2.0](https://img.shields.io/badge/License-Apache--2.0-blue.svg?style=for-the-badge)](LICENSE)
@@ -13,32 +13,90 @@
 
 ---
 
-## ⚡ Schnellstart (Quickstart)
+## 💡 Kernphilosophie: Trennung von Design-Intelligenz und Implementierung
 
-```bash
-# Installation & Direktaufruf via NPX
-npx @tidyfactor/cli-design
-```
+Das fundamentale Prinzip von **TidyFactor Design** besteht in der strikten Trennung von **Design-Wissen und -Intelligenz** von der **technischen Code-Implementierung**:
 
-Oder direkt in Ihrem KI-Assistenten aufrufen (*Google Antigravity, Claude Code, Cursor, Codex*):
-```text
-/tidyfactor-design
 ```
+                 DESIGN INTELLIGENCE
+                        │
+             ┌──────────┴──────────┐
+             ↓                     ↓
+       Operational Memory       Workflows
+             │                     │
+             └──────────┬──────────┘
+                        ↓
+                  AI Agent
+                        ↓
+                Design System
+                        ↓
+                  HTML/CSS/JS
+                        ↓
+                     Audit
+                        ↓
+                    Handoff
+```
+
+Diese Architektur macht die Skill zu einem wiederverwendbaren **Design-Engineering-Betriebssystem**, das deterministisch über unterschiedlichste Projekte hinweg agiert. Anstatt per Prompt unüberlegte Oberflächen zu generieren, führt der KI-Agent einen vollständigen, strukturierten Design-Lebenszyklus aus.
 
 ---
 
-## 📋 Befehls- & Workflow-Matrix
+## ⚖️ TidyFactor Design vs. Figma: Die Code-Native Alternative
 
-| Befehl | Ziel & Ergebnis | Workflow-Referenz |
+TidyFactor Design ist kein klassisches vektorbasiertes Zeichenwerkzeug, sondern eine **Code-Native Alternative zu Figma**:
+
+| Kriterium | Figma | TidyFactor Design |
 |---|---|---|
-| `/brief` | Briefing de diseño y descubrimiento de marca | `workflows/brief.md` |
-| `/tokens` | Generación de design tokens y escalas | `workflows/tokens.md` |
-| `/components` | Prototipado interactivo de componentes UI | `workflows/components.md` |
-| `/page` | Montaje de páginas completas interactivas | `workflows/page.md` |
-| `/rtl` | Validación y soporte nativo RTL/Árabe | `workflows/rtl.md` |
+| **Paradigma** | Visuelles Gestaltungswerkzeug | Code-nativer Design-Workflow |
+| **Arbeitsbereich** | Canvas-zentriert | Code-zentriert |
+| **Zielgruppe** | Visuelle Designer | KI-Agent + Entwickler + Design-Engineer |
+| **Bausteine** | Visuelle Komponenten & Variablen | Design-Tokens + Komponenten + Workflows |
+| **Prototyping** | Klickbare Screen-Prototypen | Echte HTML/CSS/JS-Prototypen (Zero-Build-Step) |
+| **Handoff** | Manuelle Übergabe Designer → Entwickler | Design und Implementierung in einer einheitlichen Umgebung |
+| **Governance** | Manuelle visuelle Prüfung | Mechanische, automatisierte Qualitätsprüfungen |
+| **Umfang** | Oberflächengestaltung | Ganzheitliches Design-Lifecycle-Management |
+
+---
+
+## 🧠 Was bedeutet „Operational Memory“?
+
+Das operative Gedächtnis (`references/memory/`) besteht nicht aus abstrakten Texten, sondern aus **anwendbaren Regeln, Matrizen, Schemata und konkreten Restriktionen**:
+
+- **Typografie-Matrix** (`01-typography-matrix.md`): Hierarchien und mathematische Skalen.
+- **Layout-Archetypen** (`02-layout-archetypes.md`): Raster und Raumaufteilungen.
+- **Bewegungsprinzipien** (`03-motion-principles.md`): Physikbasierte Kurven und GSAP-Muster.
+- **Komponenten-Anatomie** (`04-component-anatomy.md`): Standardisierter Komponentenaufbau.
+- **Quality Bar** (`06-quality-bar.md`): Mechanische 7-Achsen-Qualitätsprüfung (`P5 H5 E5 S5 R5 V5 D5`).
+- **RTL- & Arabisch-Regeln** (`14-arabic-rtl-matrix.md`): Bidirektionale Layouts und Typografie.
+
+Der KI-Agent muss grundlegende Design-Entscheidungen nicht jedes Mal neu erraten, sondern greift auf ein geprüftes operatives Regelwerk zurück.
+
+---
+
+## 🚫 Anti-Slop Governance: Mechanisch überprüfbare Qualität
+
+Standard-KI neigt zu austauschbaren, künstlich wirkenden Oberflächen. TidyFactor Design setzt dem strikte Qualitätskriterien entgegen:
+
+- ❌ **Verbot generischer KI-Muster**: Keine lila Farbverläufe (*Purple Gradient Heros*), kein inflationäres *Inter Everywhere*, keine identischen 3-Spalten-Raster und keine unstrukturierten Kartenverschachtelungen.
+- 🎨 **Spezifische Designsysteme**: Farbwelten mit WCAG AAA-Kontrast und Oberflächen mit echter visueller Tiefe.
+- ⚡ **YAML-Primat (Regel 15)**: Definition von Tokens in `brand.yaml`, was 35–50 % an LLM-Kontexttickets einspart.
+
+---
+
+## 🔄 Die 7 Lebenszyklus-Phasen und 24 Befehle
+
+1. **Discovery**: `/study`, `/brief`
+2. **Foundation**: `/init`, `/brand`, `/typography`, `/school`, `/tokens`, `/palette`, `/assets`
+3. **Architecture**: `/layout`, `/nav-footer`, `/page`, `/dashboard`
+4. **Components**: `/components`, `/states`
+5. **Motion**: `/motion`, `/flow`, `/i18n`
+6. **Quality**: `/perf`, `/audit`, `/clone`, `/retrofit`
+7. **Delivery**: `/handoff`, `/deploy`
 
 ---
 
-## 📖 Vollständige Technische Dokumentation
+## 📚 Dokumentation & Leitfäden
 
-Ausführliche Spezifikationen, Architekturguides und Tools finden Sie im [Offiziellen Technischen README auf Englisch (README.md)](README.md).
+- 📖 [Ausführlicher Leitfaden für Design-Engineering und Nutzung (docs/GUIDE.md)](docs/GUIDE.md)
+- 📖 [Arabischer Engineering-Leitfaden (docs/GUIDE.ar.md)](docs/GUIDE.ar.md)
+- 📋 [Vollständige technische Spezifikation (README.md)](README.md)
diff --git a/README.es.md b/README.es.md
@@ -1,8 +1,8 @@
 <div align="center">
 
-# tidyfactor-design `v1.5.0`
+# tidyfactor-design `v1.9.0`
 
-**Motor de Ciclo de Vida de Diseño UI Nativo en Código y Prototipado Interactivo para Agentes de IA**
+**Motor de Ciclo de Vida de Diseño UI Nativo en Código y Suite de Diseño Anti-Slop para Agentes de IA**
 
 [![npm version](https://img.shields.io/npm/v/@tidyfactor/design.svg?style=for-the-badge&color=0284C7)](https://www.npmjs.com/package/@tidyfactor/design)
 [![License: Apache-2.0](https://img.shields.io/badge/License-Apache--2.0-blue.svg?style=for-the-badge)](LICENSE)
@@ -13,32 +13,92 @@
 
 ---
 
-## ⚡ Inicio Rápido (Quickstart)
+## 💡 La Filosofía Central: Separación de la Inteligencia de Diseño de su Implementación
 
-```bash
-# Instalación e invocación vía NPX
-npx @tidyfactor/cli-design
-```
+El pilar fundamental de **TidyFactor Design** radica en separar la **inteligencia y conocimiento de diseño** de la **ejecución técnica en código**:
 
-O invócalo directamente dentro de tu asistente de IA (*Google Antigravity, Claude Code, Cursor, Codex*):
-```text
-/tidyfactor-design
 ```
+                 DESIGN INTELLIGENCE
+                        │
+             ┌──────────┴──────────┐
+             ↓                     ↓
+       Operational Memory       Workflows
+             │                     │
+             └──────────┬──────────┘
+                        ↓
+                  AI Agent
+                        ↓
+                Design System
+                        ↓
+                  HTML/CSS/JS
+                        ↓
+                     Audit
+                        ↓
+                    Handoff
+```
+
+Esta arquitectura convierte a la habilidad en un **Sistema Operativo de Ingeniería de Diseño** reutilizable, transferible y predecible entre diferentes proyectos. En lugar de limitarse a generar código mediante un simple prompt, el agente ejecuta un ciclo de diseño formal y estructurado.
 
 ---
 
-## 📋 Matriz de Comandos Principales
+## ⚖️ TidyFactor Design vs. Figma: La Alternativa Nativa en Código
 
-| Comando | Objetivo y Resultado | Flujo de Trabajo |
+TidyFactor Design no pretende ser una herramienta de dibujo vectorial tradicional en lienzo, sino una **alternativa de diseño nativa en código (Code-Native Alternative)**:
+
+| Característica | Figma | TidyFactor Design |
 |---|---|---|
-| `/brief` | Briefing de diseño y descubrimiento de marca | `workflows/brief.md` |
-| `/tokens` | Generación de design tokens y escalas | `workflows/tokens.md` |
-| `/components` | Prototipado interactivo de componentes UI | `workflows/components.md` |
-| `/page` | Montaje de páginas completas interactivas | `workflows/page.md` |
-| `/rtl` | Validación y soporte nativo RTL/Árabe | `workflows/rtl.md` |
+| **Paradigma** | Herramienta de diseño visual | Flujo de trabajo de diseño nativo en código |
+| **Entorno** | Centrado en el lienzo (Canvas-centric) | Centrado en código (Code-centric) |
+| **Audiencia** | Diseñadores visuales | Agente de IA + Desarrollador + Design Engineer |
+| **Bloques de construcción** | Componentes y variables visuales | Tokens + componentes + flujos deterministas |
+| **Prototipado** | Prototipos interactivos de pantalla | Prototipos reales en HTML/CSS/JS (cero build step) |
+| **Handoff** | Transferencia manual Diseñador → Dev | Diseño e implementación unificados |
+| **Gobernanza** | Inspección visual manual | Controles de calidad mecánicos y automatizados |
+| **Ámbito** | Creación de interfaces de usuario | Gestión del ciclo de vida de diseño completo |
+
+---
+
+## 🧠 ¿Qué es la Memoria Operacional (Operational Memory)?
+
+La memoria operacional (`references/memory/`) no consiste en teoría o artículos abstractos. Se compone de **estructuras de datos, matrices operativas, esquemas de diseño y restricciones ejecutables**:
+
+- **Matrices Tipográficas** (`01-typography-matrix.md`): Jerarquías y escalas sin arbitrariedad.
+- **Arquetipos de Layout** (`02-layout-archetypes.md`): Retículas y estructuras espaciales.
+- **Principios de Movimiento** (`03-motion-principles.md`): Física de curvas de animación, tiempos y GSAP.
+- **Anatomía de Componentes** (`04-component-anatomy.md`): Reglas de estructura de componentes.
+- **Barrera de Calidad** (`06-quality-bar.md`): Verificación mecánica en 7 ejes (`P5 H5 E5 S5 R5 V5 D5`).
+- **Reglas RTL y Árabe** (`14-arabic-rtl-matrix.md`): Tipografía y composición bidireccional nativa.
+
+El agente de IA no necesita improvisar o reinventar las bases en cada proyecto; cuenta con una base de reglas operativas precisas y estandarizadas.
+
+---
+
+## 🚫 Gobernanza Anti-Slop: Calidad Mecánica Comprobable
+
+A diferencia de los asistentes genéricos que generan interfaces predecibles, repetitivas y saturadas de patrones artificiales, TidyFactor Design impone **barreras de calidad mecánicas y comprobables**:
+
+- ❌ **Prohibición de Slop de IA**: Adiós a *Purple Gradients*, *Inter Everywhere*, rejillas idénticas de 3 columnas, tarjetas anidadas sin jerarquía (*Card-in-card*) y orbes flotantes (*Floating orbs*).
+- 🎨 **Sistemas de Diseño Específicos**: Paletas cromáticas con ratios de contraste WCAG AAA y superficies con profundidad real.
+- ⚡ **Primacía YAML (Regla 15)**: Almacenamiento de tokens de marca en `brand.yaml`, ahorrando entre 35% y 50% de tokens de contexto para el LLM.
+
+---
+
+## 🔄 Las 7 Fases del Ciclo de Vida y los 24 Comandos
+
+TidyFactor Design estructura el diseño en 7 etapas consecutivas gobernadas por un registro de **24 Slash Commands**:
+
+1. **Discovery**: `/study`, `/brief`
+2. **Foundation**: `/init`, `/brand`, `/typography`, `/school`, `/tokens`, `/palette`, `/assets`
+3. **Architecture**: `/layout`, `/nav-footer`, `/page`, `/dashboard`
+4. **Components**: `/components`, `/states`
+5. **Motion**: `/motion`, `/flow`, `/i18n`
+6. **Quality**: `/perf`, `/audit`, `/clone`, `/retrofit`
+7. **Delivery**: `/handoff`, `/deploy`
 
 ---
 
-## 📖 Especificación Técnica Completa
+## 📚 Documentación y Guías
 
-Para la arquitectura profunda, esquemas JSON y documentación de herramientas nativas, consulta el [README Técnico en Inglés (README.md)](README.md).
+- 📖 [Guía Exhaustiva de Ingeniería y Uso (docs/GUIDE.md)](docs/GUIDE.md)
+- 📖 [Guía de Ingeniería en Árabe (docs/GUIDE.ar.md)](docs/GUIDE.ar.md)
+- 📋 [Especificación Técnica Completa (README.md)](README.md)