Production-grade frontend design agent pack. 6 specialist agents, 3 skills, anti-slop enforcement, and design system integration. Synthesizes Anthropic's official frontend-design skill with motion, typography, color, accessibility, and component expertise.
Not in a marketplace yet, so it loads for one session with --plugin-dir.
Plugin source-design in LiamFuller07/source-design-plugin. Commands read from the repo's manifest — 1 month ago.
design-briefGenerate a comprehensive design brief before building any UI. Establishes aesthetic direction, typography, color palette, motion language, and component patterns. Use before starting any new page, component, or design system. Prevents generic AI slop by forcing intentional design decisions upfront.
design-reviewAudit existing UI code against design system rules, anti-slop patterns, accessibility compliance, and production quality standards. Use after building components or before shipping.
design-themeGenerate a complete color and typography theme as CSS custom properties. Outputs a ready-to-use theme file with light/dark mode, semantic tokens, and Tailwind config. Use when starting a new project or creating a theme system.
font-setupInstall, configure, and optimize fonts for a web project. Self-hosts WOFF2 files, generates @font-face declarations, configures Next.js/Tailwind, and sets up fallback metrics for zero-CLS loading. Handles premium fonts (Season Mix, GT Alpina) and free fonts (Satoshi, Instrument Serif, etc.).
/source-design:accessibilityAudit or implement accessibility — WCAG 2.2, ARIA patterns, keyboard navigation, screen readers, contrast, touch targets
/source-design:colorGet color system specs — semantic palettes, 10-step scales, dark mode mapping, contrast compliance, CSS variable tokens
/source-design:componentBuild production React components — Tailwind, shadcn/ui, CVA variants, design token integration, all states, responsive, accessible
/source-design:design-audit-codexRun a parallel Codex-powered design system audit across the entire codebase — scans all frontend files for anti-slop violations, hardcoded values, missing states, and accessibility issues
/source-design:design-briefGenerate a design brief before building any UI — establishes aesthetic direction, typography, color, motion, and component patterns
/source-design:design-reviewAudit UI code against design system, anti-slop rules, accessibility, and production quality standards
/source-design:design-themeGenerate a complete CSS theme with light/dark mode, semantic tokens, and Tailwind config integration
/source-design:fontsManage fonts for the project — install, configure, and generate @font-face declarations. Supports Google Fonts, local WOFF2 files, and premium font setup (Season Mix, etc.)
/source-design:motionGet animation specs or implementation — Framer Motion, CSS transitions, springs, parallax, stagger reveals, micro-interactions
/source-design:typographyGet typography system specs — font pairing, type scale, tracking, vertical rhythm, responsive typography, web font loading
accessibility-auditorAccessibility specialist — WCAG 2.2, ARIA patterns, keyboard navigation, screen readers, focus management, color contrast, touch targets. Use for accessibility audits or implementation.
color-architectColor system specialist — semantic palettes, OKLCH generation, CSS variables, dark/light mode mapping, contrast compliance, color blindness safety. Use for palette creation or color system work.
component-builderFrontend component specialist — React, Tailwind, shadcn/ui, Radix primitives, design token integration, responsive implementation. Use for building production UI components.
design-directorOrchestrates the full design workflow — aesthetic direction, anti-slop enforcement, design system compliance, and specialist agent coordination. Use when starting any new UI/frontend work.
motion-designerAnimation and motion specialist — Framer Motion, CSS transitions, spring physics, micro-interactions, parallax, stagger reveals, scroll-triggered animations. Use for any animation work.
typography-systemTypography specialist — type scales, font pairing, tracking, vertical rhythm, responsive typography, web font loading. Use for any typography decisions or implementation.
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
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
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
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
daisyUI component library skill
7 skills
Backend API design, GraphQL architecture, workflow orchestration with Temporal, and test-driven backend development
9 skills · 1 command · 8 agents
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.