Design
UI/UX direction, visual design, and design systems
design-implementation-reviewer
by ratacat
"Use this agent when you need to verify that a UI implementation matches its Figma design specifications. This agent should be called after code has been written to implement a design, particularly after HTML/CSS/React components have been created or modified. The agent will visually compare the live implementation against the Figma design and provide detailed feedback on discrepancies.\n\nExamples:\n- <example>\n Context: The user has just implemented a new component based on a Figma design.\n user: \"I've finished implementing the hero section based on the Figma design\"\n assistant: \"I'll review how well your implementation matches the Figma design.\"\n <commentary>\n Since UI implementation has been completed, use the design-implementation-reviewer agent to compare the live version with Figma.\n </commentary>\n </example>\n- <example>\n Context: After the general code agent has implemented design changes.\n user: \"Update the button styles to match the new design system\"\n assistant: \"I've updated the butto..."
j-cover
by ShinChven
Designs J-Media magazine covers via 20% outpainting, auto-sampling outfit palettes, and adding bilingual typography with barcodes and lore-accurate details.
docyrus-app-ui-design
by Docyrus
Design and build production-grade UI components for Docyrus React applications using preferred component libraries. Use when creating dashboards, forms, data tables, layouts, or any UI elements. Triggers on tasks involving component selection, UI design, dashboard creation, layout design, shadcn, diceui, animate-ui, docyrus-ui, reui components, or requests to build user interfaces.
apple-developer-toolkit
by Abdullah4AI
"All-in-one Apple developer skill with three integrated tools shipped as a single unified binary. (1) Documentation search across Apple frameworks, symbols, and 1,267 WWDC sessions from 2014-2025. No credentials needed. (2) App Store Connect CLI with 120+ commands covering builds (find/wait/upload), TestFlight, pre-submission validate, submissions, signing, subscriptions (family-sharable), IAP, analytics, Xcode Cloud, metadata workflows, release pipeline dashboard, insights, win-back offers, promoted purchases, product pages, nominations, accessibility declarations, pre-orders, pricing filters, localizations update, diff, webhooks with local receiver, workflow automation, and more. Requires App Store Connect API key. (3) Multi-platform app builder (iOS/watchOS/tvOS/iPad/macOS/visionOS) that generates complete Swift/SwiftUI apps from natural language with auto-fix, simulator launch, interactive chat mode, and open-in-Xcode. Requires an LLM API key and Xcode. Includes 38 iOS development rules and 12 SwiftUI best practice guides for Liquid Glass, navigation, state management, and modern APIs. All three tools ship as one binary (appledev). USE WHEN: Apple API docs, App Store Connect management, WWDC lookup, or building iOS/watchOS/tvOS/macOS/visionOS apps from scratch. DON'T USE WHEN: non-Apple platforms or general coding."
builder-ux
by Bbeierle12
Builder user experience systems for Three.js building games. Use when implementing prefab/blueprint save/load, undo/redo command patterns, ghost preview placement, multi-select, or copy/paste building mechanics. Covers the UX layer that makes building feel responsive and intuitive.
figma-design
by manutej
Figma workflows, components, auto layout, constraints, prototyping, design systems, and plugin development based on Figma Plugin API documentation
frappe-ui-patterns
by lubusIN
UI/UX patterns and guidelines derived from official Frappe apps (CRM, Helpdesk, HRMS). Use when designing interfaces for custom Frappe applications to ensure consistency with the ecosystem.
airbnb-swift-style
by cassiewallace
Enforces the Airbnb iOS Swift Style Guide on Swift code. Use this skill any time the user wants to: review Swift code for style compliance, lint or audit an iOS codebase, apply Airbnb Swift conventions to new or existing code, understand why code violates Airbnb style rules, or get corrected rewrites of Swift snippets. Triggers on any request mentioning Swift code quality, iOS code review, Airbnb style, linting Swift files, or when the user pastes Swift code and asks for feedback, fixes, or a review. Also use when the user asks to "clean up" or "format" Swift code, or asks "is this good Swift?" — even if they don't mention Airbnb by name.
dev-figma-script-install
by Takazudo
Provide Figma capture script installation guidance for web projects. Use when: (1) User wants to set up Figma capture in a web dev project, (2) User says 'figma script install', 'add figma capture', 'figma setup', (3) User wants to enable browser-to-Figma capture in their dev environment
mailchimp-ui-skills
by ihlamury
Mailchimp's UI design system. Use when building interfaces inspired by Mailchimp's aesthetic - light mode, Inter font, 4px grid.
n26-ui-skills
by ihlamury
N26's UI design system. Use when building interfaces inspired by N26's aesthetic - dark mode, Inter font, 4px grid.
figma-ui-skills
by ihlamury
Figma's UI design system. Use when building interfaces inspired by Figma's aesthetic - light mode, Inter font, 4px grid.
Component Patterns Skill
by markus41
"UI component patterns with style-specific implementations and accessibility"
CSS Generation Skill
by markus41
"Generate CSS, Tailwind, and styled-components code from design style selections"
Chakra UI Component Patterns
by markus41
Use these patterns as starting points and customize them with theme tokens and responsive props to match your design system requirements.
audit-ux
by doodledood
Audit UI/UX changes in a focus area against design guidelines for accessibility, consistency, and usability issues.
define-brand-guidelines
by doodledood
'Create a BRAND_GUIDELINES.md that defines how to communicate with your customer. Requires CUSTOMER.md to exist first. Covers voice, tone, language rules, messaging framework, and copy patterns.'
define-design-guidelines
by doodledood
'Create a DESIGN_GUIDELINES.md that defines how to design UI/UX for your customer. Requires CUSTOMER.md to exist first. Covers aesthetic direction, design tokens, typography, color, motion, components, and layout patterns. Bakes in frontend-design skill principles to avoid generic AI aesthetics.'
arcgis-widgets-ui
by SaschaBrunnerCH
Build map user interfaces with ArcGIS widgets, Map Components, and Calcite Design System. Use for adding legends, layer lists, search, tables, time sliders, and custom UI layouts.
ux-design
by sebnow
"Use when designing user interfaces, improving UX, or creating design specifications. Enforces user-centered process, WCAG 2.1 AA accessibility, mobile-first approach. Triggers: 'design interface', 'improve UX', 'user experience', 'accessibility', 'responsive design', 'user flow'."
ui-design
by sebnow
"Use when implementing visual design, styling components, or building design systems. Enforces intentional aesthetics, systematic design tokens, production-grade implementation. Triggers: 'implement design', 'style component', 'design system', 'design tokens', 'visual design', 'component library', 'frontend styling'."
webflow-designer-api
by 224-Industries
Work with the Webflow Designer API — either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns. Use when creating, debugging, or modifying Designer Extensions, OR when the user wants to run Designer API code in the Playground app.
frontend-design
by truongnat
God-Tier UI/UX Engineering skill for world-class, agency-level interfaces. Transcends AI-generated aesthetics by enforcing monochromatic sophistication, SVG grain texturing, Lucide-integrated iconography, and performance-first motion physics. This is the "Final Boss" of frontend engineering standards.
ios-glass-ui-designer
by heyman333
Redesign mobile app UI to feel unmistakably iOS-native with modern Apple-like glass materials (translucency, blur, depth). Use this skill when designing iOS-first interfaces that leverage iOS material hierarchy (ultra-thin/regular/thick), SF Pro typography, safe-area patterns, and system component behaviors—without overdoing glass effects.