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.

120 stars 11 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add TidyFactor/Styler --skill tidyfactor-styler

Manual install

git clone --depth 1 https://github.com/TidyFactor/Styler.git /tmp/Styler
mkdir -p ~/.claude/skills
cp -r /tmp/Styler/. ~/.claude/skills/tidyfactor-styler

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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`.

Read the full skill on GitHub

Details

Skill name: tidyfactor-styler
Repository: TidyFactor/Styler
Repo updated: 24 October 2026

FAQ

What does the Tidyfactor Styler skill do?

How do I install the Tidyfactor Styler skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add TidyFactor/Styler --skill tidyfactor-styler. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Tidyfactor Styler popular?

It lives in TidyFactor/Styler, which has 120 GitHub stars and 11 forks.

Related skills

Nerv UI

mdrbx/nerv-ui

Build original, accessible React command-center interfaces with the published @mdrbx/nerv-ui component library. Use for dashboards, monitoring terminals, operational tools, authentication screens, or sharp industrial HUD-style UI in React, Vite, or Next.js.

Frontend & DesignIn 1 list

Oil Frontend

139

oil-oil/oil-frontend

当任务需要实现、修改、重构或评审产品前端的可见界面、交互行为、前端状态与数据流、组件或样式组织时主动使用，无需用户点名；也用于这些前端行为的测试与验证策略。适用于页面、表单、列表、弹窗、响应式、样式与动效实现和前端代码归属调整。不用于视觉风格、配色、排版与设计方向这类设计判断，也不用于纯后端、构建部署、依赖升级、只修导入路径的机械改动、仅操作现有网站、仅生成设计图片或讨论本 Skill；用户明确要求不使用时不触发。

Frontend & Design

Anti UI Slop

uizze/uizze

Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".

Frontend & DesignIn 1 list

Design Auditor

Ashutos1997/claude-design-auditor-skill

Audit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code superpowers across all 19 categories: aria, focus, contrast, tokens, responsive, motion, forms, navigation, spacing, states, microcopy, elevation, iconography/SVG. Flags color blindness risk. Audits dark patterns, ethical design, Nielsen's heuristics. Outputs before/after diffs, developer handoff reports, wireframe-to-spec. English and Korean. Triggers on: check my design, review my UI, audit my layo

Frontend & DesignIn 1 list16

Cinematic UI

akseolabs-seo/cinematic-ui

Direct a website the way a film is made: cast a director and a film, choose the medium the film calls for (photoreal 3D, hand-drawn, ink wash, print, pixel, neon, type, photography…), cast a lead, ask for the assets, write a shot list for every section, then shoot it with a scroll-driven camera, designed cuts, a grade, and a screening pass on rendered frames. Use for Awwwards / Framer-grade landing pages, brand, product, portfolio and studio sites, immersive or WebGL / 3D sites, scrollytelling, "cinematic", "film style", "director style", "電影感", "導演風格", "分鏡", "像拍電影一樣做網站", a director's colour o

Frontend & Design24

Persian Motion Director

148

atmirrr/persian-motion-director

Direct and build professional motion design (promo and launch films, kinetic typography, animated explainers, social clips, title sequences) with correct Persian/Farsi and right-to-left typography, in Remotion or plain web code. Use this skill whenever the user wants a video, animation, motion graphics, teaser or animated text that contains Persian, Farsi, Arabic-script or RTL text, and whenever they say a motion piece looks "default", "like a slideshow", "AI-made" or "not pro", or that the Persian looks off, broken or disconnected, even if they never say "motion design". It brings the anti-sl

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.