claude

frontend-design-system

Design styles with multi-tenant Keycloak theming and Chakra UI v3 output for AI-powered frontend development; ships a design-styles MCP server

22 on GitHubby Markus Ahlingv2.1.0MITupdated 16 days ago
/

Plugin frontend-design-system from marketplace claude-orchestration in TheLobbi/claude. Commands read from the repo's manifest — 16 days 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 (6)

  • agentic-patterns

    Patterns from \"Agentic Design Patterns\" (Gulli & Sauco, 2025) applied to design token management, component scaffolding, multi-tenant theming, and accessibility-compliant UI generation.

  • chakra-ui-v3

    Chakra UI v3 reference — createSystem, tokens, semantic tokens, recipes, slot recipes, color mode, v2 migration, and how a design style maps onto a Chakra system

  • component-patterns

    UI component patterns with style-specific implementations and accessibility

  • css-generation

    Generate CSS, Tailwind, and styled-components code from design style selections

  • design-styles

    Access 263+ design styles with AI-optimized prompt keywords for frontend development

  • keycloak-theming

    Multi-tenant Keycloak authentication theming with realm-specific design systems

Slash commands (8)

  • /frontend-design-system:audit

    Audit UI for design style consistency and accessibility

  • /frontend-design-system:component

    Generate styled UI components with design system consistency

  • /frontend-design-system:convert

    Convert CSS styles between different formats (CSS, Tailwind, styled-components)

  • /frontend-design-system:keycloak

    Generate and deploy Keycloak theme files with FreeMarker templates

  • /frontend-design-system:palette

    Generate color palettes from design style characteristics

  • /frontend-design-system:style

    Apply a specific design style from the bundled catalog or an extended 263+ style vault and generate implementation code

  • /frontend-design-system:theme

    Generate and manage multi-tenant themes with Keycloak integration

  • /frontend-design-system:tokens

    Generate design tokens from a selected design style

Subagents (6)

  • frontend-design-system:accessibility-auditor

    Audit and fix accessibility issues in components and themes

  • frontend-design-system:component-designer

    Design and generate accessible React components with consistent styling

  • frontend-design-system:design-architect

    Strategic design decisions, style selection, and design system architecture

  • frontend-design-system:responsive-specialist

    Implement responsive layouts and mobile-first design patterns

  • frontend-design-system:style-implementer

    Implements selected design styles into production CSS/Tailwind/styled-components code

  • frontend-design-system:theme-engineer

    Multi-tenant theming with Keycloak realm integration and design token management

MCP servers (2)

  • design-styles

    runs: node ${CLAUDE_PLUGIN_ROOT}/mcp-server/src/index.js

  • chakra-ui

    runs: npx -y @chakra-ui/[email protected]

Hooks (4)

  • PreToolUse

    ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/check-style-consistency.sh

  • PreToolUse

    ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/validate-accessibility.sh

  • PostToolUse

    ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/sync-themes.sh

  • PostToolUse

    ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/update-tokens.sh

View source on GitHub thelobbi.github.io

More from TheLobbi/claude

All 37 plugins →

Unified delivery orchestration: one plugin replacing six. A tested, dependency-free kernel (swarm conductor with leased claims and worktree isolation, guardrails, transactional state MCP, fleet protocol) behind platform adapters for Linear, Jira, GitHub and Harness. 133 commands, 156 agents, 52 skills, 12 schema-validated workflows, 155 tests.

52 skills · 133 commands · 156 agents · hooks

22

Modern Claude Code second brain: 5-layer stack deploy + three-tier memory (engram + Obsidian vault + plugin rules) + 22-tool MCP reference server. 21 behavior-triggering skills, 12 single-intent commands, 18 role-scoped agents bridging engram and Obsidian. Tracks current Claude Code capabilities (Fable 5 + Opus 4.8, agent teams, Tool Search, web/remote).

70 skills · 12 commands · 18 agents

22

Comprehensive Material UI (MUI) expert plugin — 26 skills, 14 commands, 7 agents covering theming, CSS variables, Pigment CSS, components, sx/styled, slots API, MUI X (DataGrid, DatePickers, Charts, TreeView), accessibility, performance, SSR/Next.js, animations, virtualization, forms, white-label/multi-tenant, headless (MUI Base), Joy UI, i18n/RTL, testing, migration, entity-driven CRUD, ecosystem integrations, and 200+ creative widget patterns.

27 skills · 14 commands · 7 agents

22

Expert system for building agent-rendered interactive UI: MCP Apps (ui:// resources, the ui/* postMessage bridge), mcp-ui, the OpenAI Apps SDK (window.openai), Google A2UI, and AG-UI. 14 commands, 16 skills, 13 agents, 7 runnable project templates, and 4 scripts — scaffolder, spec validator, host-portability checker, and a local host harness — that turn any product requirement into a spec-correct, CSP-hardened, host-portable agent UI.

16 skills · 14 commands · 13 agents

22

Consul - Enterprise Microsoft ecosystem orchestrator for TVS (Trusted Virtual Solutions) multi-entity multi-tenant deployment. 19 agents, 18 commands, 17 skills, 14 hooks, 5 workflows. MCP server for Graph API, Dataverse, Fabric, and Planner.

1 skill · 18 commands · 19 agents

22

Comprehensive .NET 10, Blazor, ASP.NET Core, C#, and Syncfusion expert plugin for building modern web apps, microservices, and cloud-native solutions

19 skills · 8 commands · 6 agents · hooks

22

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

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.

1 skill

anthropics/claude-code 155,476

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

Design fluency for frontend development. 1 skill with 24 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.

1 skill · 4 agents · hooks

pbakaus/impeccable 109,099

storybook

claudecodex

Build, preview, and test UI components with Storybook.

7 skills

storybookjs/storybook 91,552

Hostinger

claude

Deploy, manage and monitor your Hostinger services directly from Claude Code. The plugin connects Claude to Hostinger's remote MCP server, so you can ship sites and apps, manage domains and DNS, run WordPress and operate VPS servers without leaving your coding environment. There's nothing to install on your machine: no Node.js, no npm, no local server. Key features include one-prompt deployments for static sites, Node.js apps (built on Hostinger), full WordPress site imports, and WordPress plugins and themes, plus static and PHP sites on the Agency Plan. Beyond deployments, Claude can search and register domains, edit DNS records and snapshots, check build logs, and manage mailboxes, online stores, email marketing contacts, subscriptions and orders. It can also control VPS firewalls, snapshots and monitoring. Sign in through your browser (OAuth) on first use, or set a `HOSTINGER_API_TOKEN` from hPanel. How to use: there are no commands to memorize. Describe what you want and Claude picks the right tool or deployment skill. Try "deploy my static site to Hostinger", "deploy this Next.js app to example.com", "create an A record pointing example.com to 1.2.3.4", or "show VPS metrics for the last 24 hours."

7 skills · 1 MCP server

anthropics/claude-plugins-official 47,076

Maintain frontend-design-system?

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 plugins37 plugins