Design AI agent skills

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

• Using Figma

  by @bitwarden

  Read and inspect Figma designs via the Dev Mode MCP server — selects the right tool, parses Figma URLs into fileKey and nodeId, and turns design context into useful input for critique, copy review, handoff prep, and Design…

• Prd Template

  by @yezannnnn

  Product Requirements Document creation following proven PM template structure. Use when the user asks to create, write, draft, or help with a PRD, product requirements document, product spec, feature specification, or product…

• Navigating Design Jira Process

  by @bitwarden

  Move design work through Bitwarden's Product and Design Jira workflow — final designs attached to tickets, the 30/60/90 critique cadence tracked in Figma, status transitions on engineering epics and stories, and the one-off…

• Facilitating Design Critique

  by @bitwarden

  Run or participate in a Bitwarden design critique session — the weekly team critique and one-off product design reviews — grounded in the team's published etiquette guide and the Product Design Review Guidelines.

• Design Review

  by @bitwarden

  Bitwarden design team's Code of Conduct combined with the 30/60/90 critique framework — stage-appropriate critique, product-not-designer focus, content evaluated alongside visual design at 60% and 90%.

• Preparing Design Handoff

  by @bitwarden

  Prepare a Bitwarden design handoff — the Figma file in Ready-for-Dev state and the Jira state transitions that go with it. The end-of-In-Design gate / checklist.

• Modern Accessible Html Jsx

  by @academind

  Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes

• Modern Tailwind

  by @academind

  Build clean, scalable UIs with Tailwind CSS using modern utilities and variants

• Maplibre Mapbox Migration

  by @maplibre

  Migrating from Mapbox GL JS to MapLibre GL JS — package and import changes, removing the access token, choosing tile sources, plugin equivalents, and what you gain or give up. Use when moving an existing Mapbox map to MapLibre.

• Slide Deck

  by @code-on-sunday

  Use when building browser-based presentation slide decks, creating training presentations, generating React+Vite slide decks with animations, or making professional slides. Triggers on slide deck, presentation, training slides,…

• Architecture Review

  by @proflead

  Review a system architecture for scalability, reliability, and maintainability. Use when a senior developer needs to critique a design.

• Domain Modeling

  by @proflead

  Model domains and bounded contexts for complex systems. Use when a senior developer needs domain-driven design guidance.

• Css Layout Helper

  by @proflead

  Explain CSS layout issues and propose fixes. Use when a junior developer is struggling with alignment or spacing.

• System Design Draft

  by @proflead

  Draft a practical system design for a feature. Use when a mid-level developer needs a starting architecture.

• Agent Orchestration Improve Agent

  by @diegosouzapw

  Agent Performance Optimization Workflow workflow skill. Use this skill when the user needs Systematic improvement of existing agents through performance analysis, prompt engineering, and continuous iteration and the operator…

• Agent Orchestration Improve Agent V2

  by @diegosouzapw

  Agent Performance Optimization Workflow workflow skill. Use this skill when the user needs Systematic improvement of existing agents through performance analysis, prompt engineering, and continuous iteration and the operator…

• 2d Games

  by @diegosouzapw

  2D Game Development workflow skill. Use this skill when the user needs 2D game development principles. Sprites, tilemaps, physics, camera and the operator should preserve the upstream workflow, copied support files, and…

• 2d Games V2

  by @diegosouzapw

  2D Game Development workflow skill. Use this skill when the user needs 2D game development principles. Sprites, tilemaps, physics, camera and the operator should preserve the upstream workflow, copied support files, and…

• 2d Games V3

  by @diegosouzapw

  2D Game Development workflow skill. Use this skill when the user needs 2D game development principles. Sprites, tilemaps, physics, camera and the operator should preserve the upstream workflow, copied support files, and…

• Screenshot

  by @letta-ai

  Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.

• Figma

  by @letta-ai

  Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code…

• Redesign My Landingpage

  by @instructa

  Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify. Use when the user asks for a landing page,…

• Hwc Ux Feedback

  by @TheHotwireClub

  Implement cross-cutting Hotwire UX feedback patterns: loading states, busy indicators, progress bars, optimistic UI, render interception, and view/page transitions. Prefer this skill when the core goal is perceived performance…

