From godmode
Use when operating in a codebase that employs an existing design system (shadcn/ui, Material UI, Ant Design, Chakra, etc.), when you need to identify which system a project uses, or when setting up a design system for a project that lacks one
npx claudepluginhub noobygains/godmode --plugin godmodeThis skill uses the workspace's default tool permissions.
Detect the project's design system, embrace it fully, and extend it only through sanctioned channels. Never resist it, never overlook it, never rebuild what it already offers.
Reviews, designs, builds, improves, and refactors React UI components using TailwindCSS, Radix UI, and shadcn/ui. For accessible design systems, responsive layouts, theming, and dark mode.
Guides building design systems with tokens (typography, colors, spacing, shadows), components, documentation, governance, and best practices. Use for UI consistency across teams.
Builds scalable design systems with design tokens, atomic design, Storybook, theming, and governance. Use for component libraries, design standards, and unifying product experiences.
Share bugs, ideas, or general feedback.
Detect the project's design system, embrace it fully, and extend it only through sanctioned channels. Never resist it, never overlook it, never rebuild what it already offers.
Core principle: When a project has a design system, every component you create must consume that system's primitives, tokens, and patterns. When no system exists, establish one before writing components.
No exceptions. No workarounds. No shortcuts.
NEVER REBUILD WHAT THE DESIGN SYSTEM ALREADY PROVIDES
If the system ships a <Dialog> component, use it. Do not fabricate your own. Do not wrap it in a container with overriding styles. Consume its variant API and extend only through its documented extension points.
Mandatory when:
Specifically triggered by:
@shadcn/ui, @mui/material, antd, @chakra-ui, or equivalentscomponents/ui directory containing base-level primitivestailwind.config, theme.ts, or a design token fileBEFORE authoring any UI component:
1. DETECT: What design system governs this project? (see Detection below)
2. STUDY: Read the system's component API for the element you are building
3. ASSESS: Does the system already provide this component?
- Yes -> Consume it directly. Do NOT recreate it.
- Partially -> Compose from existing primitives
- No -> Build it adhering to the system's conventions
4. VALIDATE: Does your component feel native to the system?
Omit any step = fighting the system
digraph detect_system {
rankdir=TB;
start [label="New project or\nnew component", shape=doublecircle];
check_deps [label="Inspect package.json\nfor UI frameworks", shape=box];
known [label="Recognized design\nsystem present?", shape=diamond];
check_code [label="Search source tree\nfor UI import patterns", shape=box];
has_custom [label="Internal component\nlibrary found?", shape=diamond];
check_tokens [label="Look for\ndesign token definitions", shape=box];
has_tokens [label="Token file\ndetected?", shape=diamond];
adopt_known [label="ADOPT\nUse the recognized system", shape=box, style=filled, fillcolor="#ccffcc"];
adopt_internal [label="ADOPT\nFollow internal library conventions", shape=box, style=filled, fillcolor="#ccffcc"];
bootstrap [label="BOOTSTRAP\nInitialize a design system", shape=box, style=filled, fillcolor="#ccccff"];
extend_tokens [label="BUILD\non existing token foundation", shape=box, style=filled, fillcolor="#ccffcc"];
start -> check_deps;
check_deps -> known;
known -> adopt_known [label="yes"];
known -> check_code [label="no"];
check_code -> has_custom;
has_custom -> adopt_internal [label="yes\n(components/ui\nor equivalent)"];
has_custom -> check_tokens [label="no"];
check_tokens -> has_tokens;
has_tokens -> extend_tokens [label="yes"];
has_tokens -> bootstrap [label="no"];
}
| Dependency | System | Approach |
|---|---|---|
@radix-ui/*, class-variance-authority | shadcn/ui | Adhere to shadcn file and variant conventions |
@mui/material, @emotion/react | Material UI | Follow Material Design specifications |
antd | Ant Design | Follow Ant component patterns |
@chakra-ui/react | Chakra UI | Follow Chakra theming and style props |
@headlessui/react | Headless UI | Pair with Tailwind for styling |
@mantine/core | Mantine | Follow Mantine hook and component patterns |
primereact, primevue | PrimeReact/PrimeVue | Follow Prime theming and template system |
Look for:
components/ui/ directory (typical shadcn/ui layout)components/common/ or components/shared/.stories.tsx)Search for:
tailwind.config.js/ts (Tailwind CSS theme customization)theme.ts or theme.js (custom theme objects):root or [data-theme]tokens/ or design-tokens/ directoriesstyles/variables.css or styles/tokens.cssvariant="danger", use that instead of manually overriding colors.size="sm", do not override with custom CSS.components/ui/, new ones go there too.Copy-and-customize components built on Radix UI + Tailwind CSS.
Conventions:
components/ui/ (base building blocks)components/ (composed from primitives)cn() helper for merging class stringscva() from class-variance-authority for variant definitionsAdding a missing component:
npx shadcn@latest add [component-name]
Composing custom components:
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
export function ProjectCard({ project }) {
return (
<Card>
<CardHeader><CardTitle>{project.title}</CardTitle></CardHeader>
<CardContent>
<Badge variant={project.live ? "default" : "secondary"}>
{project.live ? "Live" : "Draft"}
</Badge>
</CardContent>
</Card>
)
}
Forbidden:
cn() helper for conditional class compositionConventions:
createTheme() in theme.ts@mui/materialsx prop or styled() APItheme.componentsExtending the theme:
const theme = createTheme({
palette: { primary: { main: '#0d9488' } },
components: {
MuiButton: {
defaultProps: { disableElevation: true },
styleOverrides: { root: { textTransform: 'none', borderRadius: 8 } },
},
},
});
Conventions:
antdtheme.token, per-component via theme.componentsForbidden: Direct overrides of .ant-* CSS classes or mixing Ant with a competing component library.
When the project uses Tailwind without an accompanying component framework:
tailwind.config for custom theme extensionsWhen the system lacks a component you require:
Align with the system's norms:
| Project Scale | Recommendation |
|---|---|
| Prototype / MVP | Tailwind CSS + shadcn/ui |
| Small team, distinctive brand | Tailwind CSS + headless primitives (Radix/Headless UI) |
| Enterprise / large organization | Material UI or Ant Design (full-featured, opinionated) |
| Design-centric / agency work | Tailwind CSS + bespoke component library |
npx tailwindcss init -p
npx shadcn@latest init
npx shadcn@latest add button input card badge dialog toast
Customize tailwind.config.ts with project-specific token values afterward.
When joining a project that lacks documented tokens:
| Token Category | Where to Find |
|---|---|
| Colors | CSS variables, Tailwind config, theme files, most-used hex/rgb values |
| Typography | Font imports, CSS font declarations, Tailwind config fonts section |
| Spacing | Most frequent padding/margin/gap values across stylesheets |
| Border radius | Most common border-radius values in component styles |
| Shadows | Most common box-shadow declarations |
Discovery process:
--) across all style filestailwind.config for theme.extend customizationstheme.ts or theme.js exports| Rationalization | Truth |
|---|---|
| "The system does not have this component" | Compose from primitives or extend within conventions. Do not bypass the system. |
| "Writing raw CSS is faster than learning the API" | Faster today, inconsistent forever. Invest in learning the system. |
| "I will wire it into the system later" | Later never arrives. Components outside the system infect everything they touch. |
| "The system's API is too restrictive" | The API prevents inconsistency by design. Work within it or extend properly. |
| "Combining two systems gives us the best of both" | Combining two systems delivers the worst of both: conflicting styles, doubled bundle weight. |
| "This is a one-off component, it does not matter" | One-off components multiply. Build it correctly or it becomes technical debt. |
| "I will just override this one property" | One override becomes twenty. Use the system's theming mechanism. |
!importantcomponents/custom/ alongside components/ui/Every item on this list means: HALT. Consume the existing system.
Prerequisite knowledge:
Complementary skills: