Design
UI/UX direction, visual design, and design systems
figma-design-sync
by carmandale
Detects and fixes visual differences between a web implementation and its Figma design. Use iteratively when syncing implementation to match Figma specs.
interaction-design
by pluginagentmarketplace
Master interaction design - patterns, micro-interactions, user flows, affordances, feedback
designer
by jforksy
10x Software Designer - UI/UX design review, visual critique, and design system architecture for React/Next.js apps using shadcn/ui + Tailwind CSS. Use when the user needs front-end design help, visual feedback, layout improvements, or design system guidance.
installing-brand-design-skills
by planetabhi
Helps Claude install and use brand-specific design skills for popular product brands (Apple, Linear, Stripe, Shopify, Notion, Figma, Spotify, Slack, Discord, IBM, Salesforce) by running the design-like CLI to generate Agent Skills and IDE configuration so code and UI match the chosen brand’s design language.
ui-ux
by kieutrongthien
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
accessibility
by pluginagentmarketplace
Master accessibility - WCAG compliance, screen readers, keyboard navigation, inclusive design
design-implementation-reviewer
by carmandale
Visually compares live UI implementation against Figma designs and provides detailed feedback on discrepancies. Use after writing or modifying HTML/CSS/React components to verify design fidelity.
frontend-design-extractor
by Xsir0
"Extract reusable UI/UX design systems from frontend codebases: design tokens, global styles, components, interaction patterns, and page templates. Use when analyzing any frontend repo (React/Vue/Angular/Next/Vite/etc.) to document or migrate UI/UX for reuse across projects. Focus on UI/UX only; explicitly ignore business logic and domain workflows."
ui-library-usage-auditor
by hopeoverture
This skill should be used when reviewing shadcn/ui component usage to ensure accessibility, consistency, and proper patterns. Applies when auditing UI code, checking component patterns, reviewing layout structure, identifying component extraction opportunities, or ensuring design system compliance. Trigger terms include audit UI, review components, check shadcn, accessibility audit, component review, UI patterns, design system compliance, layout review, refactor components, extract component.
impeccable-polish
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /polish. Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great. Use for frontend and UI design tasks."
mobile-architect
by k1lgor
Use this for mobile app development (iOS/Android), cross-platform frameworks (Flutter, React Native), and mobile-specific UI/UX patterns.
design-critique
by slb2248
Structured framework for design feedback sessions.
tailwind-patterns
by baotoq
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
impeccable-normalize
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /normalize. Normalize design to match your design system and ensure consistency Use for frontend and UI design tasks."
impeccable-delight
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /delight. Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use for frontend and UI design tasks."
demo-builder
by apetcu
"Build complete demo projects from scratch. Takes a project description (presentation website, shop, dashboard, SaaS, portfolio, etc.) and scaffolds a full working Next.js + Tailwind CSS 3.4 app ready for Vercel deployment. Supports optional database integration when a DATABASE_URL is provided. Use when the user wants to build a demo, create a project, scaffold an app, prototype something, or spin up a quick site."
impeccable-quieter
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /quieter. Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact. Use for frontend and UI design tasks."
compound
by SebastiaanWouters
"Knowledge retrieval, storage, and design system management for iterative agent loops. Use 'compound retrieve' at start, 'compound store' at end, 'compound design' for UI consistency. Prevents duplicates, manages size, keeps docs organized."
impeccable-animate
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /animate. Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use for frontend and UI design tasks."
design-web-guidelines
by baotoq
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
create-cli
by simonlee2
This skill should be used when the user asks to "design a CLI", "create command-line interface", "design CLI parameters", "plan CLI UX", or needs help structuring command-line tool interfaces with proper arguments, flags, subcommands, and user experience patterns.
impeccable-audit
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /audit. Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations. Use for frontend and UI design tasks."
frontend-design
by mokbhai
Create distinctive, production-grade frontend interfaces using Tailwind CSS with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, Astro projects, or when styling/beautifying any web UI). Optimized for Astro + React tech stack. Generates creative, polished code and UI design that avoids generic AI aesthetics.
design-system
by elliottrjacobs
Build and maintain design systems — tokens, components, documentation, and governance. Use when the user says "design system", "component library", "design tokens", "build a design system", "token architecture", or needs to create or audit a design system for a product or organization.