Design AI agent skills

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

• Stitch::Extract Design Md

  by @google-labs-code

  Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme…

• Remotion

  by @google-labs-code

  Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

• Stitch Loop

  by @google-labs-code

  Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

• Stitch::Extract Static Html

  by @google-labs-code

  Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets…

• Stitch::Generate Design

  by @google-labs-code

  Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional…

• Taste Design

  by @google-labs-code

  Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and…

• Enhance Prompt

  by @google-labs-code

  Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

• Design Md

  by @google-labs-code

  Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

• React Vite Dashboard

  by @google-labs-code

  Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

• Frontend Design

  by @vudovn

  Anti-slop frontend design for web UI — landing pages, portfolios, marketing/product sites, and redesigns. Reads the brief, infers the right direction, and ships interfaces that don't look templated. Real design systems when…

• Design Spec

  by @vudovn

  How to author a DESIGN.md file — the machine-readable design-token + human-rationale format that must exist before any UI is built. YAML front-matter token schema (colors, typography, spacing, rounded, components), type system,…

• Frontend Architecture

  by @vudovn

  How to organize frontend code — separation of concerns (UI / logic / data / type), file responsibility, state tiers, API services, schema validation, and framework conventions for React/Next and Vue. Structural rules, not visual…

• Tailwind Patterns

  by @vudovn

  Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

• Game Development

  by @vudovn

  Game development orchestrator. Routes to platform-specific skills based on project needs.

• Game Art

  by @vudovn

  Game art principles. Visual style selection, asset pipeline, animation workflow.

• Game Audio

  by @vudovn

  Game audio principles. Sound design, music integration, adaptive audio systems.

• 2d Games

  by @vudovn

  2D game development principles. Sprites, tilemaps, physics, camera.

• Pr Review Canvas

  by @cursor

  Generate an interactive PR review walkthrough as an HTML page. Fetches PR data via gh API, categorizes files into core vs mechanical changes, adds reviewer annotations, and renders diffs with moved-code detection. Use when the…

• Docs Canvas

  by @cursor

  Render a documentation-style Cursor Canvas that organizes architecture notes, API references, walkthroughs, and how-tos into a navigable layout with sections, tables of contents, and cross-references. Use when the user asks for…

• Web Design Analyzer

  by @anbeime

  网页与数字界面设计师和网页开发工程师在需要逆向分析网页截图时，使用本技能一键提取配色、排版及组件特征，自动生成结构化 Design System 数据与 AI Coding Prompt，让设计还原与前端开发更高效。

• Archify

  by @anbeime

  Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export.…

• Build Design

  by @jakubkrehel

  Builds UI from a Figma file or a design image so it matches the design, using your project's existing tokens and components.

• Integrated Report Bundle

  by @HKUDS

  Generate spreadsheet, diagram, and PDF report as a cohesive deliverable set with iteration budgeting per component

• Pdf Gen Fallback

  by @HKUDS

  Reliable PDF generation using shell-based Python execution when sandbox fails

• Ljg Business Model

  by @lijigang

  基于《商业模式新生代》的 Business Model Canvas，把用户提供的项目介绍、访谈、产品资料或商业计划整理成九模块商业模式画布卡片，交付 PNG 与可修改的 HTML。USE WHEN 用户调用 ljg-business-model、要求画商业模式画布、九宫格商业模式或把商业信息做成画布卡片。NOT FOR 普通商业分析、投资估值、Lean Canvas 或只解释商业模式概念。

• Display Glasses With Jetpack Compose Glimmer

  by @android

  Provides guidelines for developing projected Android XR apps for display glasses using the Jetpack Compose Glimmer UI toolkit. This skill covers foundational Glimmer design principles, workflows for implementing Jetpack Compose…

• Navigation 3

  by @android

  Learn how to install and migrate to Jetpack Navigation 3, and how to implement features and patterns such as deep links, multiple backstacks, scenes (dialogs, bottom sheets, list-detail, two-pane, supporting pane), conditional…

