claude

brand-ui

Build UI with @elabs-ai/components-* (ui, data, ai, flow, charts, marketing, tokens, icons): a guided front door (brand-ui-start) into build-new / improve-existing / use-it flows, live project context, real component API, composition patterns, token rules, and a cross-theme design audit. Serves both library maintainers and app developers.

1 on GitHubby elabsv6.1.0MITupdated 1 month agodesign
/

Plugin brand-ui from marketplace brand-ui in mreimitz/elabs-components. Commands read from the repo's manifest — 1 month ago.

This plugin runs code on your machine — its hooks fire automatically on events like tool use and it starts local MCP servers. The exact commands are listed below; read them before installing.

What it installs

Skills (12)

  • repo-cleanup

    Audit a repository and its Claude Code setup for wasted tokens, wasted time, and dead weight — then plan and apply fixes under evidence. Use when the user asks why sessions are slow or expensive, wants CLAUDE.md / .claude / skills / agents / MCP trimmed or optimized, wants dead code, unused dependen

  • brand-ui-audit

    Audit and refine UI built with brand-ui — visual quality, design consistency, accessibility, and token compliance. Use when the user asks to audit/review/polish a UI, check contrast or accessibility, find design issues, make an interface feel more finished, verify it works across themes, or before s

  • brand-ui-component

    Create or extend a component IN the brand-ui monorepo (maintainer workflow). Use when adding a new primitive or block to @elabs-ai/components-ui, @elabs-ai/components-data, @elabs-ai/components-ai, @elabs-ai/components-flow, @elabs-ai/components-maps, @elabs-ai/components-charts, @elabs-ai/component

  • brand-ui-create-theme

    Use when someone wants a new brand-ui theme built from a real brand — a company or product name, website links, brand guidelines, a logo, screenshots or a style sheet — e.g. "create a theme for <brand>", "make us a theme from these links", "theme it like <product>", "/create-theme". For retuning a t

  • brand-ui-enterprise

    Design-judgment layer for building enterprise-grade app UIs with the brand-ui (@elabs-ai/components-*) design system. Use when designing or laying out a professional/business app or screen — admin console, operator console, internal/back-office tool, dashboard, data app, dense data table, master-det

  • brand-ui-migrate

    Bring an app that already exists onto brand-ui (@elabs-ai/components-*). Use when someone wants to migrate, port, adopt or "move to" the design system in a codebase they already have ("migrate this project to brand-ui", "we use MUI, can we switch", "adopt your design system in our admin app", "repla

  • brand-ui-new-app

    Define-to-build — scaffold a new brand-ui app from a plain-language description (VP-02). Use when the user wants to START an app, page, or demo ("build me a sales dashboard", "I need an admin console for X", "new app", "scaffold a chat assistant", "create a landing page for a pitch") rather than add

  • brand-ui-registry

    Curate the brand-ui shadcn-compatible registry (maintainer workflow). Use when deciding whether something belongs as an imported @elabs-ai/components-* primitive vs a copy-own registry block/template, when adding or editing a registry item, or when validating/building the registry for distribution.

  • brand-ui-start

    The front door for building UI with brand-ui — a router/concierge that asks what you want to do and hands you to the right flow. Use when someone is starting out and unsure where to begin ("help me with brand-ui", "where do I start", "I want to build something", "what can brand-ui do", "get me going

  • brand-ui-theme

    Create or retune a brand-ui theme (token work). Use when adding a new theme, re-branding the system to a customer's palette, adjusting global radius/spacing/surfaces, or fixing token-level contrast across themes. Use when the user says "new theme", "brand it for <customer>", "make corners less round

  • brand-ui-update-theme

    Use when an existing brand-ui theme family should be improved from new material — updated brand guidelines, a new logo, product screenshots, a live site, feedback like "the green is off" or "match their new design system" — e.g. "update the qlik theme with these links", "refresh our theme from the n

  • brand-ui

    Build UI with the brand-ui component system (@elabs-ai/components-* packages — ui, data, ai, flow, maps, charts, marketing, editor, viewer, terminal, tokens, icons). Use when working in a project that depends on @elabs-ai/components-ui or any @elabs-ai/components-* package, when adding/composing com

Subagents (3)

  • brand-ui-accessibility-reviewer

    Audit a component or screen you built with brand-ui (@elabs-ai/components-* packages) for keyboard, focus, ARIA, contrast and semantics issues before you ship. Use before merging a new interactive component, when a component adds custom keyboard handling or overlays, or to spot-check a screen for a1

  • brand-ui-reviewer

    The honest evaluator for a UI you built with the brand-ui design system (@elabs-ai/components-* packages). Use to review/audit a screen before a demo or ship — quality, design consistency, accessibility, theming, and component-state coverage — and produce a scored, prioritized report. Bundles three

  • brand-ui-visual-ux-reviewer

    Validate a UI you built with brand-ui (@elabs-ai/components-* packages) VISUALLY — render its pages/stories across both themes (`light`, `dark`), then critique hierarchy, spacing, color/contrast, typography, consistency and accessibility. Use after UI changes, before a demo/ship, or to produce a pri

MCP servers (2)

  • storybook

    connects to: http://localhost:6006/mcp

  • brand-ui

    runs: node packages/cli/bin/brand-ui.mjs mcp

Hooks (1)

  • PostToolUse

    node "${CLAUDE_PLUGIN_ROOT}/hooks/check-raw-taxonomy.mjs"

View source on GitHub elabs-ai.com

Similar plugins

Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling

19 skills

anthropics/skills 193,780

Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, and Three.js.

7 skills

nextlevelbuilder/ui-ux-pro-max-skill 148,759

nextjs

claude

Official Next.js skills: adopt and optimize Cache Components, adopt Partial Prefetching, and verify runtime behavior against a running dev server.

6 skills

vercel/next.js 143,495

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

diagram-design

claudecodex

Editorial diagrams in your brand, as self-contained HTML and SVG. Architecture, flowcharts, sequence, state machines, ER and database schemas, timelines, swimlanes, org charts, Gantt, Wardley maps, user journeys, service blueprints, UML class, lifecycle phase maps, and charts from bar, line and scatter to Sankey, treemap and heatmap, plus many more. Redraws draw.io, Mermaid, Excalidraw and PlantUML files. Exports SVG and PNG.

1 skill · 7 commands

cathrynlavery/diagram-design 66,757

daisyui

claudecodex

daisyUI component library skill

7 skills

saadeghi/daisyui 42,821

Maintain brand-ui?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex pluginslisted