diff --git a/.tidyfactor b/.tidyfactor index 203267b..4c4b5bd 100644 --- a/.tidyfactor +++ b/.tidyfactor @@ -1,10 +1,10 @@ { "name": "tidyfactor-styler", - "version": "1.4.0", + "version": "1.4.1", "category": "design", "description": "TidyFactor Styler - Production Framework Styler, Section Redesign & RTL Polish Engine", "repository": "https://github.com/TidyFactor/Styler", - "npm": "@alwkala/tidyfactor-styler", + "npm": "@tidyfactor/styler", "compatibility": [ "antigravity", "claude-code", diff --git a/CHANGELOG.md b/CHANGELOG.md index 084eb62..7494ac9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 --- +## [1.4.1] - 2026-09-05 + +### 🎨 Added — Master Component Pattern Registry & Zero-Tolerance Motif Overlap Rule +- **Component Matrix Registry (`references/memory/component-matrix-registry.md`)**: Operational quick-reference covering 7 core component families (eyebrows, hero motion rules, card architecture, 8-state CTAs, frieze continuity patterns, metric typography, and artisanal list bullets). +- **Anti-Pattern Trap 6 (`references/memory/quality-bar.md`)**: Codified zero-tolerance rule against stacking background watermarks, SVGs, or icons, and against placing motifs directly behind dense reading columns. +- **Pre-Delivery Verification**: Codified 7-point checklist for component and redesign deliverables before output signoff. + +--- + ## [1.4.0] - 2026-09-02 ### 🧭 Added — Navigation & Header Quality Bar & 5 Anti-Pattern Traps diff --git a/README.ar.md b/README.ar.md index 2524802..d087fa8 100644 --- a/README.ar.md +++ b/README.ar.md @@ -1,6 +1,6 @@
-# 🎨 مهارة تايتفكتور لتنسيق أطر العمل `TidyFactor Styler v1.3.0` +# 🎨 مهارة تايتفكتور لتنسيق أطر العمل `TidyFactor Styler v1.4.1` ### مهارة هندسة الواجهات البرمجية وتنسيق أطر العمل والتحويل الجراحي للـ RTL لوكلاء الذكاء الاصطناعي امنح وكلاء البرمجة الذكية (**Google Antigravity و Claude Code و Cursor و OpenAI Codex و Windsurf**) محركاً هندسياً لتنسيق الواجهات يعمل مباشرة داخل مستودع مشروعك الفعلي — دون إنشاء طبقات أنماط مكررة، أو استيراد مكتبات غريبة، أو إحداث فوضى في ملفات الـ CSS. @@ -90,13 +90,30 @@ --- -## 🚀 البدء السريع +## 🚀 التثبيت والبدء السريع -### 1. الحقن المباشر للمهارة في مشروعك +اختر طريقة التثبيت المناسبة لمشروعك: +### الخيار (أ): عبر TidyFactor CLI الرسمي (الموصى به) +التثبيت الفوري دون الحاجة لتثبيت الأداة عالمياً في بيئة عملك النشطة: ```bash -# إضافة المهارة مباشرة داخل مساحة عمل مشروعك الحالي -npx @tidyfactor/cli-styler add-skill +npx @tidyfactor/cli add styler +``` +*أو في حال كانت الأداة مثبتة لديك عالمياً (`npm i -g @tidyfactor/cli`):* +```bash +tidyfactor add styler +``` + +### الخيار (ب): عبر معيار مهارات الوكلاء المفتوح (skills.sh) +التثبيت العالمي المتوافق مع كافة بيئات الوكلاء ومحررات الذكاء الاصطناعي (Antigravity, Cursor, Claude Code, Windsurf, Codex): +```bash +npx skills add tidyfactor/styler +``` + +### الخيار (ج): التثبيت المباشر الفردي عبر NPM +تشغيل مثبت المهارة المستقل مباشرة مع تجاوز الذاكرة المخبأة وضمان أحدث إصدار: +```bash +npx @tidyfactor/styler@latest ``` ### 2. مسارات التثبيت حسب بيئة الوكيل الذكي diff --git a/README.md b/README.md index 5674b90..49b9c39 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@
-# 🎨 TidyFactor Styler `v1.3.0` +# 🎨 TidyFactor Styler `v1.4.1` ### The Production Framework Styler, Surgical RTL Redesign & Anti-Slop UI Engine for AI Coding Agents Give **Google Antigravity, Claude Code, Cursor, OpenAI Codex, or Windsurf** a production-grade UI transformation engine that operates directly inside your live codebase — without inventing duplicate style layers, alien dependencies, or per-page CSS drift. @@ -90,13 +90,30 @@ Give **Google Antigravity, Claude Code, Cursor, OpenAI Codex, or Windsurf** a pr --- -## 🚀 Quick Start +## 🚀 Installation & Quick Start -### 1. Skill Injection via CLI +Choose your preferred installation method: +### Option A: Via TidyFactor CLI (Recommended) +Install directly using the official ecosystem package runner into your active workspace: ```bash -# Add Styler directly into your current project workspace -npx @tidyfactor/cli-styler add-skill +npx @tidyfactor/cli add styler +``` +*Or if you have the CLI installed globally (`npm i -g @tidyfactor/cli`):* +```bash +tidyfactor add styler +``` + +### Option B: Via Open Agent Skills Ecosystem (skills.sh / Vercel Labs) +Install using the universal multi-agent standard across all supported IDEs (Cursor, Antigravity, Claude Code, Windsurf, Trae, Codex): +```bash +npx skills add tidyfactor/styler +``` + +### Option C: Standalone Zero-Dependency Runner (NPM Direct) +Run the dedicated skill installer directly with automatic cache invalidation: +```bash +npx @tidyfactor/styler@latest ``` ### 2. Workspace Installation per AI Agent diff --git a/brand.json b/brand.json index 6c1ce29..e6b1293 100644 --- a/brand.json +++ b/brand.json @@ -1,6 +1,6 @@ { "name": "TidyFactor Styler", - "version": "1.4.0", + "version": "1.4.1", "publisher": "TidyFactor Ecosystem", "partner": "Alwkala Digital Agency (https://alwkala.com)", "contact": { diff --git a/dist/tidyfactor-styler.skill b/dist/tidyfactor-styler.skill deleted file mode 100644 index bc2258e..0000000 Binary files a/dist/tidyfactor-styler.skill and /dev/null differ diff --git a/package.json b/package.json index f7351a1..d95930e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tidyfactor/styler", - "version": "1.4.0", + "version": "1.4.1", "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 f99928d..91d6831 100644 --- a/references/memory/component-anatomy.md +++ b/references/memory/component-anatomy.md @@ -43,3 +43,13 @@ If the only difference from an existing component is a token value (a different ## Reuse-before-create is mandatory Before designing anything new for a `component`, `section`, or `page` task, inventory what the target project already has. Production work compounds inconsistency fast if every task quietly adds a near-duplicate component instead of extending the existing one. + +--- + +## Master Component Pattern Registry (Production Quick-Reference) +For operational tables, token selectors, and anti-cliché variants across all 7 core component families, consult: +- [`component-matrix-registry.md`](file:///c:/wamp64/www/TidyFactor/Skills/Skills-LAB/tidyfactor-styler/references/memory/component-matrix-registry.md) + +*Architectural Single Source of Truth (SSOT)*: Full token schemas, deep SVG detailing, and design foundations are maintained authoritatively in `tidyfactor-design/references/memory/` (`21-` through `27-`). + + diff --git a/references/memory/component-matrix-registry.md b/references/memory/component-matrix-registry.md new file mode 100644 index 0000000..d91acab --- /dev/null +++ b/references/memory/component-matrix-registry.md @@ -0,0 +1,168 @@ +# Component Matrix Registry (Production Quick-Reference) + + +> **Single Source of Truth (SSOT) Notice**: +> The full token schemas, detailed architectural anatomy, and SVG detailing recipes for all core UI components reside authoritatively in **`tidyfactor-design/references/memory/`** (`21-eyebrow-kicker-matrix.md` through `27-list-indicator-matrix.md`). +> This registry serves as the **operational cheat sheet and styling index** for production implementation and quality auditing inside `tidyfactor-styler`. + +--- + +## 1. Eyebrows & Kickers (16 Alternatives) +*SSOT: `tidyfactor-design/references/memory/21-eyebrow-kicker-matrix.md`* + +| # | Variant | Family | Personality | Operational CSS Selector / Token | +|---|---------|--------|-------------|----------------------------------| +| 01 | Uppercase Kicker | Containerless | Luxury / Editorial | `.eyebrow-kicker` (tracking: 0.12em; uppercase) | +| 02 | Numbered Index | Containerless | Structured / Swiss | `.eyebrow-index` (counter / `01 —`) | +| 03 | Monospace Annotation | Containerless | Dev-native | `.eyebrow-mono` (`//` or `$`) | +| 04 | Slash Category Path | Containerless | Archival | `.eyebrow-slash` (`CAT / SUBCAT`) | +| 05 | Ghost Chip | Minimal Container | Refined / Quiet | `.chip-ghost` (1px subtle border) | +| 06 | Hard-Edge Tag | Minimal Container | Brutalist / Bold | `.tag-hard` (border-radius: 0) | +| 07 | Status Dot Indicator | Minimal Container | Live / Active | `.badge-status` (pulsing 8px dot) | +| 08 | Highlight Marker | Minimal Container | Warm / Human | `.marker-highlight` (linear-gradient underline) | +| 09 | Rule-Kicker Lockup | Structural | Classic Print | `.lockup-rule` (horizontal inline rule) | +| 10 | Inline Border Accent | Structural | Institutional | `.accent-border-start` (`border-inline-start: 3px`) | +| 11 | Icon Lockup | Structural | Functional | `.eyebrow-icon` (16px icon + text gap: 8px) | +| 12 | Vertical Rail Label | Structural | Avant-garde | `.rail-label` (writing-mode: vertical-rl) | +| 13 | Corner Ribbon | Expressive | Promotional | `.ribbon-corner` (clip-path / 45deg) | +| 14 | Rotating Stamp Seal | Expressive | Crafted / Heritage | `.stamp-seal` (circular text badge) | +| 15 | Marquee Strip | Expressive | Energetic | `.eyebrow-marquee` (infinite scroll ticker) | +| 16 | Hand-Drawn Accent | Expressive | Personal | `.accent-drawn` (SVG underline draw) | + +--- + +## 2. Hero Motion Architecture (8 Choreographies) +*SSOT: `tidyfactor-design/references/memory/22-hero-section-matrix.md`* + +| # | Variant | Motion Signature | SVG Technique | Personality | +|---|---------|-----------------|---------------|-------------| +| 01 | Kinetic Split-Type | Char stagger + rise | Scribble stroke-draw | Confident SaaS | +| 02 | Scribble Signature | Scrub line-drawing | `getTotalLength` + dashoffset | Editorial / Human | +| 03 | Text-Mask Scene | Parallax inside type | `` + `` | Bold Agency | +| 04 | Organic Blob | Turbulence drift | `feTurbulence` + `feDisplacementMap` | Warm / Spatial | +| 05 | Aurora Grain | Drifting gradient mesh | Radial mesh + noise filter | Ambient Luxury | +| 06 | Orbit Field | Counter-rotation system | SVG groups (`+θ / -θ`) | Networked Tech | +| 07 | Blueprint Wireframe | Pinned scrub draw | Dashed strokes + measure tags | Dev-Tool / Infra | +| 08 | Pinned Horizontal | Scroll → X corridor | Panel dividers + rules | Product Showcase | + +*Rule:* Every hero must combine exactly **1 entrance**, **1 scroll behavior**, and **1 ambient layer**. + +--- + +## 3. Cards & Containers (16 Alternatives) +*SSOT: `tidyfactor-design/references/memory/23-card-architecture-matrix.md`* + +| # | Variant | Family | Personality | CSS & Structural Architecture | +|---|---------|--------|-------------|-------------------------------| +| 01 | Double-Hairline Frame | A. Editorial | Archival | Concentric 1px hairlines with 4px gap (`::after`) | +| 02 | Passe-Partout Inset | A. Editorial | Museum | Mat board padding (24px) around recessed viewport | +| 03 | Museum Plaque Card | A. Editorial | Solid | Rigid plate with corner fixing pips/screws | +| 04 | Border-Fade Vignette | A. Editorial | Ethereal | CSS `mask-image: radial-gradient(...)` border fade | +| 05 | Low-Relief Debossed Stone | B. Tactile | Ancient | Dual inset shadow (`inset 2px 2px`, `inset -2px -2px`) | +| 06 | Beveled Chiseled Edge | B. Tactile | Industrial | 45° highlight border-top/start + shadow border-bottom/end | +| 07 | Frosted Obsidian Slab | B. Tactile | Sovereign Glass | `backdrop-filter: blur(28px) saturate(180%)` | +| 08 | Textured Papyrus Card | B. Tactile | Scholarly | Low-opacity (0.04) SVG `feTurbulence` grain overlay | +| 09 | Book-Spine Asymmetric | C. Architectural | Literary | Gutter spine (`writing-mode: vertical-rl`) + main content | +| 10 | Chamfered Notched Corner | C. Architectural | Cybernetic | `clip-path: polygon(...)` 45° corner cut | +| 11 | Cantilevered Accent Bar | C. Architectural | Modernist | Beam overhanging container by 8–12px | +| 12 | Layered Step-Elevation | C. Architectural | Dimensional | Background offset tier (`transform: translate(6px, 6px)`) | +| 13 | Crosshair Reticle HUD | D. Data-Dense | Telemetry | Corner `+` reticles at all 4 vertices | +| 14 | Status Telemetry Rail | D. Data-Dense | Operational | Top header rail with status LED + metric ticker | +| 15 | Terminal Window Box | D. Data-Dense | Authentic | macOS/Linux terminal bar with control pips | +| 16 | Expandable Drawer Card | D. Data-Dense | Interactive | Summary card with accessible `