Design AI agent skills

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

• Html Plan

  by @plannotator

  Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-plan or…

• Ponytail

  by @TanStack

  Forces the laziest solution that actually works, simplest, shortest, most minimal. Channels a senior dev who has seen everything: question whether the task needs to exist at all (YAGNI), reach for the standard library before…

• Terracotta

  by @bergside

  A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.

• Stitch

  by @bergside

  Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.

• Storytelling

  by @bergside

  Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.

• Square

  by @bergside

  Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.

• Vintage

  by @bergside

  1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.

• Tetris

  by @bergside

  Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.

• Vibrant

  by @bergside

  Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.

• Tailwind V4 Shadcn

  by @MaxMiksa

  Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme…

• Websh

  by @MaxMiksa

  A shell for the web. Navigate URLs like directories, query pages with Unix-like commands. Activate on `websh` command, shell-style web navigation, or when treating URLs as a filesystem.

• Pricing Strategy

  by @MaxMiksa

  When the user wants help with pricing decisions, packaging, or monetization strategy. Also use when the user mentions 'pricing,' 'pricing tiers,' 'freemium,' 'free trial,' 'packaging,' 'price increase,' 'value metric,' 'Van…

• Seo Audit

  by @MaxMiksa

  When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," or "SEO health…

• Frontend Polish

  by @MaxMiksa

  Refine an already working product frontend in a dedicated finishing pass, preserving its identity while improving hierarchy, components, copy and responsive behavior. Use after the core flow works or when the user asks for…

• Startup Business Models

  by @MaxMiksa

  Use when choosing or evaluating a startup revenue model, pricing/value metric, packaging/tier design, or calculating unit economics (LTV, CAC, payback, gross margin, NRR), including usage-based/credit/AI pricing and variable…

• Ux Audit Rethink

  by @MaxMiksa

  Comprehensive UX audit using IxDF's 7 factors, 5 usability characteristics, and 5 interaction dimensions. Holistic evaluation with redesign proposals based on user-centered design principles.

• Team

  by @MaxMiksa

  Quickly assemble a temporary AI agent team for a task. Automatically select the most suitable members from .claude/agents/.

• Product Strategist

  by @MaxMiksa

  Expert product strategy covering market analysis, competitive positioning, go-to-market planning, and product-led growth.

• Comet Any

  by @rpamis

  通过 Comet Creator 创建或升级 Comet Classic workflow Skill。不用于一般 Skill 的编写、整理或评审。

• Comet Tweak

  by @rpamis

  使用 Classic 预设流程完成单个 change 的轻量调整。在用户明确调用 /comet-tweak、选择 tweak，或恢复 workflow: tweak 时使用。

• Comet Build

  by @rpamis

  制定计划、实施并验收 Classic 任务。在用户调用 /comet-build，或 Classic Runtime 进入 Build、返回 Build 修复时使用。

• Comet Hotfix

  by @rpamis

  使用 Classic 预设流程修复局部缺陷。在用户明确调用 /comet-hotfix、选择 hotfix，或恢复 workflow: hotfix 时使用。

• Comet Design

  by @rpamis

  完成 Classic 技术设计并请用户确认。在用户调用 /comet-design，或 Classic Runtime 进入 Design 时使用。

• Comet Open

  by @rpamis

  创建 Classic change，整理需求并请用户确认。在用户调用 /comet-open，或 Classic 进入 Open、恢复初始化时使用。

• Comet Open

  by @rpamis

  Comet Phase 1: Open. Invoke with /comet-open. Explore ideas through OpenSpec, confirm requirements clarification, then create change structure (proposal + design + tasks).

• Openspec Apply Change

  by @rpamis

  Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.

• Comet Archive

  by @rpamis

  Comet Phase 5: Archive. Invoke with /comet-archive. Merge delta specs into main specs with OpenSpec semantics, archive change.

• Comet Open

  by @rpamis

  Use when Comet 需要创建新的 OpenSpec change，或 active change 缺少 proposal/design/tasks/.comet.yaml 初始化产物。

• Comet Design

  by @rpamis

  Use when full Comet change 已完成 open 阶段但缺少 Superpowers Design Doc，或 design 阶段需要从 OpenSpec 交接包恢复。

