name: tidyfactor-styler description: "Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL). Operates directly inside existing codebases across React/Next.js, PHP, WordPress, and Vanilla HTML/CSS/JS. Trigger on commands 'brief', 'component', 'section', 'page', 'redesign', 'typography', 'palette', 'layout', 'rtl', 'motion', 'styles', or requests for UI polishing and RTL refactoring."

TidyFactor Styler (Production Design — Any Stack)

A command dispatcher for production-stage visual/interaction design work performed inside a real, already-existing codebase. Unlike tidyfactor-design (which builds a standalone, zero-build clickable prototype under its own locked design-system/ folder), this skill never invents its own architecture — it reads the target stack's existing conventions and produces output that belongs there.

What this is, precisely

The deliverable is always one of: a new component, a new section, a new page, or a redesign of an existing component/section/page — written in the target codebase's actual language and conventions (JSX+Tailwind for a Next.js app, a Plates partial for a TidyFactor PHP Micro project, a WordPress block/template/page-builder structure, or plain HTML/CSS/JS for a static site). The design judgment (typography, motion, design-style direction, and — as this skill's deepest specialization — Arabic/RTL correctness) is stack-agnostic and shared across all of it.

Arabic/RTL Execution Requirement. Any component, section, or page carrying Arabic content must implement memory/rtl-css-engineering.md and memory/typography-arabic.md — enforcing direction-agnostic logical properties CSS, letterform-aware font sizing, and Arabic-native layout structure.

When this is the right tool vs. others:

• Exploring a direction fast, before real content/data exists, as a standalone clickable demo → tidyfactor-design.
• Scaffolding a brand-new project's folder structure and stack from zero → the matching track skill (tidyfactor-html, tidyfactor-next, tidyfactor-php).
• Documenting codebase architecture, API specifications, or generating a Docsify site → tidyfactor-doc.
• Building, auditing, or refactoring skills according to master governance rules → tidyfactor-skill-architect.
• Styling, restyling, or adding to something that already exists and already ships → this skill.

Commands

Read only the command file that matches the request. A command loads its workflow (if it has one) and its listed memory files — nothing else, until the workflow itself calls for more. component, section, page, and redesign additionally load memory/rtl-css-engineering.md and memory/typography-arabic.md whenever the target carries Arabic/bilingual content.

Non-negotiable constraints (every command)

1. Detect before designing. Before producing any output, identify the target stack (React/Next.js, PHP Flight/Medoo, WordPress, or plain HTML/CSS/JS) from the files the user shows or names. If it's ambiguous, ask — never guess and silently pick one.
2. Conform, don't compete. Match the existing codebase's naming, file layout, and styling approach (Tailwind classes if the project uses Tailwind, the project's existing CSS methodology if not, the project's existing component patterns). Never introduce a second, parallel styling system into a codebase that already has one.
3. If the target stack is a TidyFactor production track (PHP Micro, PHP Kernel, Webletz Core, tidyfactor-html) its locked architecture wins. This skill supplies the design decision (layout, type, motion, color); it never overrides that skill's file/module contract. Read that skill's own SKILL.md constraints before writing into its codebase.
4. Component and section redesigns are scoped. A component redesign touches only that component's definition and its own usages — never neighboring components. A section redesign touches only that section's markup/styles — never global nav, footer, or unrelated sections. Scope creep is a failure, not thoroughness.
5. Arabic / RTL First-Class Integration. If the content is Arabic or bilingual, typography and layout decisions must be configured for Arabic at launch (typography-arabic.md) using logical-properties CSS (rtl-css-engineering.md), applying the per-component checklist for icons, modals, tables, and animations.
6. Brand Single Source of Truth. If brand.json is present at the project root, read memory/brand-tokens.md and map tokens directly into CSS variables or Tailwind theme configs.
7. Every deliverable passes memory/quality-bar.md before being called finished.

Compatible with Antigravity, Claude Code, OpenAI Codex, and OpenCode.

🎨 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.

English • العربية • فارسی • Español • Português • 简体中文 • Deutsch • Français

