Design
UI/UX direction, visual design, and design systems
frontend-enhancer
by travisjneuman
This skill should be used when enhancing the visual design and aesthetics of web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. REQUIRES ui-research skill first. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.
mapbox-cartography
by mapbox
Expert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective and beautiful maps with Mapbox. Use when designing map styles, choosing colors, or making cartographic decisions.
muriel
by andyed
"Next-gen visual-production skill for LLMs — ten channels of tool-use recipes (raster, SVG, web, interactive, video, science, gaze, terminal, dimensions, style-guides), a two-tier brand-token schema with motion, anti-patterns per channel, a multi-constraint solver that enforces 8:1 contrast at render time, and a vision-model critique agent grounded in Tufte / Bertin / Gestalt. Use when the user needs any visual artifact for human eyes."
md2book
by ZeroxZhang
将 Markdown 格式的书籍转换为专业排版的 PDF 电子书，支持智能分页、中文完美渲染、精美装帧设计和多种视觉主题
web-design-guidelines
by mrmps
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".
tailwind-design-system
by mrmps
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
tailwind-design-system
by mrmps
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
generic-react-design-system
by travisjneuman
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
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."
browser-workflow-generator
by neonwatty
Generates, creates, or updates browser workflow files. Use this when the user says "generate browser workflows", "create browser workflows", "update browser workflows", or "iterate on browser workflows". Thoroughly explores the app's codebase to discover all user-facing features, routes, and interactions. Creates comprehensive numbered workflows with substeps that cover the full user experience.
feature-interview
by neonwatty
Deeply interviews the user about a feature idea before implementation. Use this when the user says "interview me about [feature]", "I want to create a new feature", "let's create a new feature", "new feature", "plan a feature", or describes a feature they want to build. Asks probing, non-obvious questions about technical implementation, UI/UX decisions, edge cases, concerns, tradeoffs, and constraints. Continues interviewing until the feature is fully understood, then writes a detailed implementation plan.
tooyoung:excalidraw-artist
by shiqkuangsan
"Create Excalidraw hand-drawn style diagrams (architecture, flowchart, swimlane, sequence, wireframe). Trigger words: draw diagram, architecture diagram, flowchart, swimlane, excalidraw, diagram"
frontend-design
by smallnest
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
brand-guidelines
by smallnest
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.
web-design-guidelines
by jarrodwatts
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".
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 赏析或直接写代码实现的请求。
design-guide
by tyrchen
Extract comprehensive design language from websites including colors, typography, animations, interactive states, shadows, gradients, component patterns, and UX behaviors. Generates pixel-perfect design guides with responsive screenshots and complete design system documentation. Use when analyzing website design, creating design systems, or rebuilding sites.
front-ui-skills
by ihlamury
Front's UI design system. Use when building interfaces inspired by Front's aesthetic - light mode, Inter font, 4px grid.
brand-content-design
by camoa
Use when user says "create presentation", "make carousel", "create HTML page", "make landing page", "build web page", "html design system", "design system", "setup brand", "brand init", "extract brand", "get outline", or wants to create visual content with consistent branding. Creates branded presentations, carousels, and HTML pages using a layered philosophy system.
frontend-engineer
by bahayonghang
前端 UI/UX 设计开发专家代理，擅长将设计转化为精美的界面实现。当用户需要以下帮助时使用：(1) 创建新的 UI 组件 (2) 改进界面视觉效果 (3) 实现动画和交互 (4) 响应式设计 (5) 设计系统构建 (6) 即使没有设计稿也能创造美观界面。触发词包括：「UI」「界面」「组件」「样式」「动画」「好看」「美化」「设计」等前端视觉相关请求。
invoice-generator
by dkyazzentwatwa
Generate professional PDF invoices from line items with customizable templates, tax calculations, and branding. Supports batch generation from CSV.
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.