refactor-ui-components

Installation
SKILL.md

Component-Library Adopter (shadcn-first) — refactor-chain · do-the-work (UI)

Bundle: refactor-chain (self-diagnosing, self-healing fix-it pipeline). Phase: do-the-work (UI lane) · Prerequisite: refactor-ui-tokens (and the visual/mobile pass) · Next: refactor-ui-a11y → refactor-code-principles. Adaptivity / conditional: activates on web UIs with bespoke primitives. shadcn/ui is the default registry; may use the shadcn MCP (mcp__Shadcn_UI__*) when connected to list/fetch components, blocks, and themes.

Purpose

Stop hand-rolling UI primitives. Replace bespoke buttons, inputs, dropdowns, dialogs, tabs, and the like with battle-tested registry components — shadcn/ui first — that already handle focus, keyboard, ARIA, and edge cases you'd otherwise reinvent (usually badly). Wire the registry's theme to the design tokens from refactor-ui-tokens so the adopted components look like your app, and keep every behavior identical so nothing the user does changes. This also covers the web-artifact pattern set: composing pages from registry blocks instead of one-off markup.

When to use

  • Trigger phrases: "adopt shadcn/ui", "use a real component library", "replace our custom components", "stop reinventing buttons/modals/dropdowns", "standardize our components", "build this from shadcn blocks", "these hand-made primitives are inconsistent".
  • After tokens and the visual/mobile pass exist, so the registry theme can be wired to real tokens.
  • When the diagnostic pass flags many divergent copies of the same primitive.
Installs
5
GitHub Stars
3
First Seen
Jul 6, 2026
refactor-ui-components — ahmedbenaw/refactor-chain