• Styles

  by @android

  Use this skill to integrate the Jetpack Compose Styles API into an Android project. This skill guides you through upgrading dependencies, setting up component themes, making custom components styleable, and migrating existing…

• Leanback To Compose Tv Migration

  by @android

  Provides instructions and architectural patterns for migrating Android TV applications from legacy Leanback UI Toolkit, Android Views, or Support Fragments to Jetpack Compose for TV (androidx.tv). Use this skill for Leanback to…

• Offensive Lorawan Sub Ghz

  by @SnailSploit

  LoRaWAN and sub-GHz (433 / 868 / 915 MHz) attack methodology — LoRaWAN ABP/OTAA join attack, network/session key reuse, frame counter replay, downlink injection on TTN/Helium-style networks, sub-GHz protocol replay (KeeLoq…

• Ljg Present

  by @lijigang

  Unix 气质的演讲设计与保真排版。把 Org/Markdown 提纲或经授权提炼的讲稿制成单文件离线 HTML；以语义角色选择巨句、对照、Unicode 关系图、证据与章节版式。默认深色，支持讲稿层、原生图表与翻页笔。USE WHEN present、做演讲、slides、按 outline 美化、把讲述精髓放上屏幕。NOT FOR 未经授权改写作者内容或生成企业 PPT。

• Ljg Card

  by @lijigang

  Content caster (铸). Transforms text into PNG through precise HTML typography and, when the mold needs it, generated raster imagery. Four molds: -l (default) long reading card, -f source-faithful full text, -c comic, -w…

• Seedance Copyright

  by @Emily2040

  This skill should be used when a Seedance 2.0 prompt mentions named characters, franchises, studios, celebrities, public figures, private people, brand logos, copyrighted scenes, songs, voices, or real-person likeness workflows…

• Seedance Recipes

  by @Emily2040

  This skill should be used when the user asks for a Seedance 2.0 template, genre recipe, product ad, lifestyle video, drama scene, music video, landscape shot, commercial, animation scene, or reusable production pattern.

• Seedance Style

  by @Emily2040

  This skill should be used when the user asks for visual style, art direction, render feel, period aesthetic, texture, animation style, realism level, or style-safe alternatives to studio or franchise references.

• Seedance Examples Zh

  by @Emily2040

  This skill should be used when the user asks for Chinese Seedance 2.0 examples, Chinese prompt patterns, example rewrites, or safe versions of working Chinese video-generation prompts.

• Architecture Diagram

  by @Cocoon-AI

  Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.

• Stakeholder Mapping

  by @deanpeters

  Prioritize stakeholders using two complementary grids. Use when setting engagement strategy and surfacing whose voice needs elevating after stakeholder identification.

• Stakeholder Identification

  by @deanpeters

  Map every stakeholder before engaging anyone. Use when launching an initiative, scoping discovery, or building an engagement plan from scratch.

• Gc Minimal Zine Poster V0 3

  by @LiamGvchi

  Generate or analyze poetic paper-texture minimal zine posters with large negative space, a small editorial collage or focal element, experimental typography, and one clear color accent. Use when the user gives a theme, sentence,…

• Lightgallery

  by @sachinchoolur

  Add or configure a lightGallery image/video lightbox or gallery in vanilla JavaScript, React, Vue or Angular — install, imports, plugins, CSS, settings, and the pitfalls that produce most bug reports. Use when a project needs a…

• Partner Affiliate

  by @tech-leads-club

  When the user wants to build a partner program, launch an affiliate program, design integration partnerships, or create distribution partnerships. Also use when the user mentions 'partnerships,' 'affiliate program,' 'referral…

• Paid Creative Ai

  by @tech-leads-club

  When the user wants to create AI-generated ad creative, test performance creative, manage creative fatigue, or optimize paid media with AI tools. Also use when the user mentions 'ad creative,' 'performance creative,' 'creative…

• Sales Motion Design

  by @tech-leads-club

  When the user wants to choose between PLG and sales-led, design a sales motion, optimize time-to-first-value, or build a value-before-purchase experience. Also use when the user mentions 'PLG,' 'product-led growth,' 'sales-led,'…

• Core Web Vitals

  by @tech-leads-club

  Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout…

• Web Quality Audit

  by @tech-leads-club

  Comprehensive web quality audit covering performance, accessibility, SEO, and best practices in a single review. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize…

• Accessibility

  by @tech-leads-club

  Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". Do NOT use for…

• Social Selling

  by @tech-leads-club

  When the user wants to sell through social media, optimize LinkedIn for sales, build DM sequences, or convert content engagement into pipeline. Also use when the user mentions 'social selling,' 'LinkedIn selling,' 'LinkedIn…

• Perf Astro

  by @tech-leads-club

  Astro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Use when optimizing Astro site performance, improving Astro Lighthouse scores, or…

• Health

  by @tw93

  Audits agent config, instruction drift, hooks or MCP, and AI maintainability. Use when Claude, Codex, or Pi setup looks wrong. Not for application bugs or PR review.

• Check

  by @tw93

  Reviews diffs, PRs, release readiness, and publishing follow-through. Use when asked to review, triage issues or PRs, or ship. Not for debugging root causes or prose.

• Write

  by @tw93

  Rewrites and polishes Chinese or English prose and product copy. Use when drafting, editing, localizing, or cutting AI tone. Not for code comments or commit messages.

• Ui

  by @tw93

  Produces distinctive production UI and screenshot-grounded visual polish. Use when building or restyling pages, components, or typography. Not for backend logic or data pipelines.

• Read

  by @tw93

  Fetches URLs and PDFs, then summarizes or returns clean Markdown. Use when asked to read, fetch, quote, cite, convert, or save a URL or PDF. Not for local text files already in the repo.

• Hunt

  by @tw93

  Finds root cause before any fix. Use when something errors, crashes, regresses, or used to work. Not for code review or new features.

• Think

  by @tw93

  Turns rough ideas into approved, decision-complete plans before coding. Use when planning architecture, judging whether to build, or writing a handoff. Not for bug fixes or small edits.

• Learn

  by @tw93

  Runs a six-phase research workflow from source bundle to publish-ready output. Use when researching an unfamiliar domain or compiling materials into one reference. Not for quick lookups or single-file reads.

• Html Coder

  by @TokenRhythm

  Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or…

• Ai Video Script

  by @TokenRhythm

  Generate a structured short-video shooting script from a topic. Emits a strict, machine-parseable shot list (3 shots by default) with image prompt + video prompt + voiceover + on-screen text per shot. Trigger when the user asks…

• Prd Development

  by @deanpeters

  Build a structured PRD that connects problem, users, solution, and success criteria. Use when turning discovery notes into an engineering-ready document for a major initiative.

• Product Lifecycle Plays

  by @deanpeters

  Map a product's lifecycle stage and choose between extension, replacement, and retirement plays. Use when a product is maturing or declining and the next move isn't obvious.

• Jobs To Be Done

  by @deanpeters

  Uncover customer jobs, pains, and gains in a structured JTBD format. Use when clarifying unmet needs, repositioning a product, or improving discovery and messaging.

• Altitude Horizon Framework

  by @deanpeters

  Understand the PM-to-Director transition through altitude and horizon thinking. Use when diagnosing scope, time-horizon, or leadership-level gaps.

• Lean Ux Canvas

  by @deanpeters

  Guide teams through Lean UX Canvas v2. Use when framing a business problem, surfacing assumptions, and defining what to learn next.

• Problem Framing Canvas

  by @deanpeters

  Guide teams through MITRE's Problem Framing Canvas. Use when you need a clearer problem statement before jumping to solutions.

• Pol Probe Advisor

  by @deanpeters

  Select the right Proof of Life (PoL) probe based on hypothesis, risk, and resources. Use this to match the validation method to the real learning goal, not tooling comfort.

• Nuxt Ui

  by @nuxt

  Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat…

• Asset Gen

  by @htdt

  Generate visual assets from text prompts: PNG images (Gemini / xAI Grok), GLB 3D models (Tripo3D), rigged biped characters, retargeted animations, and frame-by-frame animated sprites, plus background removal. Use whenever a game…

• App Store Screenshots

  by @ParthJadhav

  Use when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS and/or Android apps, or scaffolding a screenshot editor with Next.js. Triggers on app store, play store,…

• Ipollowork Template Generation

  by @Devin-AXIS

  Create or update reusable iPolloWork templates through conversation for Design, Slides/native editable PPT, and HyperFrames Video. Use when planning, generating, repairing, validating, or saving a template package, manifest,…

• Ipollowork Plugin Ui

  by @Devin-AXIS

  为 iPolloWork 新插件或插件工作区复用 UI 组件、颜色、字体及交互规范。按 Figma 成熟状态和代码清单优先采用已确认组件，区分宿主 React 与独立 HTML/iframe 的接入方式；适用于插件表单、导航、浮层、反馈、状态和进度设计及实现，不改变用户作品的视觉风格。

• Ipollowork Video Template Authoring

  by @Devin-AXIS

  Create, repair, validate, or package a reusable iPollo Video template in an active HyperFrames template-authoring session. Use for video template structure, editable variables, reusable scenes, GSAP motion, component reuse,…

• Ipollowork Video Component Authoring

  by @Devin-AXIS

  Develop or update reusable visual components for iPolloWork Video, including maps, charts, rankings, diagrams, openings and endings. Use for component authoring rules, manifests, editable variables, shared data forms, inherited…

• Ipollowork Design Web

  by @Devin-AXIS

  Create or edit websites and application interfaces in the current iPolloWork Design session.

• Ipollowork Design Graphics

  by @Devin-AXIS

  Create or edit posters and social card series in the current iPolloWork Design session.

• Ipollowork Design Editorial

  by @Devin-AXIS

  Create or edit articles and reports in the current iPolloWork Design session.

• Content Creation Publisher

  by @anbeime

  内容创作者与自媒体创作者在需要将网页素材转化为多平台图文时，使用本技能可自动完成网页提取、Markdown排版美化、智能配图，并一键发布至微信公众号与X/Twitter，轻松实现从采集到发布的一站式自动化工作流。

• Ppt Roadshow Generator

  by @anbeime

  产品经理与内容创作者在筹备产品发布或公司路演视频时，使用此技能可从文档解析到视频合成全链路自动化，一键生成15-100页带智能配音、精准字幕和转场动画的完整路演视频，将数天的制作周期缩短至几分钟。

• Baoyu Format Markdown

  by @anbeime

  技术写作员与内容创作者在处理纯文本或 Markdown 稿件时，若需优化文章结构、添加 frontmatter 或自动修正中英文排版间距，使用此技能可一键生成专业美观的 {filename}-formatted.md 文件，让文档排版更完美。

• Gpt Image 2 Prompt Engine

  by @anbeime

  面向电商设计师、海报美工、品牌视觉、UI设计师、信息图编辑、商业摄影师、内容创作者等需要高质量可控出图的角色，在需要用 GPT-Image-2 生成电商主图、电影海报、信息图、品牌视觉、UI截图、古籍国风、角色IP等场景时，通过「Prompt as Code」原子化Schema+20+工业JSON模板+四步工作流，产出结构化、可复用、可批量的生图提示词，再调用 image_generation 出图。不适用于随意生图或简单风景照。

• Article Illustrator

  by @anbeime

  内容创作者和自媒体创作者在撰写长文时，当需要“给文章配图”或“添加插图”时使用。自动分析文章结构，精准识别需要视觉辅助的位置，生成并插入契合语境的插画，将抽象概念具象化，一键完成高质量图文排版，大幅提升阅读体验。

• Article Illustrator

  by @anbeime

  内容创作者与自媒体创作者在撰写长文缺乏视觉辅助时，当需要给文章配图或生成插图请使用。自动分析文章结构，精准识别位置并生成插画插入段落，将抽象概念具象化。一键完成智能图文排版，省去手动找图时间，大幅提升阅读体验！

• Pop Up Book Illustration

  by @anbeime

  平面设计师与内容创作者在制作科技、教育或品牌视觉物料时，一键生成融合纸质手工质感与数字科技光效的3D弹出书风格插画。自动构建多层立体层次与明亮温暖色调，让创意跃然纸上，轻松产出极具视觉冲击力的专业级插画。

• Frontend Design

  by @anbeime

  网页与数字界面设计师在构建Web页面或应用组件时，若受够了千篇一律的AI味设计，请用此技能。一键生成极具视觉冲击力、排版独特、动效惊艳的生产级前端代码，告别平庸，打造令人难忘的高品质数字界面。

• Better Colors

  by @jakubkrehel

  Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.

• Better Typography

  by @jakubkrehel

  Focuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.

• Better Ui

  by @jakubkrehel

  Polishes and improves the UI in your project. Covers concentric border radius, optical alignment, surface depth, contextual icons, hit areas and more.

• Better Accessibility

  by @jakubkrehel

  Helps your project comply with accessibility standards and best practices.

• Explain Interface

  by @jakubkrehel

  Helps you figure out how something was built on the web.

• Better Layout

  by @jakubkrehel

  Helps with grouping, alignment, reading order, progressive disclosure and other details that make a good layout.

• Better Interface

  by @jakubkrehel

  Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.

• Better Writing

  by @jakubkrehel

  Focuses on improving product copy in your project.

• Openserv Multi Agent Workflows

  by @internet-court

  Multi-agent workflow examples to work together on the OpenServ Platform. Covers agent discovery, multi-agent workspaces, task dependencies, and workflow orchestration using the Platform Client. Read reference.md for the full API…

• Game Dev Combat Animation

  by @MengTo

  Build, fix and review character combat animations (melee strikes, bow shots, spell casts, skills, monster attacks, whole move sets) so they read like Diablo IV, Baldur's Gate 3 or Elden Ring and never stretch, lock, wring or…

• Build Threejs Scroll Worlds

  by @MengTo

  Build rich, scroll-controlled real-time Three.js experiences as one persistent 3D world whose camera, lighting, atmosphere, materials, objects, DOM story, and interactions evolve across authored chapters. Use for 3D…

• Game Dev Combat Skill Polish

  by @MengTo

  Score a game's combat skills and spells out of 10 with blind judges, then raise the weakest to a bar, for timing and readability (does a skill read as itself, does the blow land when it lands) and for art (detail, light, trails,…

• Illustration Framed Panel

  by @MengTo

  Draws original design-and-coding scenes as SVG cards (480x360) in a framed-panel cartoon style. Identifying traits are a soft pastel card with a periwinkle-violet panel framed in thin navy, outline-only clouds and a pale…

• Illustration Line Interior

  by @MengTo

  Draws original hand-written SVG spot scenes in the Line interior style, wide airy rooms or terraces where slim, realistic people do design and coding work. A thin uniform indigo outline (1.4 px at 480 wide) runs around mostly…

• Illustration One Line

  by @MengTo

  Draws original hand-written SVG spot illustrations in the One-line style, joyful action figures doing design and coding work. One continuous uniform black line (2.3 px at 480 wide) loops and doubles back to draw the whole…

• Illustration Ink Sketch

  by @MengTo

  Draws hand-inked cartoon critters and living objects as SVG cards (480x360), each acting out a coding or design idea. Identified by thick black brush-pen outlines that swell and taper and break into separate strokes, loose…