frontend-design-system - Claude Code Plugin | ClaudePluginHub

Back to Plugins

Community Plugin

frontend-design-system

263+ design styles with multi-tenant Keycloak theming for AI-powered frontend development

1.0.0

Updated 23 days ago

AI Insight

A visual drag-and-drop workflow builder with 27 node types, real-time monitoring, and template library for designing and automating processes.

Why this plugin

Accelerates frontend development by providing a visual interface for building and managing workflows, integrating with Keycloak for multi-tenant theming and existing project backends.

Prerequisites

Node.js/npm environment. Integrates with existing Keycloak setup, API endpoints, and database schema. Run setup script or install dependencies manually.

workflow-automation

frontend-tooling

ui-builder

Install

1

Add the repository(one-time)

$

/plugin marketplace add markus41/claude

2

Install the plugin

$

/plugin install frontend-design-system@claude-orchestration

Components

Commands

8

Audit UI for design style consistency and accessibility

Generate styled UI components with design system consistency

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

Generate and deploy Keycloak theme files with FreeMarker templates

Generate color palettes from design style characteristics

Apply a specific design style from 263+ styles and generate implementation code

Generate and manage multi-tenant themes with Keycloak integration

Generate design tokens from a selected design style

Agents

6

Accessibility Auditor Agent

/accessibility-auditor

Audit and fix accessibility issues in components and themes

Component Designer Agent

/component-designer

Design and generate accessible React components with consistent styling

Design Architect Agent

/design-architect

Strategic design decisions, style selection, and design system architecture

Responsive Specialist Agent

/responsive-specialist

Implement responsive layouts and mobile-first design patterns

Style Implementer Agent

/style-implementer

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

Theme Engineer Agent

/theme-engineer

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

Skills

4

Component Patterns Skill

UI component patterns with style-specific implementations and accessibility

CSS Generation Skill

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

Design Styles Skill

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

Keycloak Theming Skill

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

Stats

Stars3

MaintenanceGood

Last Commit23 days ago

Community Promotion

Collections

Links

Plugin Marketplace JSON

Categories

Available In

claude-orchestration

Keywords

frontend

design-system

keycloak

theming

css

tailwind

ui-ux

multi-tenant

+1 more

Similar Plugins

prompts.chat

Access thousands of AI prompts and skills directly in your AI coding assistant. Search prompts, discover skills, save your own, and improve prompts with AI.

plugin-dev

Comprehensive toolkit for developing Claude Code plugins. Includes 7 expert skills covering hooks, MCP integration, commands, agents, and best practices. AI-assisted plugin creation and validation.

payload

Payload Development plugin - covers collections, fields, hooks, access control, plugins, and database adapters.

conductor

Context-Driven Development plugin that transforms Claude Code into a project management tool with structured workflow: Context → Spec & Plan → Implement