• Markstream Migration

  by @Simon-He95

  Audit and migrate existing Markdown rendering to Markstream, or upgrade a markstream-vue 1.x integration to 2.x. Use when Codex needs to replace another renderer, classify direct vs custom vs plugin-heavy adoption, preserve…

• Markstream Install

  by @Simon-He95

  Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, or markstream-svelte into an existing repository. Use when Codex needs to choose the right package, install the smallest framework-specific…

• Markstream Vue

  by @Simon-He95

  Integrate markstream-vue into a Vue 3 app. Use when Codex needs to add the Vue 3 renderer, import CSS in the right order, choose renderer and DOM modes, choose built-in, plain, or custom code-block paths, choose between…

• Markstream React

  by @Simon-He95

  Integrate the beta markstream-react package into a React 18+ or Next app. Use when Codex needs to add the React renderer, choose the root, `next`, or `server` entrypoint, import CSS correctly, choose between `content` and…

• Markstream Nuxt

  by @Simon-He95

  Integrate markstream-vue into a Nuxt 3 or Nuxt 4 app. Use when Codex needs client-only boundaries, SSR-safe setup, browser-only peer gating, worker-aware initialization, renderer `mode` selection, or a safe `MarkdownRender`…

• Markstream Vue2

  by @Simon-He95

  Integrate markstream-vue2 into a Vue 2.6 or 2.7 app. Use when Codex needs Vue 2-compatible setup, `@vue/composition-api` decisions, CSS wiring, optional peer setup, or scoped Markstream overrides in a Vue 2 repository that is…

• Markstream Vue2 Cli

  by @Simon-He95

  Integrate markstream-vue2 into a Vue 2 Vue CLI or Webpack 4 app. Use when Codex needs Webpack 4-friendly setup, CDN worker fallbacks for Mermaid or KaTeX, `dist/index.css` imports, Vue 2 composition-api shims, or code block…

• Markstream Svelte

  by @Simon-He95

  Integrate the beta markstream-svelte package in Svelte 5 or SvelteKit apps. Use when Codex needs Svelte 5 runes, CSS and optional peers, smooth streaming, worker setup, renderer-local or scoped custom components, or SSR-safe…

• Markstream Angular

  by @Simon-He95

  Integrate the alpha markstream-angular package into an Angular 20+ app. Use when Codex needs standalone component imports, signal-based examples, CSS wiring, custom HTML tags or customComponents setup, or optional peer…

• Markstream Vue2 Vite

  by @Simon-He95

  Integrate markstream-vue2 into a Vue 2 plus Vite app. Use when Codex needs Vite-friendly worker imports, `?worker` or `?worker&inline` setup for Mermaid or KaTeX, modern CSS ordering, or Vue 2 compatibility in a Vite-based…

• Binder Design

  by @FreedomIntelligence

  Guidance for choosing the right protein binder design tool. Use this skill when: (1) Deciding between BoltzGen, BindCraft, or RFdiffusion, (2) Planning a binder design campaign, (3) Understanding trade-offs between different…

• Api Review

  by @flutter

  Reviews the specified code against the canonical API Design guidelines. Use this skill when the user asks for an API review or to check code against API design principles.

• Flutter Apply Architecture Best Practices

  by @flutter

  Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

• Chengfeng Visual

  by @Agentchengfeng

  给剪好的口播配画面：在录屏上盖 HTML 层（圈重点标注 / 小黑整屏动画 / 推近），层绑字幕屏、由播放器逐帧驱动、直接在预览里看。用户说做分镜、配画面、加动画、圈重点、B-roll、做 storyboard 时使用。不要用于删词剪辑、字幕、物理剪切或成片渲染。

• Ian Xiaohei Svg Motion

  by @Agentchengfeng

  Create Ian Xiaohei-style HTML/SVG motion illustrations for Chinese articles, scripts, storyboard scenes, workflow explanations, concept metaphors, and short video visual aids. Use when the user asks for 小黑 SVG、漫画感 HTML、分层 SVG…

• Antislop Layoutmobile

  by @miqdadbadjuber

  Mobile layout skill for antislop. Use for layouts that reflow across screen sizes, phone to desktop: grids, overflow, tap targets. Load with the core.

