Plugin Claude Code
A full design suite for Claude Code: 58 brand design systems + UI/UX, accessibility, motion, design guidelines, visual taste, web quality (Lighthouse/Core Web Vitals), and full design-process skills. Bundles Playwright MCP for in-browser verification. Auto-selects skills based on your project type.
MCP server Claude CodeCodexCursor +2
Lets the agent drive a real browser: open pages, click, type, take screenshots and read the accessibility tree, using Playwright. Runs locally from the @playwright/mcp npm package.
Instructions file
Claude Code instructions for zeta92/design-library-plugin, covering claude.md, what this repo is, setup / sync, clone this plugin into claude code's plugins directory and plugin architecture.
Hook
Runs when a session starts, executing detect-project.sh via bash. From zeta92/design-library-plugin.
Hook
Runs when you submit a prompt, before the agent sees it, executing inject-context.sh via bash. From zeta92/design-library-plugin.
Skill Claude CodeCodex
Run a comprehensive accessibility audit using 11 WCAG 2.2 AA specialist agents. Covers ARIA, contrast, keyboard, cognitive accessibility, and more.
Skill Claude CodeCodex
Use when working on UI, frontend, or design tasks, or when a brand design system has been loaded via the /design command or the UserPromptSubmit hook. Guides Claude on how to read, apply, and merge DESIGN.md files from the awesome-design-md library.
Skill Claude CodeCodex
Access 63 specialized design skills across the full design lifecycle — research, systems, UI, interaction, strategy, and delivery. Use for any design process task.
Skill Claude CodeCodex
Load and apply brand design systems from the awesome-design-md library. Supports single brand, multi-brand mixing, re-analyze + skill activation, list, and sync.
Skill Claude CodeCodex
Use when guiding any phase of the design process — from research and strategy through UI design, interaction design, and handoff. Contains 63 specialized skills across the entire design lifecycle.
Skill Claude CodeCodex
Audit UI code against 100+ web interface guidelines from Vercel — covering accessibility, forms, dark mode, typography, animation, images, performance, navigation, touch, and internationalization.
Skill Claude CodeCodex
Audit motion design and animations using perspectives from Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Context-aware feedback with severity rankings.
Skill Claude CodeCodex
Give generated frontends good taste — stops generic, boring "AI slop" UI with tunable design variance, motion intensity, and visual density. Use when output looks bland, when polishing a UI, or when redesigning an existing project.
Skill Claude CodeCodex
Use when generating or applying a complete design system. Provides intelligent recommendations across 67 styles, 161 color palettes, 57 font pairings, and 99 UX guidelines matched to the product type.
Skill Claude CodeCodex
Generate or apply a complete design system using ui-ux-pro-max. Analyzes your project type and outputs matched styles, palettes, font pairings, and UX guidelines.
Skill Claude CodeCodex
Use when auditing UI code for accessibility, forms, dark mode, typography, animation preferences, performance, touch, or internationalization. Covers 100+ rules from Vercel's web interface guidelines.
Skill Claude CodeCodex
Audit and optimize web quality based on Google Lighthouse and Core Web Vitals — performance (LCP, INP, CLS), SEO, and best practices. Use when improving page speed, Lighthouse scores, or search ranking.