Design
UI/UX direction, visual design, and design systems
ux-inclusive-design
by geekatron
"Inclusive design and WCAG 2.2 accessibility evaluation sub-skill for the /user-experience parent skill. Performs WCAG 2.2 compliance audits across Perceivable, Operable, Understandable, and Robust principles (conformance levels A, AA, AAA) and applies Microsoft Inclusive Design methodology including Persona Spectrum analysis (permanent, temporary, situational disabilities). Produces accessibility audit reports and persona spectrum analyses. Invoke when teams need accessibility compliance evaluation, WCAG conformance auditing, screen reader compatibility assessment, color contrast analysis, cognitive load evaluation, or inclusive design review. Invoked by ux-orchestrator during Wave 3 lifecycle-stage routing or when user intent is \"Check accessibility\" at any lifecycle stage. Triggers: accessibility, WCAG, ARIA, screen reader, contrast, cognitive load, inclusive, a11y, inclusive design, WCAG 2.2, persona spectrum."
vapor-ui
by goorm-dev
Vapor UI design system component and icon guide, UI mockup generator, and Figma design converter. Provides component catalog, icon lookup, usage patterns, props documentation, and converts Figma designs to production-ready vapor-ui code. Use when user asks "vapor-ui components", "vapor-ui icons", "아이콘 찾기", "vapor-ui 사용법", "vapor-ui를 사용해서 시안 구현", "convert figma", "figma to code", "implement design from figma", provides a Figma URL, or mentions specific components like "Button", "Input", "Modal".
design-tokens
by laurigates
CSS custom property architecture, theme systems, design token organization, and component library integration. Use when implementing design systems, theme switching, dark mode, or when the user mentions tokens, CSS variables, theming, or design system setup.
design-reference
by popmechanic
Self-contained design transformer — invoke directly, do not decompose. Transforms a design reference HTML file into a Vibes app. Use when user provides a design.html, mockup, or static prototype to match exactly.
ui-ux-pro-max
by liyecom
Translate human UI/UX requirements into site-design.contract.yaml
publish-to-google-docs
by ericmjl
Quickly publish markdown notes to styled Google Docs using pandoc and a Word template. Use when creating Google Docs from markdown, applying branding to documents, or pushing content to Drive for sharing.
ui-ux-pro-max
by qdleader
"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."
flutter-animations
by MADTeacher
"Comprehensive guide for implementing animations in Flutter. Use when adding motion and visual effects to Flutter apps: implicit animations (AnimatedContainer, AnimatedOpacity, TweenAnimationBuilder), explicit animations (AnimationController, Tween, AnimatedWidget/AnimatedBuilder), hero animations (shared element transitions), staggered animations (sequential/overlapping), and physics-based animations. Includes workflow for choosing the right animation type, implementation patterns, and best practices for performance and user experience."
liveblocks-ui-skills
by ihlamury
Liveblocks's UI design system. Use when building interfaces inspired by Liveblocks's aesthetic - dark mode, Inter font, 4px grid.
launchdarkly-ui-skills
by ihlamury
Launchdarkly's UI design system. Use when building interfaces inspired by Launchdarkly's aesthetic - dark mode, Inter font, 4px grid.
apple-ui-skills
by ihlamury
Apple's UI design system. Use when building interfaces inspired by Apple's aesthetic - light mode, Inter font, 4px grid.
lemonsqueezy-ui-skills
by ihlamury
Lemonsqueezy's UI design system. Use when building interfaces inspired by Lemonsqueezy's aesthetic - light mode, Inter font, 4px grid.
brex-ui-skills
by ihlamury
Brex's UI design system. Use when building interfaces inspired by Brex's aesthetic - light mode, Inter font, 4px grid.
amplitude-ui-skills
by ihlamury
Amplitude's UI design system. Use when building interfaces inspired by Amplitude's aesthetic - light mode, Inter font, 4px grid.
convertkit-ui-skills
by ihlamury
Convertkit's UI design system. Use when building interfaces inspired by Convertkit's aesthetic - light mode, Inter font, 4px grid.
monzo-ui-skills
by ihlamury
Monzo's UI design system. Use when building interfaces inspired by Monzo's aesthetic - light mode, Inter font, 4px grid.
clerk-ui-skills
by ihlamury
Clerk's UI design system. Use when building interfaces inspired by Clerk's aesthetic - light mode, Inter font, 4px grid.
matter-ui-skills
by ihlamury
Matter's UI design system. Use when building interfaces inspired by Matter's aesthetic - dark mode, Inter font, 4px grid.
awwwards-ui-skills
by ihlamury
Awwwards's UI design system. Use when building interfaces inspired by Awwwards's aesthetic - light mode, Inter font, 4px grid.
mobbin-ui-skills
by ihlamury
Mobbin's UI design system. Use when building interfaces inspired by Mobbin's aesthetic - light mode, Inter font, 4px grid.
coda-ui-skills
by ihlamury
Coda's UI design system. Use when building interfaces inspired by Coda's aesthetic - light mode, Inter font, 4px grid.
copy-ai-ui-skills
by ihlamury
Copy Ai's UI design system. Use when building interfaces inspired by Copy Ai's aesthetic - light mode, Inter font, 4px grid.
descript-ui-skills
by ihlamury
Descript's UI design system. Use when building interfaces inspired by Descript's aesthetic - dark mode, Inter font, 4px grid.
arc-ui-skills
by ihlamury
Arc's UI design system. Use when building interfaces inspired by Arc's aesthetic - light mode, Inter font, 4px grid.