design-system

Name: design-system
Availability: InStock
Author: nikhil-chopra-7

Audit MUI and Tailwind components to classify reuse, extension, or new builds.

1|Updated Apr 25, 2026

Search Tags:#audit #component #tailwind #tokens #mui #design-system #reuse

Ready to run

npx skills add https://github.com/Nikhil-Chopra-7/claude-frontend-skills --skill design-system-nikhil-chopra-7

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Nikhil-Chopra-7/claude-frontend-skills/tree/main/design-system
Command: npx skills add https://github.com/Nikhil-Chopra-7/claude-frontend-skills --skill design-system-nikhil-chopra-7

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

...

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit existing MUI and Tailwind components for reuse across my frontend repos?▼

A component reuse audit identifies existing MUI imports, repo-local wrappers, and Tailwind tokens to classify each item as reusable, extendable with a new variant, or requiring a build from scratch.

What is a design system token mapping process for frontend codebases?▼

Design system token mapping extracts colors, fonts, and spacing from `tailwind.config.js` and MUI theme files to align styling variables, ensuring downstream teams import consistent design tokens instead of hardcoding values.

Do I need an up-to-date component inventory before auditing my design system?▼

Yes, an up-to-date inventory of MUI components, repo-local wrappers, and token configurations is required. The audit logic depends on scanning these existing assets to produce accurate extension specs and reuse recommendations.

Can I audit custom repo-local wrappers built on top of MUI components?▼

Yes, the audit scans `components/atoms/`, `components/molecules/`, and `components/organisms/` directories to document repo-specific wrappers on top of MUI, evaluating whether to reuse, extend, or replace them for new features.

How do I know whether to reuse, extend, or build a new UI component from scratch?▼

By cross-referencing an enriched task breakdown against the component inventory, you determine whether to reuse an existing component, extend one with a new variant, or build from scratch based on current MUI and Tailwind assets.