Skip to content

💎 TidyFactor Styler v1.1.0

Production-Stage Visual Design, CDL Decision Engine & In-Codebase UI Engineering Suite

The official production styling & UI transformation skill for the TidyFactor Ecosystem across all modern web frameworks.

npm version License: Apache-2.0 RTL Ready Anti-Slop Certified Architect Score

✨ Ecosystem Hub • ⚡ 13 Slash Commands • 🛠️ 8 Production Workflows • 🌐 Supported Stacks • 🇸🇦 Arabic & RTL Engineering

[!NOTE] TidyFactor Styler is an opinionated, production-grade AI Agent Skill and UI engineering engine designed for real, live codebases. Unlike standalone prototyping engines, Styler operates directly inside existing production stacks (React/Next.js App Router, PHP Flight/Medoo, WordPress blocks, or vanilla HTML/CSS/JS) without introducing duplicate style layers, alien dependencies, or per-page CSS drift.

🌟 Value Proposition: When to Use Styler?

graph TD
    Intent{"What are you building?"}
    Intent -->|"Standalone prototype from zero"| D["🎨 tidyfactor-design<br/>(Zero-build HTML prototype)"]
    Intent -->|"New framework skeleton"| S["🏗️ Architecture Track<br/>(tidyfactor-php-micro, etc.)"]
    Intent -->|"Real existing codebase UI work"| ST["💎 tidyfactor-styler<br/>(Production Component/Section/Page UI)"]
For Frontend Developers For Fullstack & Agency Teams For AI Coding Agents
Conform, Don't Compete: Adopts your existing naming, Tailwind config, and styling conventions without creating a parallel CSS system. Full Stack Agnostic: Seamlessly switches between Next.js, PHP, WordPress, and Vanilla stacks with zero manual prompt calibration. Token-Efficient Dispatcher: Lightweight SKILL.md entry router loads only ~350 tokens at launch, pulling memory only when required.
Contextual Decision Layer (CDL): Pre-flight design elicitation halts execution before code emission when architectural decisions are ambiguous. Arabic / RTL First-Class: Automated logical CSS properties (ms-*, pe-*, start-*), letterform-aware font scaling, and bidi isolation. Anti-Slop 7-Axis Critique: Evaluates P, H, E, S, R, V, and D (Decision Alignment) to prevent generic AI UI tells.
8-State Interaction Matrix: Guarantees default, hover, active, focus, disabled, loading, empty, and error states for all components. Brand SSOT Integration: Automatically reads brand.json and maps design tokens to native CSS custom properties or framework theme vars. Deterministic Checklists: Every workflow terminates with an explicit, quantifiable validation checklist before shipping.

⚡ Command Registry & Architecture

tidyfactor-styler exposes 13 precision slash commands organized into a modular dispatch architecture:

graph LR
    SK["💎 SKILL.md<br/>(Dispatcher Router)"]
    SK --> C0["Pre-Flight Discovery<br/>(brief)"]
    SK --> C1["Component Operations<br/>(component)"]
    SK --> C2["Surface Operations<br/>(section, page, redesign)"]
    SK --> C3["Architecture & Shell<br/>(layout, nav-footer)"]
    SK --> C4["Design System & Brand<br/>(typography, palette, assets, styles)"]
    SK --> C5["Engineering Quality<br/>(rtl, motion)"]
