Agent skill

Tidyfactor Styler

Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL).

Apache-2.0Auto-check passedFrontend & Design

Install Tidyfactor Styler

skills CLI

$ npx skills add TidyFactor/Styler --skill tidyfactor-styler -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install TidyFactor/Styler tidyfactor-styler --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "tidyfactor-styler" agent skill from https://github.com/TidyFactor/Styler/tree/main into .claude/skills/tidyfactor-styler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tidyfactor-styler", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add TidyFactor/Styler --skill tidyfactor-styler -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install TidyFactor/Styler tidyfactor-styler --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "tidyfactor-styler" agent skill from https://github.com/TidyFactor/Styler/tree/main into .agents/skills/tidyfactor-styler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tidyfactor-styler", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add TidyFactor/Styler --skill tidyfactor-styler -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install TidyFactor/Styler tidyfactor-styler --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "tidyfactor-styler" agent skill from https://github.com/TidyFactor/Styler/tree/main into .cursor/skills/tidyfactor-styler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tidyfactor-styler", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add TidyFactor/Styler --skill tidyfactor-styler -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install TidyFactor/Styler tidyfactor-styler --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "tidyfactor-styler" agent skill from https://github.com/TidyFactor/Styler/tree/main into .gemini/skills/tidyfactor-styler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tidyfactor-styler", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install TidyFactor/Styler tidyfactor-styler

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add TidyFactor/Styler --skill tidyfactor-styler -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "tidyfactor-styler" agent skill from https://github.com/TidyFactor/Styler/tree/main into .github/skills/tidyfactor-styler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tidyfactor-styler", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add TidyFactor/Styler --skill tidyfactor-styler -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install TidyFactor/Styler tidyfactor-styler --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "tidyfactor-styler" agent skill from https://github.com/TidyFactor/Styler/tree/main into .opencode/skills/tidyfactor-styler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tidyfactor-styler", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: tidyfactor-styler
GitHub stars: 118
Token cost: ~1.7k tokens
SKILL.md length: 673 words
Files: 100 (incl. scripts, references, assets)
Skills in repo: 1
Repo updated: Sep 5, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL).

Works in 7 steps: Detect before designing. Before… → Conform, don't compete. Match the… → If the target stack is a TidyFactor… → …
Requests for UI polishing and RTL refactoring
SKILL.md covers What this is, precisely, Commands and Non-negotiable constraints…
Tasks that involve UI design

What it does

Tidyfactor Styler is an agent skill from TidyFactor/Styler. 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.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 102 other files, including scripts, reference files and assets (for example `.github/CODE_OF_CONDUCT.md`, `.github/CONTRIBUTING.md` and `.github/ISSUE_TEMPLATE/bug_report.yml`).

It sits in Frontend & Design, covering UI design, Refactoring and Typography. It works with PHP, Next.js, WordPress and React. The repository describes itself as: Production-Stage Visual Design & In-Codebase UI Engineering Suite. The licence is Apache-2.0.

When your agent uses it

Requests for UI polishing and RTL refactoring
Tasks that involve UI design
Tasks that involve Refactoring

Example prompts

“component”
“section”
“redesign”
“/tidyfactor-styler”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

