Design AI agent skills

3,804 skills in the archive. Read a skill’s instructions or open its original repository.

• Atelier

  by @simota

  Orchestrating design-to-implementation pipelines (code to visual to code closed loop), persisting a project design system across agents. Not for a single prototype (Forge) or direction only (Vision).

• Frontend Design

  by @JinFanZheng

  Create distinctive, production-grade frontend interfaces with high design quality. Activate when user needs: "生成网页/创建网页/设计界面/前端设计/UI设计/网页制作/交互式网页". Output: Interactive HTML/CSS/React (web UI, components, dashboards, landing…

• Agency Agents Ai Specialists

  by @reason-machines

  A collection of specialized AI agent personalities for Claude Code, Cursor, Aider, Windsurf, and other AI coding tools — covering engineering, design, marketing, sales, and more.

• Awesome Design Md Jp

  by @reason-machines

  Create accurate Japanese UI DESIGN.md files for AI agents with proper CJK typography, font stacks, line-height, kinsoku shori, and mixed typesetting rules.

• App Store Screenshots Generator

  by @reason-machines

  Generate production-ready App Store screenshots for iOS apps using AI agents, Next.js, and html-to-image

• 3dsvg Interactive React

  by @reason-machines

  Turn SVGs into interactive React 3D components using the 3dsvg library and visual editor

• Ui Ux Design Pro

  by @saifyxpro

  Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems…

• Api Designer

  by @zhaono1

  REST and GraphQL API architect for designing robust, scalable APIs. Use when designing new APIs or improving existing ones.

• Bootstrap5 Ui

  by @wshaddix

  Production-grade Bootstrap 5.3 patterns for building modern, responsive web UIs in HTML and ASP.NET Core Razor Pages/Views. Use when creating or styling web pages, layouts, navigation, forms, cards, modals, tables, or any UI…

• Figma Designer

  by @zhaono1

  Analyzes Figma designs into implementation-ready visual evidence, tokens, component specifications, and interaction states for handoff to planning or development.

• Debug Connection

  by @jiaxiaojunQAQ

  Debug WebSocket connection issues between CLI and FigJam plugin. Use when diagrams aren't syncing or connection fails.

• Power Ui

  by @mcouthon

  Build power-user interfaces: keyboard-first, information-dense, AI-present. Covers row patterns, keyboard layers, AI integration, liveness, nav chrome, color discipline, triage UX, visual impact planning, and checklists.…

• Crap Analysis

  by @wshaddix

  Analyze code coverage and CRAP (Change Risk Anti-Patterns) scores to identify high-risk code. Use OpenCover format with ReportGenerator for Risk Hotspots showing cyclomatic complexity and untested code paths. Use when evaluating…

• Design

  by @mcouthon

  Use when building dashboards, SaaS UIs, admin interfaces, or any interface needing polished professional design. Covers design direction, craft principles, and 9-phase implementation. Triggers on: 'use design mode', 'design…

• Dotnet Architecture Patterns

  by @wshaddix

  Organizing APIs at scale. Vertical slices, request pipelines, caching, error handling, idempotency.

• Dotnet Aot Wasm

  by @wshaddix

  AOT-compiling for WebAssembly. Blazor/Uno WASM AOT, size vs speed, lazy loading, Brotli.

• Tailwind Best Practices

  by @AsyrafHussin

  Tailwind CSS patterns and conventions. Use when writing responsive designs, implementing dark mode, creating reusable component styles, configuring Tailwind, or migrating from v3 to v4. Triggers on tasks involving Tailwind…

• Zoom Cobrowse Sdk

  by @zoom

  Zoom Cobrowse SDK for web - JavaScript SDK for real-time collaborative browsing between agents and customers. Features include annotation tools, privacy masking, remote assist, and PIN-based session sharing.

• Web Design Guidelines

  by @AsyrafHussin

  UI/UX best practices and accessibility audit. Use when reviewing UI code, checking accessibility, running accessibility audits, auditing forms, or ensuring web interface best practices. Triggers on "audit accessibility", "check…

• Design Auditor

  by @Ashutos1997

  Audit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code superpowers across all 19…

• Mapbox Style Patterns

  by @mapbox

  Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing specific map…

• Mapbox Store Locator Patterns

  by @mapbox

  Common patterns for building store locators, restaurant finders, and location-based search applications with Mapbox. Covers marker display, filtering, distance calculation, and interactive lists.

• 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…

• Mapbox Search Patterns

  by @mapbox

  Expert guidance on choosing the right Mapbox search tool and parameters for geocoding, POI search, and location discovery

• Mapbox Location Grounding

  by @mapbox

  Compose Mapbox MCP tools to produce grounded, cited location-aware responses from live data instead of training data

• Service Portal Pages

  by @serac-labs

  The container side of Service Portal — the sp_portal → sp_page → sp_row → sp_column → sp_instance hierarchy, why widget options belong on the instance and not the widget, cloning pages, and what is theme (sp_theme, sp_brand,…

• Zoom Mcp/Docs

  by @zoom

  Legacy compatibility route for requests that call the current Zoom Canvas MCP server "Docs MCP". Route new work to zoom-mcp/canvas and use the Canvas endpoint, scopes, and tools.

• Ai Friendly Web Design

  by @ianho7

  Build, review, and refactor web interfaces that are easy for humans, screen readers, browser automation, Playwright tests, and AI agents to understand and operate. Use for UI components, forms, frontend features, semantic HTML,…

• 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…

• Drupal Canvas Sdc

  by @grasmash

  Drupal Canvas SDC (Single Directory Components) with Twig templates. Use when creating, modifying, or troubleshooting Twig-based Canvas components in themes/modules, component.yml schemas, Canvas preview issues, or page builder…

• Drupal Canvas

  by @grasmash

  Drupal Canvas Code Components - a framework for building interactive, server-side-rendered components in Drupal. Covers scaffolding with @drupal-canvas/create, the Nebula starter template, component architecture, and integration…

• Canvas Contribution

  by @grasmash

  Canvas contribution workflow for contributing features/fixes back to drupal.org. Use when developing features for Canvas module that will be contributed upstream. Covers two-repository workflow, issue forks, merge requests, and…

• Notion Illustration

  by @vm0-ai

  Notion-editorial-style hand-drawn spot illustration. Black brush-pen ink on white, tapered confident strokes, solid-black curly hair, solid-black pants/shoes, 3/4 face turned toward viewer with closed-eye smile and soft nose…

• Mellow Pop

  by @vm0-ai

  Chill flat-vector editorial poster of a serene recurring character (closed-eye smile, tiny nose hint, short dark bobbed hair) posed inside a scene-as-metaphor composition on a fully saturated solid color background, with a…

• Jade Blockprint

  by @vm0-ai

  Two-pass hand-drawn block-print spot illustration — one accent color painted as free-floating shapes on pure white, with chunky black ink line art layered on top. Imperfect screen-print feel, linocut speckle grain. Eight named…

• Inkstomp

  by @vm0-ai

  Inkstomp — a loud, hand-screened indie-packaging poster style. Full-bleed saturated flat color filling the entire canvas, a two-line hand-lettered headline (thin arched caps over chunky drop-shadowed display), and one weird-cute…

• Ink Mascot

  by @vm0-ai

  Generate a vintage editorial marketing card in a locked style — hand-drawn ink line illustration of an anthropomorphic object (with stick arms, legs, and chunky white sneakers) standing on a single solid saturated color…

• Painterly Botanical

  by @vm0-ai

  Painterly watercolor + gouache portrait illustration with a single figure embraced by lush botanicals. Closed-eye introspective subject, loose translucent washes with visible bleeds, sparse crisp ink line accents, and a softly…

• Flat Poster

  by @vm0-ai

  Vertical flat-color editorial poster style — a single saturated solid background, one centered hand-drawn vector subject in bold deep-navy outlines with a strict two-tone fill (white + a slightly darker bg-tint accent), small…

• Grain Poster

  by @vm0-ai

  Flat-vector editorial poster of a serene full-body figure interacting with one hero prop — riso/halftone grain confined to a single textile (skirt or trousers), closed-eye smiling face with a single round red blush, solid black…

• Grainy Duotone

  by @vm0-ai

  Hand-drawn editorial spot illustration — grainy charcoal-stippled black-ink figures on a warm cream background, paired with free-floating two-tone color blocks (no outlines) filled with internal patterns and surrounded by small…

• Light Pop Portrait

  by @vm0-ai

  Light flat-vector single-character portrait — a hand-drawn child/tween on a fully saturated flat color background, with chunky black hair, big round eyes, a tiny red nose, and pink five-point-star sparkle blush. Trigger when the…

• Shadow Pop

  by @vm0-ai

  Bright flat-vector editorial illustration style — every colored shape sits in front of an offset black silhouette of itself (the signature depth trick, no outlines on the fills), with white hand-drawn dashed stitching, scattered…

• Papernook

  by @vm0-ai

  Hand-drawn editorial illustration set in a cozy cluttered personal-studio scene. Loose scratchy black ink outlines that wobble, textured gouache fills with visible brush marks, warm cream paper background, simplified dot-eye…

• Inkdab

  by @vm0-ai

  Brush-pen editorial illustration with a single free-floating accent color "dab" sitting underneath loose ink linework. Black hand-wobbled ink on pure white background, ONE flat accent-color shape per prop (painted-first, never…

• Endpaper

  by @vm0-ai

  Riso-grain flat-vector collection of chill characters or objects scattered across a fully saturated solid color field — like the inside endpaper of a children's picture book. Two-tone interior shading on every character, closed…

• Sunlit Gouache

  by @vm0-ai

  Sunlit Gouache — bright pastel travel-painting illustration in opaque gouache on textured paper. Chunky flat brushstrokes, dappled cream-and-butter-yellow sunlight, sky-blue + sage-green + terracotta accents, figures seen from…

• Loose Contour

  by @vm0-ai

  Flat editorial spot illustration in a locked house style — confident open-contour ink drawings in dark teal-green over flat offset color blobs (printing-misregistration look), with one continuous looping ribbon line weaving…

• Crowd Ink

  by @vm0-ai

  Hand-drawn editorial crowd illustration — confident sketchy black ink contours over flat 3-color spot fills on a pure-white background, scene-as-metaphor composition, fine-line backdrop drawn lighter than the foreground, and…

• Riso Relic

  by @vm0-ai

  Pop-art retro risograph poster of a single nostalgic everyday object — saturated single-color background, bold black ink outlines, halftone/riso grain, hand-drawn doodle accents (sparkles, squiggles, dots, music notes,…

• Cozy Parlor

  by @vm0-ai

  Hand-painted watercolor + ink-line illustration style — one anthropomorphic animal in a quiet domestic interior, on clean cool-white watercolor paper (never amber-tinted), with a neutral cool palette and a single hot accent pop.…

• Emboss Deboss

  by @vm0-ai

  Poetic editorial posters and covers in sculpted matte paper, with pronounced raised lettering and forms, deeply pressed contours, fine fibers, and intentional negative space. Use for /emboss-deboss, embossed paper posters,…

• Iberian Vignette

  by @vm0-ai

  Hand-drawn editorial vignette illustration in a locked Iberian-Mediterranean style — loose wobble ink linework, flat muted color fills with a cream ground and burgundy/wine as the anchor color, exactly one secondary accent (sage…

• Folk Muse

  by @vm0-ai

  Flat folk-art gouache portrait illustration in the contemporary editorial style of Carson Ellis, Maja Tomljanovic, and Bodil Jane. A single chest-up figure with an elongated mannerist oval face, tiny almond half-lidded eyes,…

• Tiny Wanderer

  by @vm0-ai

  Contemplative bande-dessinée landscape illustration in a locked house style — a tiny human (or 2–3 figures) dwarfed by a vast natural panorama, hand-drawn black ink contour + parallel hatching for clouds/rock/grass texture, flat…

• Sticker Sheet

  by @vm0-ai

  Sticker Sheet — hand-painted gouache sticker-sheet illustration. ~20 small floating themed objects on pure white, punchy saturated palette (coral, mustard, sage, dusty pink, navy, cream, warm brown), flat brushy gouache fills…

• Iso Scene

  by @vm0-ai

  Isometric editorial-magazine scene illustration in a locked flat-vector style — ultra-fine hairline outlines, monochromatic saturated background filling the canvas, and a single composed scene whose props themselves embody the…

• Editorial Flatfolk

  by @vm0-ai

  Editorial hand-drawn naive book-illustration style — flat saturated color blocks, loose hand-drawn ink line overlay on top of the color, subtle paper grain, simple ink sun-ray hatching, and a strong sense of place built from…

• Soft Vector

  by @vm0-ai

  Airy flat-vector spot illustration style — square 1:1 pale-blue canvas, delicate ~1.5-2px dark-navy linework with intentionally OPEN / unclosed outlines, flat color fills, one muted accent hue (mustard / lime-sage / warm-orange…

• Ink Storefront

  by @vm0-ai

  Single-color hand-drawn ink line illustration of a small storefront on warm cream paper — locked house style with confident fineliner contours, a hand-lettered shop sign, foliage, and small street props (bike, A-frame, planters,…

• Op Ed Cover

  by @vm0-ai

  Editorial magazine op-ed cover illustration — flat-vector + paper-grain scene with elongated ink-line characters, a muted retro palette, and a serif headline overlay block in the lower-right corner. Trigger when the user says…

• Postcard Illustration

  by @vm0-ai

  Hand-drawn editorial postcard illustration style. Fine black marker/pen ink linework over flat saturated gouache color fills with sharp edges, dense small repeated ink patterns on surfaces (rows of windows, shingle curves,…

• Vm0 Illustration

  by @vm0-ai

  Generate vm0-style vm0 in-app spot illustrations: bold hand-drawn ink line art with white-filled interiors, a soft rounded color backdrop, transparent output, and simple iconic metaphors for product states.

• Github Copilot

  by @vm0-ai

  GitHub Copilot API for AI coding assistance. Use when user mentions "Copilot", "GitHub Copilot", "AI coding", or asks about Copilot features.

• Ui Ux Pro Max

  by @bamzc

  UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix,…

• Wordpress Block Editor Fse

  by @bobmatnyc

  Modern WordPress block development and Full Site Editing with theme.json, block themes, and custom blocks for WordPress 6.7+

• Wordpress Plugin Fundamentals

  by @bobmatnyc

  Modern WordPress plugin development with PHP 8.3+, OOP architecture, hooks system, database interactions, and Settings API

• Odoo Upgrade

  by @ahmed-lakosha

  Comprehensive Odoo ERP upgrade assistant for migrating modules between Odoo versions (14-19). Handles XML views, Python API changes, JavaScript/OWL components, theme SCSS variables, manifest updates, security implementations,…

• Odoo Report

  by @ahmed-lakosha

  Professional Odoo Email Templates & QWeb Reports - Complete toolkit for creating, managing, and debugging email templates and PDF reports across Odoo 14-19. Includes wkhtmltopdf setup, Arabic/RTL support, bilingual patterns, and…

• Theme Scss

  by @ahmed-lakosha

  Complete SCSS variable reference for Odoo themes. Covers all three core variable systems: $o-theme-font-configs (Google Fonts), $o-color-palettes (color system with 5 semantic colors), and $o-website-values-palettes (115+ keys…

• Theme Create

  by @ahmed-lakosha

  Odoo theme scaffolding and creation pipeline. Generates complete, installable Odoo theme modules with proper file structure, SCSS configuration, page templates, mirror models, theme.utils activation, and auto-fix installation.…

• Frontend Js

  by @ahmed-lakosha

  Odoo frontend JavaScript patterns for website themes. Covers publicWidget framework (complete pattern with editableMode handling), Owl v1/v2 component patterns, _t() translation best practices, Bootstrap 4-to-5 migration,…

• Theme Design

  by @ahmed-lakosha

  Figma-to-Odoo design workflow and complete page template reference. Covers Figma extraction pipeline (colors, typography, layout), Chrome MCP automation, design-to-template matching methodology, header/footer decision…

• 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…

• 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…

• SVG Logo Designer

  by @rknall

  Create professional SVG logos from descriptions and design specifications. Generates multiple logo variations with different layouts, styles, and concepts. Produces scalable vector graphics that can be used directly or exported…

• Atlas Present

  by @tonone-ai

  Generate a polished HTML presentation page and Obsidian Canvas for big releases — new products, takeovers, major migrations. Non-technical audience. Use when asked to "present this", "release announcement", "show what we built",…

• Axe Fix

  by @tonone-ai

  Write accessibility fixes for specific WCAG failures — ARIA, focus management, keyboard patterns. Use when asked to "fix this accessibility issue", "add ARIA labels", or "make this keyboard navigable".

• Atlas Report

  by @tonone-ai

  Render agent findings as a styled HTML report in the browser. Use when asked for "full report", "detailed report", "show in browser", or when CLI output exceeds the 40-line budget.

• Beautiful Feishu Whiteboard

  by @JasonxzWen

  Load when creating or restyling a polished editable Feishu or Lark whiteboard, infographic, diagram, poster, or visual explainer; do not load for generic SVGs, static images, or other whiteboard platforms.

• Effective Interact

  by @JasonxzWen

  Load when agent pauses to report relatively complex information needing Chinese-first clear complex communication, alignment, multi-option choice, status/incident, long-task fact ledgers, implementation plans, reviews, maps,…

• Clone Website

  by @JasonxzWen

  Load when the user explicitly asks to clone, reverse-engineer, or rebuild a website they own or are authorized to reproduce; do not load for generic redesign, inspiration, scraping, phishing, impersonation, or copying…

• Tailwind 4 Docs

  by @Lombiq

  Comprehensive Tailwind CSS v4 documentation snapshot and workflow guidance. Use when answering Tailwind v4 questions, selecting utilities/variants, configuring Tailwind v4, or migrating projects from v3 to v4 with official docs…

• Design Taste Frontend

  by @JasonxzWen

  Load when a task needs anti-template frontend visual direction, design-read calibration, or pre-flight critique for landing pages, portfolios, marketing pages, or redesigns; do not load for dashboards, data tables, multi-step…

• Web Artifacts Builder

  by @JasonxzWen

  Load when a task needs complex standalone React/Tailwind/shadcn browser artifacts with state, routing, or bundled components; use effective-interact for reports and frontend-design for production UI.

• Frontend Slides

  by @JasonxzWen

  Load when a task needs a browser-based HTML presentation, talk or pitch deck, existing-deck enhancement, or PPT/PPTX-to-web conversion; do not load for reports, product UI, or interactive courses.

• Ionic Design

  by @Cap-go

  Guide to using Ionic Framework components for beautiful native-looking Capacitor apps. Covers component usage, theming, platform-specific styling, and best practices for mobile UI. Use this skill when users need help with Ionic…

• Konsta Ui

  by @Cap-go

  Guide to using Konsta UI for pixel-perfect iOS and Material Design components in Capacitor apps. Works with React, Vue, and Svelte. Use this skill when users want native-looking UI without Ionic, or prefer a lighter framework.

• Tailwind Capacitor

  by @Cap-go

  Guide to using Tailwind CSS in Capacitor mobile apps. Covers mobile-first design, touch targets, safe areas, dark mode, and performance optimization. Use this skill when users want to style Capacitor apps with Tailwind.

• Apple Design

  by @JasonxzWen

  Load when a frontend task needs Apple-platform design guidance or physical, gesture-driven, velocity-aware, interruptible interaction; skip generic visual styling and use review-animations for report-only motion review.

• Animation Vocabulary

  by @JasonxzWen

  Load when a user describes a Web animation or motion effect without knowing its name and needs the precise term or close alternatives; use only for naming, not design, implementation, or review.

• Review Animations

  by @JasonxzWen

  Load when existing animation or motion code, a motion diff, or a rendered interaction needs an evidence-backed craft review; report findings only and use code-review for general source review.

• Capacitor Performance

  by @Cap-go

  Performance optimization guide for Capacitor apps covering bundle size, rendering, memory, native bridge, and profiling. Use this skill when users need to optimize their app performance.

• Capacitor Keyboard

  by @Cap-go

  Guide to handling keyboard in Capacitor apps including visibility detection, accessory bar, scroll behavior, and input focus. Use this skill when users have keyboard-related issues.

• Ponytail

  by @JasonxzWen

  Load when coding work should be deliberately minimal: YAGNI, reuse existing code, prefer stdlib/native/already-installed dependencies, shortest correct diff, no unrequested abstractions, or over-engineering review; do not load…

• Grill Me

  by @JasonxzWen

  Load when beginning every repository mutation task to run one dependency-layered batch interview; a fully aligned task takes the zero-question path, while durable documentation work uses grill-with-docs to reuse the same…

• Frontend Design

  by @JasonxzWen

  Load when a task needs polished product UI, web pages, landing pages, dashboards, React components, HTML/CSS layouts, or styling; skip routine frontend logic and reports.

• Openspec Apply Change

  by @JasonxzWen

  Load when a task needs to implement or continue an existing OpenSpec change; use the repository's normal development contract for non-OpenSpec implementation.

• Arco Design Vue

  by @arco-design

  Arco Design Vue UI 组件库参考，面向 Vue 3 和 `@arco-design/web-vue`。当用户要求构建 Vue 页面、创建 Vue UI、使用 Arco Vue 编写前端代码、开发 Vue 仪表盘或应用，或提到 Arco Design Vue、`@arco-design/web-vue`、`a-button`、`a-table`、`a-form`、`a-modal`、`a-select`、`Message`、任意 Arco…

• Arco Design

  by @arco-design

  Arco Design React UI component library reference (@arco-design/web-react). Use this skill whenever the user asks to build a page, create a UI, write frontend code, develop a web application, design a dashboard, or implement any…