Subskill of the Feature Builder system. Audits existing components and design
tokens in a codebase to determine what can be reused, what needs a new
variant, and what must be built from scratch. These repos commonly use MUI (component library)
- Tailwind CSS (styling). Takes an enriched task breakdown (with Figma + API data) and
determine — for every component task — whether the team should reuse an existing
component, extend one with a new variant, or build from scratch.
This skill is a subskill within the Feature Builder pipeline. It runs after
figma-mapper and api-mapper have enriched the task breakdown. Its output feeds
into component-styling and page-architecture so they know exactly what to import
vs what to create.
Step 1: Build the component inventory
Before you can decide "reuse vs build," you need to know what already exists.
Scan these sources:
- MUI components in use — what's imported from
@mui/material in the repo.
MUI provides the common atoms/molecules out of the box: Button, IconButton,
TextField, Select, Checkbox, Radio, Switch, Chip, Avatar, Badge, Skeleton,
LinearProgress, CircularProgress, Divider, Card, Tabs, Stepper, Accordion,
Dialog, Drawer, Snackbar, Tooltip, Menu, Typography.
- Repo-local components — anything in
components/atoms/, components/molecules/,
components/organisms/, or equivalent. These are repo-specific wrappers on top
of MUI or fully custom components.
- Tailwind config tokens — colors, fonts, spacing, breakpoints, border-radius
defined in
tailwind.config.js.
- MUI theme tokens —
theme.palette, theme.typography, theme.spacing
values defined in the repo's theme file (usually theme.ts or mui-theme.ts).
Example inventory summary:
MUI Components (as wrapped in repo):
├── Button (primary, secondary, ghost) — wraps @mui/Button with brand styling
├── TextField (outlined, with error state)
├── Select (with async loading)
├── DataGrid (sortable, paginated)
└── Dialog, Drawer, Snackbar, Tooltip — plain @mui usage
Repo-local Components:
├── atoms/
│ ├── Badge.tsx — variants: success, warning, error, info
│ └── StatusPill.tsx — status chips with icon
├── molecules/
│ ├── FormField.tsx — label + MUI TextField + error
│ └── SearchBar.tsx — MUI TextField + icon + clear button
└── organisms/
├── Header.tsx
└── DataTable.tsx — built on @mui DataGrid
Tailwind Tokens (tailwind.config.js):
├── Colors: brand-blue (#4F46E5), brand-green (#059669), neutral-50..900
├── Fonts: font-sans = Inter, font-display = Poppins
├── Border radius: rounded-card (12px), rounded-button (8px)
└── Breakpoints: sm 640, md 768, lg 1024, xl 1280
MUI Theme Tokens:
├── palette.primary.main = #4F46E5 (kept in sync with Tailwind)
├── typography.h1..h6, body1, body2
└── spacing(1) = 8px (standard MUI scale)
Ask for tailwind.config.js and the theme file if not provided:
"Could you share tailwind.config.js and the MUI theme file? I need to see the
repo's tokens before I can audit."
Step 2: Audit each component task
Read the enriched task breakdown. For every task tagged Touches Existing Components
(and every task in the Component category), make a reuse decision.
...