📚 Table of Contents

• 🎯 Why TidyFactor/Styler
• 🚀 Quick Start
• 🌟 Value Proposition: When to Use Styler?
• ⚡ 13-Stage Command Dispatcher Architecture
• 🛠️ The 8 Production Workflows
• 🌐 Supported Production Stacks
• 🇸🇦 Native Arabic & Surgical RTL Engineering
• 🛡️ Anti-Slop Governance & Quality Bar
  • 1. The 6-Axis Pre-Emit Self-Critique (P, H, E, S, R, V)
  • 2. The 8-State Component Interaction Matrix
• ❓ FAQ
• 🏛️ The TidyFactor Ecosystem
• 🏛️ TidyFactor Skill Methodology & Governance
• 🤝 Contributing
• 👨‍💻 Support
• 📜 License

🎯 Why TidyFactor/Styler

[!IMPORTANT] The Styler Manifesto: Why Raw AI Codegen Produces Bland UI
Raw LLMs default to the statistical mean: generic purple gradients, missing interactive micro-states, arbitrary inline styles, and broken directional CSS margins (mr-*, ml-*).
TidyFactor Styler is the surgical in-codebase antidote: It enforces a zero-drift, framework-native contract that refactors live components, injects production-grade RTL ergonomics, and respects your existing design tokens without breaking upstream architecture.

TidyFactor/Styler enforces a strict "Conform, Don't Compete" engineering contract: it detects your project's active framework, inspects existing design tokens, and outputs stack-native components that look like your senior frontend architect wrote them.

⚡ The Before & After Difference: Raw AI Prompting vs. Styler In-Codebase Polish

```html
<!-- ❌ RAW AI GENERATION (Generic, Fragile, LTR-Hardcoded) -->
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded mr-3 shadow-lg flex items-center gap-2">
  <span>Submit Order</span>
  <svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24"><!-- hardcoded LTR arrow --></svg>
</button>
<!-- Flaws: Hardcoded mr/ml breaks RTL; Generic purple gradient; Missing focus-visible, active, disabled, and loading states; Ignores project design tokens -->
```
<!-- slide -->
```html
<!-- ✅ TIDYFACTOR STYLER POLISH (Production-Grade, Token-Aligned, Native RTL) -->
<button class="btn-primary inline-flex items-center justify-center gap-2 font-medium transition-all duration-150 ease-out focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:outline-none disabled:opacity-50 disabled:pointer-events-none data-[state=loading]:cursor-wait data-[state=loading]:opacity-80 active:scale-[0.98] me-3">
  <span>تأكيد الطلب / Submit Order</span>
  <svg class="w-4 h-4 rtl:rotate-180 transition-transform" aria-hidden="true" viewBox="0 0 24 24"><!-- bidi-aware --></svg>
</button>
<!-- Strengths: Native logical properties (me-3); Bidi-safe icon rotation; Full 8-state interaction matrix; Strictly scoped to existing design tokens -->
```

🚀 Installation & Quick Start

Choose your preferred installation method:

Option A: Via TidyFactor CLI (Recommended)

Install directly using the official ecosystem package runner into your active workspace:

npx @tidyfactor/cli add styler

Or if you have the CLI installed globally (npm i -g @tidyfactor/cli):

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):

npx skills add tidyfactor/styler

Option C: Standalone Zero-Dependency Runner (NPM Direct)

Run the dedicated skill installer directly with automatic cache invalidation:

npx @tidyfactor/styler@latest

2. Workspace Installation per AI Agent

Once installed, simply invoke /brief, /component, /section, or /redesign inside your AI agent chat to begin surgical UI engineering!

🌟 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-next, tidyfactor-php, etc.)"]
    Intent -->|"Real existing codebase UI work"| ST["💎 tidyfactor-styler<br/>(Production Component/Section/Page UI)"]

⚡ 13-Stage Command Dispatcher Architecture

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

graph LR
    SK["💎 SKILL.md<br/>(Dispatcher Router)"]
    SK --> C0["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 | Outpu