• Antislop Ui

  by @miqdadbadjuber

  UI and visual skill for antislop. Use when building or editing any interface: color, layout, components, motion. Load with the core.

• Antislop

  by @miqdadbadjuber

  Anti Slop: Rules for AI Coding Agents. The core filter. Load always to stop generic AI slop.

• Sandbox

  by @alsk1992

  Visual HTML canvas sandbox for agent-driven UI and live previews

• Argent Screenshot Diff

  by @software-mansion

  Compare saved or live app screenshots with the argent screenshot-diff tool. Use when testing visual regressions, before/after UI comparisons, screenshot diff checks, visible layout, spacing, color, typography, clipping,…

• Narrative Resonance Monitor

  by @aaron-he-zhu

  Use when the user asks to "measure how our narrative is landing", "track echo rate against our canon lexicon", or "check how AI answer engines describe our brand"; produces a resonance report — echo rate (overlap of market…

• Audience Belief Mapper

  by @aaron-he-zhu

  Use when the user asks to "map what our buyers believe", "capture the objections we keep hearing", or "find the switching forces that move the beachhead"; produces a belief map of the beachhead — held beliefs and mental models,…

• Strategic Narrative Designer

  by @aaron-he-zhu

  Use when the user asks to "design our change narrative", "build the old-world-to-new-game story arc", or "frame the shift our category is undergoing"; produces a Raskin-style strategic narrative arc — old world → the undeniable…

• Message System Architect

  by @aaron-he-zhu

  Use when the user asks to "author our durable brand message hierarchy", "build the brand message house that seeds the canon", or "define the main narrative, three pillars, and tagline for the whole brand"; produces the DURABLE…

• Narrative Baseline Mapper

  by @aaron-he-zhu

  Use when the user asks to "map what our surfaces say today", "inventory our current messaging", or "find the gap between what we say and what we mean"; produces the narrative baseline — a surface-by-surface inventory of what…

• Positioning Truth Tracer

  by @aaron-he-zhu

  Use when the user asks to "check our positioning against what we can actually ship", "trace which differentiators we can defend", or "reconcile the positioning canvas with the claims ledger"; reconciles the reused positioning…

• Color System

  by @Owl-Listener

  Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use…

• Information Architecture

  by @Owl-Listener

  Design content structure, hierarchy, labelling, and the navigation model. Use when organising what exists. For the UI that exposes it use `navigation-patterns` (interaction-design); for user-generated grouping evidence use…

• Platform Conventions

  by @Owl-Listener

  Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use `responsive-design`; for matching competitor patterns use…

• Typography Scale

  by @Owl-Listener

  Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use…

• Content Strategy

  by @Owl-Listener

  Define what content a product needs, how it is structured, and who owns it. Use when content itself is the problem. For the words in the interface use `ux-writing` (designer-toolkit); for structural hierarchy use…

• Layout Grid

  by @Owl-Listener

  Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use `spacing-system`; for cross-device behaviour use…

• Responsive Design

  by @Owl-Listener

  Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use…

• Design Brief

  by @Owl-Listener

  Write a project brief — problem space, constraints, audience, and success criteria. Use at kickoff for one specific project. For long-horizon aspiration use `north-star-vision`; for reusable decision rules use `design-principles`.

• Heuristic Evaluation

  by @Owl-Listener

  Run an expert review against Nielsen's heuristics and domain criteria, with severity ratings. Use when you need findings without recruiting participants. For a facilitated team feedback session, use `design-critique` (design-ops).

• Law Of Closure

  by @Owl-Listener

  Apply the Law of Closure — the eye completes implied shapes from partial forms. Use when reducing visual weight by dropping borders or letting negative space suggest structure. For explicit containers, use `law-of-common-region`.

• Law Of Continuity

  by @Owl-Listener

  Apply the Law of Continuity — the eye follows alignment and unbroken paths. Use when sequencing steps, aligning content, or designing carousels and timelines. For grouping rather than sequencing, use `law-of-proximity`.

• Dark Mode Design

  by @Owl-Listener

  Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.

• Law Of Figure Ground

  by @Owl-Listener

  Apply the Law of Figure-Ground — establish which layer is foreground and actionable versus background. Use when designing modals, overlays, and depth. For emphasising one element among peers, use `von-restorff-effect`.

• Law Of Common Region

  by @Owl-Listener

  Apply the Law of Common Region — a shared container, background, or border groups elements regardless of spacing. Use when grouping must survive a tight layout. For grouping by spacing alone, use `law-of-proximity`.

• Law Of Similarity

  by @Owl-Listener

  Apply the Law of Similarity — shared colour, shape, or size signals that elements belong to one category. Use when signalling relationships across distance. For grouping by position, use `law-of-proximity`.

• Teslers Law

  by @Owl-Listener

  Apply Tesler's Law — every process has irreducible complexity that someone must absorb. Use when deciding whether the product or the user carries it. For reducing apparent choice, use `hicks-law`.

• Readable Measure

  by @Owl-Listener

  Set line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use `typography-scale`.

• Illustration Style

  by @Owl-Listener

  Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).