• World Class Carousel

  by @happycapy-ai

  Generate world-class Instagram carousel content on any topic. Produces 7-10 publication-ready slides (1080x1350) with AI-generated visuals, precise typography, Instagram music recommendations, optimized captions, and hashtags.…

• Building Native Ui

  by @happycapy-ai

  Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

• Mobile Design

  by @happycapy-ai

  Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native…

• Html Over Markdown

  by @happycapy-ai

  Generate rich, self-contained HTML documents instead of Markdown when output needs visual hierarchy, diagrams, or interactivity. Use for specs, implementation plans, side-by-side design comparisons, PR writeups and code…

• 360 Panorama Viewer

  by @happycapy-ai

  Build a fully self-contained 360° equirectangular panorama viewer as a single HTML file. The viewer uses Three.js to render immersive spherical panoramas with drag-to-look, zoom, auto-rotate, and a scene-switcher sidebar. All…

• Pptx

  by @happycapy-ai

  Create polished PowerPoint (.pptx) presentations directly from a topic or content description. Uses HTML as an invisible internal design intermediate — the HTML is never shown to the user. The final and only deliverable is a…

• Azure Host Pptx

  by @happycapy-ai

  Reusable fixed-style PPTX generation skill for the Azure Host Forum visual brand — sky-blue background (#65AEFF), deep green typography (#07461E), olive side-panel accent (#728E03), cream portrait/detail color (#F1F0EA), bold…

• Signal Green Pptx

  by @happycapy-ai

  Reusable fixed-style PPTX generation skill for the Signal Green Atlas visual brand — fluorescent green (#0CDA76) dominant background, black (#000000) typography and rules, black-and-white imagery only, bold avant-garde editorial…

• Neon Motion Pptx

  by @happycapy-ai

  Reusable fixed-style PPTX generation skill for the Neon Motion visual brand — a premium cinematic pitch built from editorial motion photography and restrained typography, with electric cyan (#08BFEA) versus saturated orange…

• Botanical Blur Pptx

  by @happycapy-ai

  Reusable fixed-style PPTX generation skill for the Botanical Blur System visual brand — warm cream (#F7F4EA) editorial layouts, botanical motion-blur textures, sky blue (#3D8FD9), deep green (#0E5A3D), muted coral (#D9573F),…

• Apricot Ritual Pptx

  by @happycapy-ai

  Reusable fixed-style PPTX generation skill for the Apricot Ritual Index visual brand — warm apricot background (#FDDEB6), cocoa-brown typography (#6C4832), refined minimalist editorial poster aesthetic, elegant serif titles,…

• Coral Geyser Pptx

  by @happycapy-ai

  Reusable fixed-style PPTX generation skill for the Coral Geyser Notice visual brand — coral-red background (#E95140), warm stone typography (#E7D8D1), bold modern visitor-notice and design-forward travel guide aesthetic, heavy…

• Olive Rose Pptx

  by @happycapy-ai

  Reusable fixed-style PPTX generation skill for the Olive Rose Salon visual brand — dark olive-brown background (#372E19), pale pink typography (#FFE1FC), high-fashion art exhibition poster aesthetic, large serif title type,…

• Create Design System Rules

  by @happycapy-ai

  Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish…

• Openchart

  by @tryopendata

  Generates OpenChart (https://github.com/tryopendata/openchart) chart, table, graph, sankey, tilemap, and geo map specs from data, and guides editorial design decisions. Use when creating visualizations, building charts,…

• Svg Design

  by @tryopendata

  Generates and edits SVG logos, icons, and graphics. Use when creating SVG files, designing logos or icons, writing path data, optimizing SVGs, building icon systems, animating SVG elements, or modifying existing vector graphics.…

• Design

  by @popmechanic

  Self-contained design transformer — invoke directly, do not decompose. Transforms a design reference HTML file into a Vibes app. Use when user provides a design.html, mockup, or static prototype to match exactly.

• Generateblocks Layouts

  by @wpgaurav

  Build and audit WordPress layouts with GenerateBlocks V2, including CSS Mode, responsive at-rules, dynamic data, Pro components, and recovery-safe block serialization. Use for new GB layouts, conversions, repairs, and…

• Elementor To Generateblocks

  by @wpgaurav

  Convert Elementor layouts to clean GenerateBlocks V2 format, eliminating DIVception

• Html To Generateblocks

  by @wpgaurav

  Convert HTML/CSS layouts to GenerateBlocks V2 format with inline styles

• Figma To Generateblocks

  by @wpgaurav

  Convert Figma designs to GenerateBlocks V2 format for WordPress

• Animation Reverse Engineering

  by @sendaifun

  Reverse-engineer any motion reference (a video from X/Twitter, Dribbble, a screen recording, a GIF) into production animation code through frame-level dissection. Use when the user shares a video/URL and says "implement this…

• Design

  by @rileyhilliard

  Enforces precise, minimal design for dashboards and admin interfaces. Use when building SaaS UIs, data-heavy interfaces, or any product needing Jony Ive-level craft.

• Generate Sitemap

  by @dandye

  Generate hierarchical site structure and navigation maps. Creates visual representations of information architecture and content relationships.

• Generate Taxonomy

  by @dandye

  Develop hierarchical classification systems. Creates parent-child categorical structures for content organization.

• Design Metadata Schema

  by @dandye

  Design comprehensive metadata frameworks. Develops structured metadata templates and tagging systems.

• Ui Ux Pro Max

  by @jh941213

  UI/UX design intelligence. 57 styles, 95 palettes, 56 font pairings, 24 charts, 12 stacks (React, Next.js, Vue, Nuxt, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Jetpack Compose, Tailwind, shadcn/ui). Actions: plan, build,…

• Api Design Principles

  by @jh941213

  REST 및 GraphQL API 설계 원칙 가이드. 새로운 API 설계, API 스펙 리뷰, API 설계 표준 수립 시 활용. 트리거: "API 설계", "REST", "GraphQL", "엔드포인트 설계", "API versioning", "API 패턴" 안티-트리거: "프론트엔드 UI", "데이터베이스 스키마만", "CSS/스타일링", "배포/인프라"

• Api Design Principles

  by @jh941213

  REST and GraphQL API design principles guide. Use when designing new APIs, reviewing API specs, or establishing API design standards. Triggers: "API design", "REST", "GraphQL", "endpoint design", "API versioning", "API patterns"…

• Nano Banana

  by @jh941213

  REQUIRED for all image generation requests. Generate and edit images using Gemini CLI with image models. Handles blog featured images, YouTube thumbnails, icons, diagrams, patterns, illustrations, photos, visual assets,…

• Stitch React

  by @jh941213

  Stitch 스크린을 React 컴포넌트 시스템으로 변환합니다 — 디자인 토큰 추출, 컴포넌트 분해, TypeScript 타입 생성, 자동 검증 포함. Triggers on: Stitch React, 컴포넌트 변환, React 변환, HTML to React. NOT for: 새 React 앱 생성, API 구현.

• Stitch Design Md

  by @jh941213

  Stitch 프로젝트를 분석하여 DESIGN.md 파일을 생성합니다 — 디자인 시스템을 시맨틱하고 자연스러운 언어로 문서화하여 일관된 UI 생성을 지원합니다. Triggers on: Stitch, 디자인 시스템, DESIGN.md, Stitch 디자인 분석. NOT for: React 컴포넌트 변환, 코드 구현.

• Stitch Enhance Prompt

  by @jh941213

  모호한 UI 아이디어를 Stitch에 최적화된 상세 프롬프트로 변환합니다 — 구체성 향상, UI/UX 키워드 추가, 디자인 시스템 컨텍스트 주입. Triggers on: 프롬프트 향상, Stitch 프롬프트, UI 아이디어, 프롬프트 개선. NOT for: 직접 코딩, React 구현.

• Frontend

  by @jh941213

  빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 → 구현까지 한 번에. 트리거: "프론트엔드", "UI 만들어", "페이지 만들어", "컴포넌트 만들어", "랜딩 페이지", "대시보드 UI" 안티-트리거: "백엔드 API", "데이터베이스", "CLI 도구"

• Spec

  by @jh941213

  SPEC 기반 개발 인터뷰 — 심층 질문을 통해 상세한 SPEC.md 명세서를 생성합니다. Triggers on: 스펙, spec, 명세서, 인터뷰, 기능 설계. NOT for: 바로 구현, 간단한 수정, 코드 작성.

• Spec Verify

  by @jh941213

  SPEC.md 명세서 대비 구현 완료도를 검증합니다. Triggers on: 스펙 검증, spec-verify, 명세서 검증, 구현 검증. NOT for: 코드 리뷰, 단위 테스트, 빌드 검증.

• Brainstorming

  by @jh941213

  기능 추가·컴포넌트 생성·동작 변경 등 모든 창작 작업 전에 사용. 구현 전에 의도·요구사항·설계를 대화로 확정 (심층 인터뷰가 필요한 대규모 기능은 /spec 사용)

• Diagram Generator

  by @luongnv89

  Generate a diagram and route to the right engine — draw.io XML (precise, editable, C4, swimlanes) or Excalidraw JSON (hand-drawn, sketch, wireframes). One entry for flowcharts, architecture, ER, sequence, mind maps. Don't use…

• Excalidraw Generator

  by @luongnv89

  Generate diagrams as valid Excalidraw JSON — flowcharts, architecture, ER diagrams, mind maps, sequence diagrams, wireframes, C4 models, and more. Don't use for draw.io/Mermaid output, slide decks, or pixel-perfect brand graphics.

• Brand Name Checker

  by @luongnv89

  Check product and brand names for conflicts across trademarks, domains, social handles, and package registries. Returns a risk level and Proceed/Modify/Abandon recommendation. Skip for name brainstorming, logo design, or…

• Logo Designer

  by @luongnv89

  Generate professional SVG logos from project context: 7 brand variants plus a showcase HTML page. Use for product marks, wordmarks, icons, and favicons. Don't use for raster-only logos, illustrations, or full brand guidelines.

• Tasks Generator

  by @luongnv89

  Generate sprint-based development tasks from a PRD. Use when asked to create tasks or break down requirements. Don't use for PRD/TAD authoring or task execution.

• Dont Make Me Think

  by @luongnv89

  Review UI usability using Steve Krug's principles and produce a scannable report. Use for UX audits of screenshots, URLs, or code. Don't use for brand critique, WCAG audits, or backend/API review.

• Frontend Design

  by @luongnv89

  Build production-grade frontend interfaces with distinctive aesthetics and working code. Use for UI components, pages, or frontend features. Don't use for backend/API work or usability-only audits.

• Website Clone Report

  by @luongnv89

  Generate a plain-language report from website-analyzer JSON and save it only after explicit approval. Use for non-technical summaries. Don't use for developer audits, raw SEO analysis, penetration testing, or unapproved…

• Website Cloner

  by @luongnv89

  Build an improved website clone from a URL via 6-phase gated workflow (Vite/React/shadcn/Tailwind + GitHub Pages). Use for end-to-end site rebuilds. Don't use for single-phase work.

• Website Improvement Prd

  by @luongnv89

  Generate an approval-gated improvement PRD from a report and baseline, with evidence-backed what/why/value changes and measurable targets. Use for rebuild proposals. Don't use for task breakdown, coding, implementation, or…

• Website Clone Final Report

  by @luongnv89

  Generate a website-clone closure report comparing baseline analysis, builder metadata, planned tasks, and implemented results. Use after a completed rebuild. Don't use for live audits, ongoing monitoring, implementation, or…

• Website Implementation Plan

  by @luongnv89

  Generate phased tasks.md from an approved website PRD, with landing page first, measurable tasks, and collect/create asset tracking. Use for implementation planning. Don't use for coding, design review, unapproved PRDs, or…

• Website Builder

  by @luongnv89

  Build an approved Vite/React/Tailwind plan, collect assets, verify static output, deploy to GitHub Pages, and emit metadata. Use for implementing tasks.md. Don't use for design review, planning, backend services, or unapproved…

• Pptx

  by @Wide-Moat

  Presentation creation, editing, and analysis. When Assistant needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or…

• Artifacts Builder

  by @Wide-Moat

  Suite of tools for creating elaborate, multi-component AI artifacts viewer HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or…

• Web Artifacts Builder

  by @Wide-Moat

  Suite of tools for creating elaborate, multi-component HTML applications using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui…

• Webflow Mcp:Interactions

  by @webflow

  Create, update, list, and delete Webflow IX3 interactions (GSAP animations) through Webflow MCP. Use when the user wants click/hover/load/scroll/mouse-move animations, interaction timelines, or data_interactions_tool /…

• Webflow Mcp:Figma To Webflow

  by @webflow

  Build a Webflow page, section, component, or full site from a Figma design using the Figma MCP and the Webflow MCP (Designer Bridge + Data API). Use whenever translating a Figma file/frame into Webflow, building directly in a…

• Webflow Code Component:Local Dev Setup

  by @webflow

  Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.

• Webflow Mcp:Designer Tools

  by @webflow

  Build and manage pages, elements, components, and styles in Webflow Designer. Use when adding sections, creating layouts, building elements, inspecting or updating components, viewing what's inside a component, restructuring…

• Webflow Mcp:Cloud Apps

  by @webflow

  Create GitHub-source Webflow Cloud apps and monitor, troubleshoot, or manage existing apps through Webflow MCP. Use when creating a standalone or site-attached app from GitHub; identifying apps or environments; checking public…

• Webflow Mcp:Flowkit Naming

  by @webflow

  Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach.…

• Webflow Mcp:Accessibility Audit

  by @webflow

  Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Runs entirely headlessly against a page ID…

• Webflow Cli:Devlink

  by @webflow

  Export Webflow Designer components to React/Next.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration…

• Frontend Design

  by @Houseofmvps

  Create distinctive, production-grade frontend interfaces with top-tier product design and UI/UX quality. Use this skill when the user asks to build web components, pages, or applications. Combines product thinking, UX…

• Webflow Cli:Designer Extension

  by @webflow

  Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default/react/typescript-alt), bundles extensions for upload, and serves locally for…

• Webflow University:Mcp Getting Started

  by @webflow

  A Webflow University guided onboarding skill for anyone getting started with the Webflow MCP. Checks your Webflow connection, helps you choose a real workflow to try, coaches prompt writing, and supports you through your first…

• Webflow Code Component:Component Audit

  by @webflow

  Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.

• Visual Diff

  by @Houseofmvps

  Visual Regression Testing — screenshot comparison before and after changes. Use when user wants to check for visual regressions, compare UI changes, or verify CSS/layout changes didn't break anything.

• Webflow Code Component:Pre Deploy Check

  by @webflow

  Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.

• Demo

  by @Houseofmvps

  Demo-Ready Mode — prepare your app for demos, screenshots, and presentations. Use when user wants to demo their app, take screenshots, prepare for a presentation, or clean up dev artifacts.

• Webflow Code Component:Component Scaffold

  by @webflow

  Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config/dependencies.

• Compete

  by @Houseofmvps

  Competitive X-Ray — analyze any competitor URL vs your site. Use when user wants to compare their site against a competitor, benchmark performance, or understand competitive positioning.

• Brainstorming

  by @frumu-ai

  You MUST use this before any creative work (features, products, content, strategy, systems, or behavior changes). Start by classifying what we’re brainstorming, then run thorough one-question-at-a-time discovery, propose 2–3…

• Remix Icon

  by @einverne

  Guide for implementing RemixIcon - an open-source neutral-style icon library with 3,100+ icons in outlined and filled styles. Use when adding icons to applications, building UI components, or designing interfaces. Supports…

• Shadcn Ui

  by @einverne

  Guide for implementing shadcn/ui - a collection of beautifully-designed, accessible UI components built with Radix UI and Tailwind CSS. Use when building user interfaces, adding UI components, or implementing design systems in…

• Tailwindcss

  by @einverne

  Guide for implementing Tailwind CSS - a utility-first CSS framework for rapid UI development. Use when styling applications with responsive design, dark mode, custom themes, or building design systems with Tailwind's utility…

• Data Build Dashboard

  by @frumu-ai

  Build an interactive HTML dashboard with charts, filters, and tables

• DeferredComponent

  by @lynx-family

  Use DeferredComponent to delay mounting ReactLynx content by frames, reserve layout space, show a placeholder, and observe layout after the content appears.

• Lynx Ui

  by @lynx-family

  Use when building with lynx-ui: select components, verify public APIs, adapt examples, configure Luna themes, choose motion packages, compose screens, or troubleshoot lynx-ui usage.