Command User Intent What It Loads Output & Value
brief "Establish design brief / project baseline" workflows/brief.md + memory/decision-points.md Generates .tidyfactor/design-brief.md cache for zero-friction downstream workflows.
component "Create / Redesign this component" workflows/component-create.md or component-redesign.md + component-anatomy.md + decision-points.md + stacks/*.md Production React/PHP/HTML component with 8-state coverage & CVA variants.
section "Create / Restyle this section" workflows/section-create.md or section-redesign.md + layout-archetypes.md + nav-footer-catalog.md + decision-points.md Scoped section surface with responsive rhythm and clean visual hierarchy.
page "Build a new production page" workflows/page-create.md + layout-archetypes.md + nav-footer-catalog.md + decision-points.md + stacks/*.md Complete page assembly strictly adhering to framework file conventions.
redesign "Redesign this existing page" workflows/page-redesign.md + layout-archetypes.md + nav-footer-catalog.md + quality-bar.md + decision-points.md High-impact visual overhaul with zero functional regression or broken state.
layout "Select layout archetype / macrostructure" memory/layout-archetypes.md + stacks/*.md Matches product context to 1 of 8 macrostructure archetypes (editorial, interface, etc.).
nav-footer "Select navigation & footer archetypes" memory/nav-footer-catalog.md + typography-arabic.md + rtl-css-engineering.md Chooses from N1–N9 navigation and Ft1–Ft8 footer archetypes with RTL alignment.
typography "Pick/pair typography, incl. Arabic" memory/typography-arabic.md Applies 7 mood-routed font pairings (Cairo, Tajawal, El Messiri, Inter, Outfit).
palette "Extract color palette & WCAG AA contrast" memory/brand-tokens.md + memory/asset-tooling.md Generates semantic token scales with automated WCAG 2.1 AA contrast scores.
assets "Asset hygiene & image optimization" memory/asset-tooling.md + memory/quality-bar.md Compresses images, inspects dimensions, and removes backgrounds via Python tooling.
rtl "Audit & fix RTL / Arabic correctness" workflows/rtl-audit-fix.md + memory/rtl-css-engineering.md Converts directional CSS to logical properties and fixes icon flipping rules.
motion "Add / review motion and interaction" memory/motion-principles.md Orchestrates Framer Motion / Alpine transitions with prefers-reduced-motion a11y.
styles "Choose a design direction / style movement" memory/design-styles.md Directs UI to a specific aesthetic movement (Modern SaaS, Editorial, Swiss, etc.).

🛠️ The 8 Production Workflows

Every task follows a strict, single-outcome workflow ending in an automated validation checklist:

  1. brief.md: Interactive discovery interview \(\rightarrow\) Decision Points resolution \(\rightarrow\) .tidyfactor/design-brief.md baseline caching.
  2. component-create.md: Step 0 Design Read & CDL Resolution \(\rightarrow\) Variant & State Mapping \(\rightarrow\) Stack-Native Implementation \(\rightarrow\) 7-Axis Critique \(\rightarrow\) Verification.
  3. component-redesign.md: Current State Audit \(\rightarrow\) Intent & Direction Selection \(\rightarrow\) Scoped Refactoring \(\rightarrow\) Zero Regression Check.
  4. section-create.md: Macrostructure Alignment \(\rightarrow\) Layout Archetype Rhythm \(\rightarrow\) Inner Component Composition \(\rightarrow\) Responsive Polish.
  5. section-redesign.md: Section Scope Isolation \(\rightarrow\) Hierarchy Elevation \(\rightarrow\) Visual Anchor Refresh \(\rightarrow\) Mobile Grid Audit.
  6. page-create.md: Page Archetype Blueprint \(\rightarrow\) Nav/Footer Selection \(\rightarrow\) Section Assembly \(\rightarrow\) SEO & Metadata Injection.
  7. page-redesign.md: Global Visual Cohesion \(\rightarrow\) Conversion Path Optimization \(\rightarrow\) Typography Harmony \(\rightarrow\) Performance Budget.
  8. rtl-audit-fix.md: Directional CSS Elimination \(\rightarrow\) Logical Properties Refactor \(\rightarrow\) Bi-directional Icon Inversion \(\rightarrow\) Font Hierarchy Tuning.

🧠 Contextual Decision Layer (CDL v1.0)

When high-impact design choices are ambiguous, the Contextual Decision Layer (decision-points.md) resolves them before code emission:

graph TD
    Trigger["Task Triggered<br/>(/page, /section, /component)"] --> Check{"Brief Cached in<br/>.tidyfactor/design-brief.md?"}
    Check -->|"Yes"| Exec["Execute Silently<br/>(Apply Cached Direction)"]
    Check -->|"No"| Direct{"Direct Invocation?<br/>(/styles, /typography)"}
    Direct -->|"Yes"| PresentAll["Present Full Catalog Options"]
    Direct -->|"No"| Detect["Evaluate Boolean Skip Signals"]
    Detect --> Batch["Batch Max 3 Questions (D1 > D3 > D2)"]
    Batch --> Halt["Halt & Prompt User via Terminal Hard-Stop"]
    Halt --> SaveBrief["Write .tidyfactor/design-brief.md"]
    SaveBrief --> Exec
  • Zero SSOT Duplication: Protocols reference existing SSOT memory catalogs without cloning options.
  • Direct Invocation Invariant: Explicit command calls never skip options.
  • Zero-Regression Redesign Bias: Redesign workflows silently preserve existing baseline styles unless explicitly instructed otherwise.
  • Single-Round Batching: Max 3 questions per round with priority hierarchy (D1 > D3 > D2 > D4 > D5).

🛡️ Anti-Slop Governance & 7-Axis Quality Bar

To prevent generic, repetitive "AI-generated" UI artifacts, every output must satisfy the 7-Axis Pre-Emit Self-Critique:

/* Pre-emit critique: P5 H5 E5 S5 R5 V5 D5 */
P (Purpose):            Is this component solving the specific domain goal? (1-5)
H (Hierarchy):          Is there one obvious visual anchor with distinct levels? (1-5)
E (Execution):          Are all 8 interactive states explicitly implemented? (1-5)
S (Stack Native):       Does it match project naming, Tailwind config, and types? (1-5)
R (RTL Ready):          Are all spacing, padding, and icons direction-agnostic? (1-5)
V (Visual Soul):        Does it avoid generic purple hero gradients and generic AI tells? (1-5)
D (Decision Alignment): Does it strictly conform to the confirmed design-brief.md baseline? (1-5)
Overall Score: Must be ≥ 30/35 before code emission.

