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

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

Most AI UI prompts output generic HTML with inline styles, uncalibrated utility bloat, or alien libraries that clash with your existing repository.

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.

🚀 Quick Start

1. Skill Injection via CLI

# Add Styler directly into your current project workspace
npx @alwkala/tidyfactor-styler add-skill

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)"]