From supervibe
Use AFTER design-system-approved AND BEFORE prototype-handoff TO bridge brandbook tokens into a chosen component library (MUI, shadcn/ui, Radix UI, HeadlessUI, Mantine, or fully-custom). Decides which library fits, then generates the token bridge so the library renders with project palette/typography/motion.
npx claudepluginhub vtrka/supervibe --plugin supervibeThis skill is limited to using the following tools:
Before choosing or bridging a component library, run project memory, code search, and internal `supervibe:design-intelligence` lookup for stack-specific UI guidance. Do not install or switch libraries from lookup alone; use existing stack facts and user approval.
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
Before choosing or bridging a component library, run project memory, code search, and internal supervibe:design-intelligence lookup for stack-specific UI guidance. Do not install or switch libraries from lookup alone; use existing stack facts and user approval.
brandbook skill produces manifest.json with status: approved.prototype-handoff runs, IF the target stack uses a component library.Follow docs/references/skill-expert-operating-standard.md: start from source of truth, preserve retrieval evidence, apply scope safety, use real producers with runtime receipts for durable delegated outputs, verify before completion claims, and keep confidence below gate when evidence is partial.
.supervibe/artifacts/prototypes/_design-system/manifest.json (status must be approved).supervibe/artifacts/prototypes/_design-system/tokens.css.supervibe/artifacts/prototypes/_design-system/motion.css.supervibe/artifacts/prototypes/_design-system/components/*.md (each baseline component spec)Ask user one question at a time.
Step 1/4: What is the target stack for production?
Step 2/4: What is the design priority axis?
Step 3/4: Confirm library:
Step 4/4: Bridge depth — 3 tiers:
Branch on chosen library:
templates/component-adapters/mui-token-bridge.ts.tpl to .supervibe/artifacts/prototypes/_design-system/library-bridge/mui/theme.ts. Fill palette/typography/spacing/shape/transitions from tokens.css.templates/component-adapters/shadcn-token-bridge.css.tpl to .supervibe/artifacts/prototypes/_design-system/library-bridge/shadcn/globals.css. Map shadcn CSS vars (--background, --foreground, --primary, etc.) to our tokens.templates/component-adapters/headless-ui-mapping.md.tpl to .supervibe/artifacts/prototypes/_design-system/library-bridge/<lib>/mapping.md. List which primitive backs each baseline component.theme.ts from Mantine's MantineThemeOverride shape filled with tokens.Write a .supervibe/artifacts/prototypes/_design-system/library-bridge/<library>/README.md describing:
Update .supervibe/artifacts/prototypes/_design-system/manifest.json with componentLibrary: { name: "...", bridgeDepth: "...", bridgePath: "..." }.
Print feedback prompt (required):
Approve - save the bridge and continue handoff
Revise - what should change in the mapping?
Alternative - build a bridge for another library
Deep review - ask code-reviewer to review the generated theme
Stop - keep bridge as draft
.supervibe/artifacts/prototypes/_design-system/library-bridge/<library>/ — bridge files.supervibe/artifacts/prototypes/_design-system/library-bridge/<library>/README.md — rationalemanifest.jsonConfidence: <N>.<dd>/10
Override: <true|false>
Rubric: framework
library-without-bridge — picking shadcn/MUI/Mantine and shipping with their default theme; project tokens become decoration.silent-library-choice — installing MUI/shadcn before asking the user about priority axis.bridge-drift — bridge files diverge from tokens.css; bridge must regenerate when tokens change. Add a TODO in README for regeneration trigger.asking-multiple-questions-at-onceadvancing-without-feedback-promptcat .supervibe/artifacts/prototypes/_design-system/library-bridge/<library>/README.md shows: library name, bridge depth, link back to brandbook decision.manifest.json componentLibrary.bridgePath resolves to existing file.tokens.css) — count must be > 0; bridge that doesn't reference any token is broken.supervibe:brandbook — produces tokens this skill consumessupervibe:prototype-handoff — consumes bridge as part of handoff bundleagents/_design/creative-director.md — invokes this skill when component-library decision branch firesagents/_design/design-system-architect.md — verifies the bridge references approved project tokens and blocks library-default leakage