• Design Principles

  by @Owl-Listener

  Define actionable principles that resolve trade-offs when the team disagrees. Use when the same decisions keep getting relitigated. For a single project's framing, use `design-brief`.

• Wireframe Spec

  by @Owl-Listener

  Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use `layout-grid` (ui-design).

• User Flow Diagram

  by @Owl-Listener

  Diagram screen-level paths, decision points, and branch logic. Use when specifying how a feature is traversed. For the emotional end-to-end arc, use `journey-map` (design-research).

• Prototype Strategy

  by @Owl-Listener

  Choose prototype fidelity and method to match the design question and the decision at stake. Use before building a prototype. For what to test once it exists, use `test-scenario`.

• Click Test Plan

  by @Owl-Listener

  Design first-click and click tests for findability and navigation. Use when testing whether people can locate something. For full task-based observation, use `test-scenario`.

• Wiki Viewer

  by @rohitg00

  Render a self-contained HTML viewer for a pro-workflow wiki. Pages, sources, claims, seed queue, page-link graph and full-text search all in one file. No external dependencies, no JS framework, S3-uploadable. Use when the user…

• Design Engineering

  by @rohitg00

  Apply interface craft when building or reviewing UI - motion, easing, timing, springs, component feel, and visual foundations. Use when building a component, animation, transition, hover or press state, modal, drawer, toast, or…

• Frontend Design

  by @xstongxue

  创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。

• Excalidraw Diagram

  by @xstongxue

  基于文字说明或结构信息，生成可直接在 Excalidraw 中打开的手绘风 `.excalidraw` 图表；支持系统架构图、流程图、数据结构图与自由白板草图，输出标准 Excalidraw JSON。

• Create Adaptable Composable

  by @vuejs-ai

  Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects…

• Ibd Distribution Day Monitor

  by @tradermonty

  Detect IBD-style Distribution Days for QQQ/SPY (close down at least 0.2% on higher volume), track 25-session expiration and 5% invalidation, count d5/d15/d25 clusters, classify market risk (NORMAL/CAUTION/HIGH/SEVERE), and emit…

• Codex

  by @bergside

  A radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the only divider, and the sole surface tone…

• Fiction

  by @bergside

  A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded…

• Immersive

  by @bergside

  An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep…

• Claude

  by @bergside

  A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink.

• Sega

  by @bergside

  A playful, arcade-inspired interface for games — built on the VT323 pixel typeface, hard-edged 0px corners, chunky pill buttons that physically press into solid offset blocks

• Sketch

  by @bergside

  A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls.

• Impeccable

  by @bergside

  A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.

• Pulse

  by @bergside

  Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.

• Bento

  by @bergside

  Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.

• Lingo

  by @bergside

  Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.

• Geometric

  by @bergside

  Geometric, structured design with clean typography, neutral colors, precise shapes, and intuitive layouts that stay out of the way.

• Riso

  by @bergside

  A playful, joyful, two-color risograph print aesthetic built on a single warm off-white paper surface running through every section

• Enterprise

  by @bergside

  Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.

• Expressive

  by @bergside

  Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.

• Brutalism

  by @bergside

  Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.

• Perspective

  by @bergside

  Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.