ui-components

CC_skillz_marketplace

A curated marketplace of UI/frontend skills for Claude Code. Provides components, design systems, browser testing, and accessibility auditing as installable plugins.

Quick Start

# Add this marketplace to Claude Code
/plugin marketplace add SquizAI/CC_skillz_marketplace

# Install plugins
/plugin install ui-components@CC_skillz_marketplace
/plugin install ui-design@CC_skillz_marketplace
/plugin install ui-testing@CC_skillz_marketplace
/plugin install ui-accessibility@CC_skillz_marketplace

Available Plugins

Plugin	Description	Slash Commands
ui-components	ShadcnBlocks — 1,338 blocks + 1,189 components with intelligent selection	—
ui-design	Design system guide — typography, color, spacing, motion + design reviewer agent	—
ui-testing	Playwright browser automation with auto server detection	/test-ui
ui-accessibility	WCAG 2.1 auditing via axe-core + eslint-plugin-jsx-a11y	/a11y
marketplace-manager	Browse and search this marketplace	/ui-marketplace

Plugin Details

ui-components

Intelligent block selection for shadcn/ui and ShadcnBlocks. Uses multi-dimensional tagging (layout, tone, goal, media, interaction) to recommend the best 2-3 blocks via a 0-2 question flow.

Triggers: "build a frontend", "add shadcn components", "create a landing page", "add a hero section"

ui-design

Systematic design guidance for typography (font pairing, type scales), color systems (palette generation, semantic tokens, dark mode), spatial composition (spacing scales, layout principles), and motion design (timing, easing, animation patterns). Includes a design-reviewer agent for PR reviews.

Triggers: "design a UI", "create a design system", "pick fonts", "choose colors", "review the design"

Note: Complements the official frontend-design plugin. frontend-design = creative generation. ui-design = systematic decisions.

ui-testing

General-purpose Playwright browser automation. Auto-detects running dev servers, writes custom test scripts to /tmp, and supports responsive viewport testing.

Triggers: "test the page", "take a screenshot", "check responsive design" Command: /test-ui [url] [--responsive]

ui-accessibility

WCAG 2.1 Level AA accessibility auditing with three modes:

• runtime — Injects axe-core via browser automation
• static — Runs eslint-plugin-jsx-a11y against source code
• full — Both combined with deduplicated results

Triggers: "run accessibility scan", "a11y audit", "WCAG compliance" Command: /a11y [runtime|static|full] [url]

Attribution

• shadcn/ui skill — Based on Shadcnblocks-Skill by Mason James
• Playwright skill — Based on playwright-skill by lackeyjb
• a11y skill — Based on claude-a11y-skill by iamnbutler

License

MIT — see LICENSE for details. Individual plugins may carry their own licenses from upstream authors.