Detect before designing. Before producing any output, identify the target stack (React/Next.js, PHP Flight/Medoo, WordPress, or plain…
Conform, don't compete. Match the existing codebase's naming, file layout, and styling approach (Tailwind classes if the project uses…
If the target stack is a TidyFactor production track (PHP Micro, PHP Kernel, Webletz Core, tidyfactor-html) its locked architecture wins…
Component and section redesigns are scoped. A component redesign touches only that component's definition and its own usages — never…
Arabic / RTL First-Class Integration. If the content is Arabic or bilingual, typography and layout decisions must be configured for Arabic…
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…
Every deliverable passes memory/quality-bar.md before being called finished.

What it can do on your machine

Read from SKILL.md and the folder at commit 7da8cff. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tidyfactor Styler loads about 1.7k tokens when it runs, and up to ~35k if it reads all its reference files. Until then it costs about 102 tokens; SKILL.md has 673 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~102
When it runs · the whole SKILL.md, loaded when a task matches: ~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~35k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from TidyFactor/Styler at commit 7da8cff, republished under its Apache-2.0 licence (© TidyFactor). 673 words, ~1,741 tokens.

Download SKILL.mdSave it as .claude/skills/tidyfactor-styler/SKILL.md (or your agent's skills folder). This skill also uses 99 other files; get the full folder from GitHub.

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

User intent	Command	What it loads
"Establish design brief / project baseline"	`references/commands/brief.md`	`workflows/brief.md` + `memory/decision-points.md`
"Redesign/create this component"	`references/commands/component.md`	`workflows/component-create.md` or `workflows/component-redesign.md` + `memory/component-anatomy.md` + `memory/decision-points.md` + matching `memory/stacks/*.md`
"Redesign/restyle this section"	`references/commands/section.md`	`workflows/section-create.md` or `workflows/section-redesign.md` + `memory/layout-archetypes.md` + `memory/nav-footer-catalog.md` + `memory/decision-points.md` + matching `memory/stacks/*.md`
"Build a new production page"	`references/commands/page.md`	`workflows/page-create.md` + `memory/layout-archetypes.md` + `memory/nav-footer-catalog.md` + `memory/decision-points.md` + matching `memory/stacks/*.md`
"Redesign this existing page"	`references/commands/redesign.md`	`workflows/page-redesign.md` + `memory/layout-archetypes.md` + `memory/nav-footer-catalog.md` + `memory/quality-bar.md` + matching `memory/stacks/*.md`
"Select layout archetype / macrostructure"	`references/commands/layout.md`	`memory/layout-archetypes.md` + matching `memory/stacks/*.md`
"Select navigation (N1–N9) & footer (Ft1–Ft8)"	`references/commands/nav-footer.md`	`memory/nav-footer-catalog.md` + `memory/typography-arabic.md` + `memory/rtl-css-engineering.md`
"Pick/pair typography, incl. Arabic"	`references/commands/typography.md`	`memory/typography-arabic.md`
"Extract color palette & WCAG AA contrast"	`references/commands/palette.md`	`memory/brand-tokens.md` + `memory/asset-tooling.md`
"Asset hygiene & image optimization"	`references/commands/assets.md`	`memory/asset-tooling.md` + `memory/quality-bar.md`
"Fix/build RTL correctness"	`references/commands/rtl.md`	`workflows/rtl-audit-fix.md` + `memory/rtl-css-engineering.md`
"Add/review motion and interaction"	`references/commands/motion.md`	`memory/motion-principles.md`
"Choose a design direction / style movement"	`references/commands/styles.md`	`memory/design-styles.md`

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.

Show full SKILL.md (264 more words)Show less

Non-negotiable constraints (every command)

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.
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.
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.
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.
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.
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.
Every deliverable passes memory/quality-bar.md before being called finished.

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

Files

SKILL.md and 99 other files (scripts, references, assets) in the repository root of TidyFactor/Styler.

SKILL.md
.gitattributes
.github/CODE_OF_CONDUCT.md
.github/CONTRIBUTING.md
.github/ISSUE_TEMPLATE/bug_report.yml
.github/ISSUE_TEMPLATE/config.yml
.github/ISSUE_TEMPLATE/feature_request.yml
.github/PULL_REQUEST_TEMPLATE.md
.github/SECURITY.md
.github/dependabot.yml
.github/workflows/ci.yml
.gitignore
.tidyfactor
AGENTS.md
CHANGELOG.md
LICENSE
README.ar.md
README.de.md
… and 82 more

Open the folder on GitHubat commit 7da8cff

Compare with similar skills

Tidyfactor Styler next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Tidyfactor Styler compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Tidyfactor Styler this skillTidyFactor/Styler	118	—	~1.7k	Automated safety check: Pass	Apache-2.0	1 mo ago
UI UX Pro Maxsaoudi-h/solar-icons	182	18 repos	~11k	Automated safety check: Notes	Custom licence	yesterday
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar	5.7k	1 repos	~1.1k	Automated safety check: Pass	MIT	14 days ago
UI UX Pro Maxfutureboard/futureboard-studio	106	—	~5.6k	Automated safety check: Pass	MIT	today
UI UX Pro Maxshobcoder/shob	577	—	~3.7k	Automated safety check: Pass	MIT	19 days ago
Premium UI Revampbuildfastwithai/gen-ai-experiments	785	—	~2k	Automated safety check: Pass	MIT	15 days ago

Similar skills

UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
182 GitHub starsUsed in 18 repos~11k tokens
Frontend & DesignAuto-check: notes
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
5.7k GitHub starsUsed in 1 repo~1.1k tokens
Frontend & DesignAuto-check passed
UI UX Pro Max
futureboard/futureboard-studio
Comprehensive design guide for web, mobile, and desktop applications.
106 GitHub stars~5.6k tokensUpdated today
Frontend & DesignAuto-check passed
UI UX Pro Max
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
577 GitHub stars~3.7k tokensUpdated 19 days ago
Frontend & DesignAuto-check passed
Premium UI Revamp
buildfastwithai/gen-ai-experiments
Audit and revamp existing web interfaces into polished, professional, product-specific experiences while preserving behavior and working within the current frontend stack.
785 GitHub stars~2k tokensUpdated 15 days ago
Frontend & DesignAuto-check passed
UI UX Pro Max
majiayu000/spellbook
A skill your agent uses when planning, building, designing, code review, refactor, fixing, improving, optimizing, enhancing, or checking UI/UX work.
286 GitHub stars~442 tokensUpdated today
Frontend & DesignAuto-check passed

Works with

Questions about Tidyfactor Styler

What does Tidyfactor Styler do?

Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL). Tidyfactor Styler is an agent skill from TidyFactor/Styler. Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL).

When should I use Tidyfactor Styler?

Tidyfactor Styler fits situations like: requests for UI polishing and RTL refactoring; tasks that involve UI design; tasks that involve Refactoring.

How do I install Tidyfactor Styler in Claude Code?

Run `npx skills add TidyFactor/Styler --skill tidyfactor-styler -a claude-code`. Or copy the skill folder (the TidyFactor/Styler repository) into .claude/skills/tidyfactor-styler in your project. Claude Code loads it when a task matches its description.

How do I install Tidyfactor Styler in Codex?

Run `npx skills add TidyFactor/Styler --skill tidyfactor-styler -a codex`. Or copy the skill folder (the TidyFactor/Styler repository) into .agents/skills/tidyfactor-styler in your project. Codex loads it when a task matches its description.

Can I use Tidyfactor Styler in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TidyFactor/Styler --skill tidyfactor-styler -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tidyfactor-styler, .gemini/skills/tidyfactor-styler, .github/skills/tidyfactor-styler and .opencode/skills/tidyfactor-styler in your project.

What does Tidyfactor Styler need to run?

SKILL.md names no scripts, command-line tools or credentials: Tidyfactor Styler is instructions for the agent only.

Does Tidyfactor Styler access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Tidyfactor Styler safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Tidyfactor Styler use?

Tidyfactor Styler is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tidyfactor Styler use?

About 1.7k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 33k tokens, read only when the agent opens those files.

What are the alternatives to Tidyfactor Styler?

Skills that share tags, products or a category with Tidyfactor Styler: UI UX Pro Max (saoudi-h/solar-icons, 182 stars), UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), UI UX Pro Max (futureboard/futureboard-studio, 106 stars) and UI UX Pro Max (shobcoder/shob, 577 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tidyfactor Styler?

TidyFactor (a GitHub organization) maintains it in TidyFactor/Styler, which has 118 GitHub stars. The repository was last updated on September 5, 2026.

Source: TidyFactor/Styler on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Tidyfactor Styler

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

TidyFactor Styler (Production Design — Any Stack)

What this is, precisely

Commands

Non-negotiable constraints (every command)

Files

Compare with similar skills

Similar skills

UI UX Pro Max

UI/UX Design System Advisor

UI UX Pro Max

UI UX Pro Max

Premium UI Revamp

UI UX Pro Max

Related

Questions about Tidyfactor Styler