Design
UI/UX direction, visual design, and design systems
storybook
by Tyler-R-Kendrick
Use when documenting, developing, or testing UI components with Storybook. Covers CSF3, CSF Factories, play functions, Args, interaction testing, and addon configuration. USE FOR: Storybook stories (CSF3 and CSF Factories), play functions, Args and ArgTypes, interaction testing, Storybook addons, visual regression testing, component documentation DO NOT USE FOR: design token authoring (use design-tokens), token transformation (use style-dictionary), Figma design handoff (use figma), cross-framework component compilation (use mitosis)
frontend
by Tyler-R-Kendrick
Frontend architecture approaches — from Multi-Page Apps through Single Page Apps, Server-Side Rendering, Islands Architecture, and Micro-Frontends. Covers the full spectrum of client-side concerns: routing, state management, data fetching, code splitting, and hydration. USE FOR: frontend architecture selection, comparing SPA vs SSR vs micro-frontends, choosing frontend frameworks, client-side architecture decisions DO NOT USE FOR: specific rendering approach details (use sub-skills: spa, pwa, micro-frontends, ssr), backend architecture (use dev/backend), design system components (use design-system)
design-system
by Tyler-R-Kendrick
Use when building or maintaining a design system — the coordinated set of design tokens, component libraries, documentation, and tooling that ensures visual and behavioral consistency across products. USE FOR: design system architecture, choosing token formats vs component frameworks, connecting Figma to code, design-to-development workflows, multi-platform consistency DO NOT USE FOR: specific token authoring (use design-tokens), Figma workflows (use figma), component cataloging (use storybook), token transformation (use style-dictionary), cross-framework components (use mitosis)
design-tokens
by Tyler-R-Kendrick
Use when authoring, structuring, or consuming design tokens in the W3C Design Tokens Community Group (DTCG) format. Covers token types, groups, aliases, composite tokens, and file conventions. USE FOR: W3C DTCG token files, token types (color, dimension, typography), token aliases and references, token groups, composite tokens, .tokens.json files DO NOT USE FOR: transforming tokens into platform code (use style-dictionary), Figma variable management (use figma), component styling (use the relevant framework skill)
figma
by Tyler-R-Kendrick
Use when working with Figma as the design source for a design system — including Variables, Dev Mode, Code Connect, the REST API, and MCP-based design-to-code workflows. USE FOR: Figma Variables, Figma Dev Mode, Code Connect, Figma REST API, Tokens Studio plugin, Figma MCP server, design-to-code handoff DO NOT USE FOR: token file format details (use design-tokens), token build pipelines (use style-dictionary), component documentation (use storybook)
mitosis
by Tyler-R-Kendrick
Use when writing cross-framework UI components with Mitosis (Builder.io). Write components once in a JSX subset, compile to React, Vue, Angular, Svelte, Solid, Qwik, and more. USE FOR: Mitosis component authoring, cross-framework component compilation, multi-framework design system components, Mitosis JSX syntax, mitosis.config.js DO NOT USE FOR: single-framework components (use the framework's own skill), design token management (use design-tokens or style-dictionary), component documentation (use storybook)
claude-design-pack
by Peiiii
"Design toolkit: UI/UX, themes, brand guidelines, and generative art."
frontend-design
by ocrbase-hq
Create distinctive, production-grade frontend interfaces 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, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-design-guidelines
by ocrbase-hq
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".
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.
UI/UX Design Review
by rknall
"Comprehensive design review for websites and desktop applications with extensive accessibility analysis. Use this skill when users ask you to review UI/UX designs, wireframes, mockups, prototypes, or deployed interfaces for usability, accessibility (WCAG compliance), visual design, interaction patterns, responsive design, and best practices for web and desktop applications."
Web Design Builder
by rknall
"Create and refactor HTML5/JavaScript web designs from specifications or descriptions. Generates complete, accessible, responsive web designs with modern frameworks. Automatically verifies designs using Playwright MCP for accessibility and functionality testing. Use this skill when users ask to create web designs, mockups, landing pages, web applications, or refactor existing HTML/CSS/JS designs."
figma-plugin
by srstomp
Use when building Figma plugins, creating design automation tools, implementing sandbox/UI communication, or working with the Figma Plugin API for node manipulation, styles, and components.
vision-tool
by farhanic017
ALWAYS-ON image & video analysis for AI coding assistants. Every model — including models without native vision (big-pickle, DeepSeek, local models) — MUST use this tool for ALL image/video files. Never refuse, never say "I can't view images".
frontend-design-fix
by matteocervelli
Fix generic frontend designs by applying aesthetic upgrades across the 5 design dimensions
frontend-design
by matteocervelli
Create distinctive, production-grade frontends by composing design dimensions and tech-specific implementations
pencil-ui-design
by AllenAI2014
使用 Pencil MCP 创建工业级 UI 设计的完整工作流和组件库
ui-ux-designer
by nahisaho
Copilot agent that assists with user interface and experience design, wireframes, prototypes, design systems, and usability testing Trigger terms: UI design, UX design, wireframe, mockup, prototype, user interface, user experience, design system, component library, accessibility, responsive design Use when: User requests involve ui ux designer tasks.
design-reviewer
by nahisaho
Copilot agent that assists with systematic design review using ATAM (Architecture Tradeoff Analysis Method), SOLID principles, design patterns, coupling/cohesion analysis, error handling, and security requirements Trigger terms: design review, architecture review, ATAM, SOLID principles, design patterns, coupling, cohesion, ADR review, C4 review, architecture analysis, design quality Use when: User requests involve design document review, architecture evaluation, or design quality assessment tasks.
brand-marketing
by dylantarre
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
product-engineer-agent
by michaelboeding
Use this skill to design new products, iterate on product ideas, or develop product specifications. Triggers: "design product", "new product idea", "product concept", "product development", "product spec", "iterate on product", "product design", "invention", "prototype spec", "product requirements", "product engineering", "develop product" Outputs: Product specification, BOM estimate, feature breakdown, differentiation analysis.
style-guide
by michaelboeding
Analyze a codebase to extract its conventions, patterns, and style. Spawns specialized analyzer agents that each focus on one aspect (structure, naming, patterns, testing, frontend). Generates a comprehensive style guide that other skills can reference. Use when starting work on an unfamiliar codebase, or to create explicit documentation of implicit conventions.
brand-research-agent
by michaelboeding
Use this skill to analyze a brand from their website before creating content. Triggers: "analyze brand", "research brand", "brand guidelines", "brand profile", "understand brand", "brand colors", "brand voice", "before creating content for" Extracts: colors, typography, voice/tone, products, audience, competitive positioning. Outputs a reusable brand_profile.json that producer skills can use.
image-generation
by michaelboeding
Use this skill for any image-related AI generation or editing task. Triggers include: GENERATE: "generate image", "create image", "make picture", "draw", "visualize", "image of", "create art", "generate art" EDIT: "edit image", "modify image", "change image", "update image", "fix image", "enhance image" ADD/REMOVE: "add to image", "put in image", "remove from image", "delete from image", "add element" STYLE: "style transfer", "make it look like", "convert style", "apply style", "in the style of" PRODUCT: "product photo", "product placement", "place product", "mockup", "put product on" COMPOSITE: "combine images", "merge images", "blend images", "create composite" Supports text-to-image generation, image editing with references, product placement, style transfer, and multi-image composition using Google Gemini (Nano Banana Pro) or OpenAI DALL-E.