TidyFactor Styler skill
A skill that edits UI inside live code with no extra dependencies: components, sections, pages and RTL with Arabic for your stack
- 121 ★ on the repository
- Last commit
Extended access
Why this level
- The skill edits UI files in the project and writes a cache to `.tidyfactor`, and a separate assets command processes images.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/tidyfactor-stylerDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill edits UI files in the project and writes a cache to `.tidyfactor`, and a separate assets command processes images.
This is third-party code. Review the repository files before installing.
What it does
TidyFactor Styler is an agent skill that reworks UI in an existing project on a conform-to-the-project principle. It detects the active framework, inspects existing design tokens and writes components, sections and pages in the project's own style: its names, Tailwind configuration and conventions, with no parallel CSS system. The command dispatcher offers thirteen commands: `brief`, `component`, `section`, `page`, `redesign`, `layout`, `nav-footer`, `typography`, `palette`, `assets`, `rtl`, `motion` and `styles`. The skill keeps an eight-state component matrix: default, hover, active, focus, disabled, loading, empty and error. A separate workflow converts directional CSS to logical properties and fixes icon mirroring for Arabic and other right-to-left languages.
Who it is for. Frontend developers and agencies who need a redesign in a live project without foreign CSS, especially with Arabic and other RTL languages.
Good fit when
- A component must be updated without touching neighbouring widgets or adding new styles.
- A site gets an Arabic version and directional CSS must move to logical properties.
- A page must be assembled from a layout archetype with navigation and footer matched to the product.
- A palette is checked for WCAG AA contrast and semantic token scales are built.
Not a fit when
- You need a prototype from scratch: the ecosystem has a separate tidyfactor-design skill for that.
- You need a new framework skeleton: other TidyFactor skills cover that.
- The project has no styling or tokens of its own: the skill has nothing to hold on to.
Example request
Run brief for this project, then rework the product card component to our Tailwind and add all eight states.Limitations
The skill suits real projects and relies on the detected stack, so a `brief` command that stores the baseline in `.tidyfactor/styler-brief.md` is needed before work. It installs through the TidyFactor CLI, the skills installer or an npm package. The README is written in a promotional key and the claimed architect scores and comparisons should be read as the author's statements. Documentation is translated into Arabic, Persian, Spanish, Portuguese, Chinese, German and French. The Apache-2.0 license appears in the badge. The latest commit is from October 2026.
How to disable. Delete the `tidyfactor-styler` skill folder from the agent's skills directory and the `.tidyfactor/styler-brief.md` file from the project. Remove the package with `npm uninstall` if installed globally.
FAQ
How do I install the skill?
With `npx @tidyfactor/cli add styler`, or `npx skills add tidyfactor/styler`, or the standalone run `npx @tidyfactor/styler@latest`.
Which stacks are supported?
The skill detects the project framework and switches between them, with React, Next.js and PHP among those mentioned. The full list is in the supported stacks section of the README.
What does the rtl command do?
Runs an RTL audit and fix: replaces directional CSS with logical properties, fixes icon flipping and tunes the font hierarchy for Arabic.
What is the eight-state matrix?
Every component is guaranteed default, hover, active, focus, disabled, loading, empty and error states.
How does the skill avoid duplicate styles?
The `brief` command detects the framework and existing tokens, and a component redesign touches only its definition and usages. No parallel CSS system is created.
Discussion
No questions or reviews yet.
Related
SkillsA skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
27 oxlint rules for Tailwind CSS v4 plus a skill and a Claude Code plugin: class typos, conflicts and deprecated utilities.
A skill of ready CSS transitions for web interfaces: modals, dropdowns, toasts, loaders and dozens of other animations with matching rules
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| TidyFactor Styler (this card) | no | 121 | |
| Impeccable | no | 108,873 | design and UI review commands; Styler stays within the existing stack and handles RTL for Arabic separately |
| Frontend Design (Ilm-Alan) | no | 167 | a skill for attractive frontend; Styler adapts to your tokens and creates no parallel CSS |
README in short
The README describes thirteen commands, eight workflows, supported stacks, Arabic and RTL and the result verification method. A table lists related TidyFactor projects with npm packages.