菜单
Find and remove unused CSS in a Tideway project — classes defined in stylesheets but never referenced in markup. Use whenever the user wants to prune dead CSS, find unused styles or classes, clean up or slim a stylesheet, find orphaned BEM classes, or "tree-shake" hand-written CSS.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | prune |
| description | Find and remove unused CSS in a Tideway project — classes defined in stylesheets but never referenced in markup. Use whenever the user wants to prune dead CSS, find unused styles or classes, clean up or slim a stylesheet, find orphaned BEM classes, or "tree-shake" hand-written CSS. |
Prune finds CSS classes a project defines but no longer uses, so hand-written stylesheets don't accumulate dead rules. Tideway's conventions make this reliable: every selector is a single flat class, so each rule maps to exactly one class name, and the distinctive BEM names are unambiguous to search for.
Run the detector from the project root:
python scripts/find_unused.py <project-dir>
It scans every .css file for defined classes, searches the project's markup and scripts for each, and prints two groups: Unused (no reference anywhere) and Possibly dynamic (see below).
Report the findings to the user before changing anything. Group by file so the scope is clear.
Remove what's confirmed unused, on the user's go-ahead. Because a block's CSS lives together, removing an unused element or modifier is a local deletion; an entire unused block is its whole section or file. Removal is safe to do under version control.
A class can be referenced without its full name ever appearing in the source — when markup builds it at runtime: `card--${variant}`, clsx("card", isOpen && "card--open"), or other string construction. Such a class is live but looks unused to a text search.
The detector flags these as Possibly dynamic: the exact name isn't found, but its prefix (card--) does appear in the source. Never remove a class from this group on the report alone — open the construction site, confirm the full name can't be produced there, and only then treat it as dead. When unsure, keep it.
Writing new CSS is the style skill. Converting an existing project onto Tideway is the migrate skill.
Migrate an existing project's styling onto Tideway — converting Tailwind, CSS Modules, styled-components, or plain CSS to Tideway's design tokens and strict BEM. Use whenever the user wants to move a codebase, page, or component to Tideway, replace an existing design system or CSS framework with Tideway, or asks to "migrate to Tideway" / "convert this to Tideway".
Review CSS against the Tideway conventions — off-scale values, inlined tokens, direct palette use instead of semantic roles, and BEM or selector violations. Use whenever the user wants to review, lint, audit, or check CSS for Tideway compliance, or asks whether some CSS follows Tideway / the tokens / BEM.
Write CSS using the Tideway design system — fixed design tokens (colors, spacing, typography, breakpoints) and strict BEM class naming, in plain CSS with no framework. Use whenever writing or editing CSS in a project that uses Tideway, styling a new component or page, choosing colors/spacing/font sizes, or when the user mentions Tideway, design tokens, or BEM.