🚀 Installation & Usage

1. Add Skill to Your Repository via NPX

# Install tidyfactor-styler into your current workspace
npx @tidyfactor/cli-styler add-skill

2. Manual Copy into AI Agent Workspace

Copy the tidyfactor-styler folder directly into your workspace agent directory: - Google Antigravity: .agents/skills/tidyfactor-styler/ - Claude Code: .claude-skill/skills/tidyfactor-styler/ - Cursor / Windsurf / Codex: .agents/skills/tidyfactor-styler/

🏛️ TidyFactor Skill Methodology & 8/8 Governance

tidyfactor-styler achieves 100% Compliance (8/8 Pass) under the TidyFactor Skill Architect Specification:

  1. ✅ Dispatcher Discipline: Lightweight SKILL.md routing table (~350 tokens).
  2. ✅ One Workflow = One Outcome: 7 deterministic workflows with validation checklists.
  3. ✅ Operational Memory: Zero narrative prose; pure actionable technical matrices.
  4. ✅ No Empty Structures: Zero empty placeholder folders.
  5. ✅ Philosophy Isolation: Technical execution separated from brand rationales.
  6. ✅ Trigger-Justified Growth: Modular files added strictly per verified triggers.
  7. ✅ Anti-Slop Quality Bar: Mandatory 6-axis pre-emit critique and 16 quality rules.
  8. ✅ Cross-Platform Parity: Identical execution across Antigravity, Claude Code, Cursor, and Codex.

🏛️ TidyFactor Ecosystem Architecture

TidyFactor is a modular web architecture and AI coding agent skill ecosystem built on clear separation of concerns across the product lifecycle:

TidyFactor Organization (github.com/TidyFactor)
│
├── Governance & Architecture
│   └── Skill-Architect → Governance / "Rule"     (Master Skill Architecture & Quality Governance Engine)
│
├── Design Skills
│   ├── Cinematic       → Experience / "Wow"      (Apple × Cartier Scroll-Driven Landing Pages)
│   ├── Design          → Prototype / "Build"     (Code-Native UI Design Engine & Figma Alternative)
│   └── Styler          → Production / "Ship"     (Framework Styler & RTL Polish Engine)
│
├── Documentation & Knowledge
│   └── Doc             → Knowledge / "Record"   (Codebase Documentation Builder & Docsify Engine)
│
├── Development Skills
│   ├── Next            → Multi-Tenant SaaS       (Next.js 16, React 19, Supabase RLS & Dev-Perf)
│   ├── HTML            → Content & Static        (Semantic SEO & Static Platform Starter)
│   ├── HTMX            → Hypermedia              (Server-Driven Micro-Interactions)
│   ├── JS              → Vanilla SPA             (Framework-Free Reactive ES Modules)
│   └── PHP             → Server-Rendered         (Modern PHP 8.x Component UI & Architecture)
│
└── Growth Skills
    └── Marketing       → Growth / Revenue        (Direct Response, Pillar SEO & Content Lifecycles)

💎 Frontend Triad

                TidyFactor
                    │
          ┌─────────┼─────────┐
          │         │         │
      Cinematic   Design    Styler
          │         │         │
      Experience Prototype Production
          │         │         │
       "Wow"      "Build"   "Ship"

📦 Community Package & Skill Parity (The 11 Official Skills)

Track Category GitHub Repository Agent Skill NPM Package
Skill-Architect Governance TidyFactor/Skill-Architect tidyfactor-skill-architect @tidyfactor/skill-architect
Cinematic Design TidyFactor/Cinematic tidyfactor-cinematic @tidyfactor/cinematic
Design Design TidyFactor/Design tidyfactor-design @tidyfactor/design
Styler Design TidyFactor/Styler tidyfactor-styler @tidyfactor/styler
Doc Documentation TidyFactor/Doc tidyfactor-doc @tidyfactor/doc
Next Development TidyFactor/Next tidyfactor-next @tidyfactor/next
HTML Development TidyFactor/HTML tidyfactor-html @tidyfactor/html
HTMX Development TidyFactor/HTMX tidyfactor-htmx @tidyfactor/htmx
JS Development TidyFactor/JS tidyfactor-js @tidyfactor/js
PHP Development TidyFactor/PHP tidyfactor-php @tidyfactor/php
Marketing Growth TidyFactor/Marketing tidyfactor-marketing @tidyfactor/marketing

👨‍💻 Organization & Support

📜 License

Licensed under the Apache License 2.0. Copyright © 2026 TidyFactor & Alwkala.