Design
UI/UX direction, visual design, and design systems
ui-analyzer
by smallnest
Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports and requests implementation. Provides detailed layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices.
web-design
by goncalossilva
"Design and implement distinctive, production-ready web interfaces with strong aesthetic direction. Use when asked to create or restyle web pages, components, or applications (HTML/CSS/JS, React, Vue, etc.)."
htest
by htest-dev
Use when writing or modifying tests with hTest (htest.dev) — JS-first or HTML-first. Use when a project has htest.dev in devDependencies or uses npx htest to run tests. Use when writing declarative tests as nested object literals, or reftest tables in HTML.
design-engineering
by liqiongyu
"Stand up a Design Engineering practice (hybrid design+engineering) by producing a Design Engineering Execution Pack: charter, prototype→production workflow, design-to-code contract, component delivery plan, and quality bar. Use for design engineering, UI engineering, design systems engineering, and prototype-to-production processes."
design-systems
by liqiongyu
"Build or evolve a design system by producing a Design System Operating Pack: charter, token model (incl. depth/elevation), component inventory + roadmap, blockframe-to-component mapping, documentation plan, and governance/adoption plan. Use for design systems, component libraries, design tokens, UI kits, and pattern libraries."
ui-ux-pro-max
by samhvw8
"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."
canvas-design
by samhvw8
"Visual art and static design creation. Outputs: .png, .pdf documents. Capabilities: poster design, infographics, visual art, design philosophy creation, composition, layout. Actions: create, design, compose, generate posters/art/infographics. Keywords: poster, infographic, visual art, canvas, composition, layout, PDF design, PNG creation, graphic design, visual hierarchy, design philosophy, aesthetic movement, static design, printable, artwork. Use when: creating posters, designing infographics, generating visual art, making static designs, producing printable materials, expressing design philosophies visually."
pencil-ui-design
by AllenAI2014
使用 Pencil MCP 创建工业级 UI 设计的完整工作流和组件库
uiux-react-jsx-packager
by okwinds
Package an existing React UI/UX demo into a single self-contained .jsx file with default-export root component, zero third-party runtime dependencies (no react-router/lucide/echarts/etc.), in-file styles (style tag or inline style objects), inline SVG icons, embedded or placeholder images, and state-based navigation. Use when asked to “合并为单文件 JSX/单文件打包/one-file React/零外部依赖/内联 CSS/替换图标库/用 state 做路由/把 demo 打包成独立 JSX 文件”.
ui-ux-spec-genome
by okwinds
"A portable, reproducible UI/UX spec standard: scan a frontend repo for UI sources and scaffold a ui-ux-spec documentation bundle (tokens, global styles, components, patterns, pages, a11y). Also supports plan-driven UI-only refactors based on an existing ui-ux-spec. Excludes business logic and domain workflows."
prd-to-uiux-rd-spec
by okwinds
从产品 PRD 产出“复刻级可落地”的 UI/UX 研发规格文档包（目录同构骨架、公共基座、组件/页面契约、覆盖映射、索引与 worklog）。适用于需要把 PRD 转成前端可复刻实现的规格文档、UI/UX 研发规格、界面契约与验收标准的场景；避免用于只要视觉灵感/纯 UI 赏析或直接写代码实现的请求。
apple-hig-designer
by axiaoge2
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.
frontend-css-best-practices
by jasonraimondi
Produce idiomatic, browser-aware modern CSS with progressive-enhancement fallbacks for CSS, Tailwind, and Svelte styling tasks. Use for layout, spacing, typography, color/theming, animation, responsive/container-query work, selector/specificity cleanup, and interactive UI styling. Do not use for non-styling business logic or design critique without code edits.
design-builder
by adeonir
Design-to-code pipeline: extract copy from URLs, extract design tokens from images, then build React components or HTML preview variants. Use when: extracting content from websites, extracting design systems, generating frontend code, previewing design variants, sending to Figma via MCP. Triggers on "extract copy", "extract design", "build frontend", "generate variants", "export design", "send to Figma".
claude-design-pack
by Peiiii
"Design toolkit: UI/UX, themes, brand guidelines, and generative art."
ffmpeg-usage
by ychoi-kr
"ffmpeg recipes and best practices: convert, concatenate, merge, resize, compress, GIF creation, audio extraction, subtitles, optimize for social platforms."
ui-design-review
by mastepanoski
Comprehensive visual design and aesthetics evaluation. Analyzes typography, color, spacing, hierarchy, consistency, branding, and modern design trends for polished, professional interfaces.
ui-ux-reviewer
by ArjenSchwarz
Evaluate and improve user experience of interfaces (CLI, web, mobile)
code-audit
by ArjenSchwarz
Parallel code audit combining simplification and design critique analysis. Spawns two subagents (code-simplifier and design-critic) to independently review the current directory, consolidates findings into a prioritised report, and offers to create Transit tasks for actionable items. Use when you want a broad quality review of a codebase, e.g. "audit this code", "review codebase quality", "find improvements", "code audit".
composio-connect
by Casper-Studios
Universal fallback for executing actions across 1,000+ apps when no other skill is available. Use this skill ONLY when user requests an action on an app/service not covered by other skills (e.g., Notion, Asana, Trello, HubSpot, Airtable, Linear, Monday, Zendesk, Intercom, Stripe, Shopify, QuickBooks, Zoom, Microsoft 365, Dropbox, Box, Figma, Jira, Confluence, etc.). Do NOT use if another skill already handles the service. Triggers on requests to connect to external apps, execute actions on third-party services, or when user asks "can you actually do X" for an unsupported service.
liquid-glass
by Casper-Studios
"Build native macOS/iOS apps with Apple's Liquid Glass design language and Human Interface Guidelines. Use when creating SwiftUI interfaces, implementing translucent materials, designing cards/rows/badges, applying SF Symbols, following Apple HIG spacing/typography/color systems, or building any app that should feel native to Apple platforms. Triggers on macOS apps, iOS apps, SwiftUI UI, Apple-style design, glass effects, material backgrounds, native app design."
casper-design-system
by Casper-Studios
Casper Studios internal design system for generating consistent, production-grade SaaS UI. Use this skill whenever generating UI code for internal tools, client apps, dashboards, POCs, prototypes, or any visual interface — even quick mockups or artifacts. Apply it any time the output is a React component, page, or layout. If the user mentions "our design system", "Casper style", "match our look", or asks you to build any kind of app or interface, use this skill. Also trigger when restyling or theming existing UI to match Casper's visual language. This skill takes priority over generic frontend-design guidance.
figrefer
by Takazudo
Read the currently selected Figma element and work with it. Use when: (1) User says 'figrefer', 'figma refer', 'check my figma selection', (2) User wants to implement or analyze a design selected in Figma desktop app, (3) User says 'what am I selecting in figma', 'implement this figma design'
anthropic-style
by yulonglin
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply. Taken from https://github.com/anthropics/skills/blob/main/skills/brand-guidelines/SKILL.md