diff --git a/.tidyfactor b/.tidyfactor index f3e167f..203267b 100644 --- a/.tidyfactor +++ b/.tidyfactor @@ -1,6 +1,6 @@ { "name": "tidyfactor-styler", - "version": "1.3.0", + "version": "1.4.0", "category": "design", "description": "TidyFactor Styler - Production Framework Styler, Section Redesign & RTL Polish Engine", "repository": "https://github.com/TidyFactor/Styler", diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fcd3ff..084eb62 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 --- +## [1.4.0] - 2026-09-02 + +### 🧭 Added — Navigation & Header Quality Bar & 5 Anti-Pattern Traps +- **Strict Navigation Quality Bar (`references/memory/component-anatomy.md`)**: Codified zero-emoji invariant, single-line desktop menu constraint (`white-space: nowrap`), mobile drawer requirements, submenu escalation threshold (5–6 links), and 3-control cap on header actions. +- **5 Navigation Anti-Pattern Auto-Rejection Traps (`references/memory/quality-bar.md`)**: Added deterministic rejection rules for vertical text wrapping in link pills, escaping action overflow, compound phrase congestion, duplicate CTA intent, and placeholder avatar/emoji traps. + +--- + ## [1.3.0] - 2026-09-01 ### Added - Runtime Tooling Manifest & Logical RTL Auditor diff --git a/brand.json b/brand.json index ea45fec..6c1ce29 100644 --- a/brand.json +++ b/brand.json @@ -1,6 +1,6 @@ { "name": "TidyFactor Styler", - "version": "1.3.0", + "version": "1.4.0", "publisher": "TidyFactor Ecosystem", "partner": "Alwkala Digital Agency (https://alwkala.com)", "contact": { diff --git a/dist/tidyfactor-styler.skill b/dist/tidyfactor-styler.skill index 092bddf..bc2258e 100644 Binary files a/dist/tidyfactor-styler.skill and b/dist/tidyfactor-styler.skill differ diff --git a/package.json b/package.json index 4319d7c..f7351a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tidyfactor/styler", - "version": "1.3.0", + "version": "1.4.0", "description": "TidyFactor Styler \u2014 Production Framework Styler, Section Redesign & RTL Polish Engine", "main": "SKILL.md", "bin": { diff --git a/references/memory/component-anatomy.md b/references/memory/component-anatomy.md index 938d15f..f99928d 100644 --- a/references/memory/component-anatomy.md +++ b/references/memory/component-anatomy.md @@ -8,6 +8,17 @@ - **Templates** (`page`/`redesign` output) — organisms arranged into an actual page layout. The one level allowed to be page-specific — it's arrangement, not new styling. A new visual need almost always belongs at the atom/molecule/organism level, added once to the project's existing component library — not invented fresh at the template level. + +--- + +## Navigation & Header Styling Invariants (Strict Quality Bar) +1. **Zero Emoji Invariant**: Emojis are strictly banned from navigation menus, headers, and buttons. Use lightweight inline SVGs (`currentColor`, 1.5–2px stroke). +2. **Single-Line Menu (`white-space: nowrap`)**: Navigation links must never wrap to multiple lines on desktop. Labels should be concise (1–2 words) or use stacked title + sub-descriptor. +3. **Mobile-First Drawer Maintenance**: Seamlessly fold into an accessible drawer or bottom sheet on mobile screens with $\ge 44\times 44\text{px}$ touch targets and locked body scroll. +4. **Submenu & Mega Menu Fallback**: When links exceed 5–6 items, escalate cleanly to structured submenus or a mega menu rather than crowding the header bar. +5. **Action Controls Cap (Max 3)**: Limit header actions to 3 cohesive controls (e.g. Primary CTA + Lang Toggle + Theme Toggle). + +--- ## The 8-State Interactive Component Matrix diff --git a/references/memory/quality-bar.md b/references/memory/quality-bar.md index e35a782..b4cfb9e 100644 --- a/references/memory/quality-bar.md +++ b/references/memory/quality-bar.md @@ -51,6 +51,15 @@ Reject and revise any generated code that exhibits any of the following 16 AI an 15. **Un-Isolated Microcopy**: Using English microcopy conventions inside Arabic RTL layouts without bidi isolation. 16. **Missing Interactive State Matrix**: Shipping default/hover states while omitting `focus-visible`, `active`, `disabled`, or `loading`. +## 🚫 5 Header & Navigation Anti-Pattern Traps (Auto-Reject) +1. **Vertical Text-Wrapping Link Trap**: Link labels breaking/wrapping into 2 stacked lines inside a single link container (e.g. `المبادرات \n والتدريب` or `المؤلفات \n والأبحاث`). Navigation items must strictly stay 1–2 words and enforce `white-space: nowrap;`. +2. **The Escaping Action Overflow Trap**: Primary CTA buttons or action toggles spilling outside the navbar pill container due to link congestion or missing container boundaries. Header items must never cause horizontal clipping or overflow. +3. **Compound Title Congestion**: Cramming 6+ verbose compound phrases side-by-side (`المؤهلات والأكاديميا`, `المؤلفات والأبحاث`, `المسيرة المهنية`, `الأثر الميداني`, `المبادرات والتدريب`). When links exceed 5–6 items, mandatory escalation to Submenu/Mega Menu applies. +4. **Duplicate Primary CTA Intent**: Duplicating the conversion action in both the menu links and the header button (e.g. having `حجز استشارة` in the nav links right next to `تواصل مباشر` on the CTA button). The CTA is the single primary conversion button. +5. **Amateur Avatar & Emoji Trap**: Using plain circular placeholder avatars with raw single letters (e.g. a teal circle with a plain letter "ش") or emoji labels (`🌙 ليلي`). Always use authentic SVG royal emblems, cartouches, or clean linear SVG icons. + +--- + ## Pre-Emit Self-Critique System (7 Axes) Before outputting code, score the design from 1 to 5 on 7 axes. Any score < 3 triggers an immediate internal revision pass. Stamp the output header with the result: `/* Pre-emit critique: P5 H5 E5 S5 R5 V5 D5 */`