Loading...
Loading...
Found 3 Skills
Refactoring pass — extracts repeated Tailwind class combos and markup into components, and lifts magic values into design tokens. Use when the codebase has obvious duplication, hardcoded hex values or pixel sizes, or when the user says "clean this up" / "extract components" / "tokenize styles". Invoke when the user asks for extract on their UI, or mentions 'extract' alongside design / UI / frontend work.
Keep React screens thin and reusable UI in its own package, separate from app screens. Triggers when authoring or restyling a page, route, screen, or component in an app that has a shared UI package — especially when a file is trending toward walls of plain <div className="..."> Tailwind markup. Bias toward reusing existing primitives in that package and graduating new reusable units into it, while avoiding premature over-extraction. Do NOT trigger for non-React code, for single-package apps with no shared UI package, or for editing the internals of one existing component. The package name is per-repo (see ADR-0013); do not require @repo/ui or @native/ui.
Extract reusable components, product patterns, and design tokens into a clearer design system with shared APIs, documented defaults, and better reuse. Use when the user wants to refactor repeated UI, consolidate buttons/cards/forms/sections, build a component library, or turn one-off values into reusable tokens.