Design AI agent skills

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

• Canvas Design

  by @seaworld008

  Create original static visual designs such as posters, artwork, and compositions as PNG or PDF artifacts.

• Crest

  by @seaworld008

  Building engineer self-branding by turning technical contributions into a professional brand. Use for GitHub/LinkedIn/blog/conference positioning or content strategy.

• Wp Theme Dev

  by @wpacademy

  Develop WordPress themes following official WordPress coding standards, theme review requirements, accessibility standards (WCAG 2.1 AA), and modern web development best practices. Use this skill whenever the user wants to…

• Motion Design

  by @richtabor

  Provides motion design guidance for UI components. Triggers on animation requests ("animate this", "add transition", "motion for"), refinement requests ("clean up this animation", "clean up the motion", "this feels too…

• Accessibility Review

  by @richtabor

  Reviews UI for accessibility issues against WCAG 2.1/2.2 AA. Triggers on "is this accessible?", "check accessibility", or contrast/a11y review requests.

• Color Theory

  by @Tibsfox

  Color theory principles for art education. Covers the three color properties (hue, saturation, value), color mixing systems (subtractive and additive), color relationships (complementary, analogous, triadic,…

• Data Visualization

  by @Tibsfox

  Grammar of graphics, chart type selection, color theory, interactive visualization, dashboards, and the principles of honest, effective data display. Covers Tufte's data-ink ratio, Bertin's visual variables, perceptual…

• Digital Art

  by @Tibsfox

  Digital art tools, techniques, and workflows for art education. Covers raster and vector workflows, digital painting, photo manipulation, generative and procedural art, 3D modeling and rendering, pixel art, the relationship…

• Art History Movements

  by @Tibsfox

  Major art movements and their historical context for art education. Covers 12 movements from the Renaissance to contemporary art, their defining characteristics, key artists, signature works, and the intellectual/social forces…

• Og Images

  by @richtabor

  Guides creation of OpenGraph and Twitter share images using next/og ImageResponse. Covers layout patterns, custom fonts, avatars, title case, and Satori rules. Use when building OG images, Twitter cards, or social previews.

• Brand Guidelines

  by @seaworld008

  Apply Anthropic brand colors and typography when the user requests Anthropic visual identity or an Anthropic-branded artifact.

• Create Prd

  by @richtabor

  Plan features interactively. Asks clarifying questions, then generates a detailed PRD document.

• Design Extraction

  by @freema

  This skill should be used when the user asks about Storybook, design systems, UI components, extracting HTML, or building interfaces using existing components. Activates for component listing, HTML extraction, theme analysis, or…

• Langconfig Builder

  by @LangConfig

  Complete guide for building agents and workflows in LangConfig. Use when users need help configuring nodes, connecting agents, setting up tools, or designing multi-agent systems within the LangConfig platform.

• Frontend Design

  by @LangConfig

  Expert guidance for creating production-grade, distinctive frontend interfaces. Use when designing UIs, choosing aesthetics, or building memorable web experiences.

• Shadcn Inertia

  by @inertia-rails

  shadcn/ui component integration for Inertia Rails React (NOT Next.js): forms, dialogs, tables, toasts, dark mode, command palette, and more. Use when building UI with shadcn/ui components in an Inertia app or adapting shadcn…

• Lov Any2deck

  by @lovstudio

  Generate professional slide deck images from content (Markdown, text, URLs). Creates outlines with style instructions, then generates individual slide images. Supports 16 visual styles, CJK/Latin mixed text, branding overlays,…

• Lov Dev Research

  by @lovstudio

  根据软件需求比较复用策略并输出有来源的技术选型与研发计划。支持明确输入与结果回读。Use to research a development plan and technology choices.

• Lov Brainstorm

  by @lovstudio

  通过证据和聚焦追问明确需求、约束、取舍及验收条件。支持明确输入与结果回读。Use to help clarify requirements through brainstorming.

• Lov Daily Post

  by @lovstudio

  将近期真实项目更新写成面向读者的简短日更文案。支持明确输入与结果回读。Use to write a daily project update from real changes.

• Lov Better Readme

  by @lovstudio

  依据项目代码完善 README、安装说明、使用示例与真实品牌资产。支持明确输入与结果回读。Use to create or improve a project README.

• Writing Reports

  by @zenobi-us

  Writes a self-contained HTML evidence report with screenshots, captions, result badges and a clickable summary table. Use when work must be proved rather than claimed - manual test results, acceptance evidence, an audit, a…

• Lov Agent Instructions

  by @lovstudio

  诊断或完善项目 Agent 指令文件，适配不同宿主并保留真实工程约定。支持明确输入与结果回读。Use to review or improve project agent instructions.

• Lov Distill To System

  by @lovstudio

  把有证据的可复用经验写入最合适的项目或共享 Agent 规范。支持明确输入与结果回读。Use to persist a reusable lesson in agent instructions.

• Lov Add Task

  by @lovstudio

  在当前任务清单中按优先级和位置追加事项并保留已有状态。支持明确输入与结果回读。Use to add an item to the current task list.

• Lov Better Css

  by @lovstudio

  清理冗余 CSS 并在现有 Tailwind 项目中重构样式。支持明确输入与结果回读。Use to refactor CSS and Tailwind styles.

• Lov Better Seo

  by @lovstudio

  检查 Next.js 页面元数据、索引规则、站点地图与分享展示。支持明确输入与结果回读。Use to review and improve Next.js SEO.

• Lov Business Card

  by @lovstudio

  Generate a professional, editorial-style business card (2:1) as a high-resolution PNG and a self-contained interactive HTML. Collects the user's identity (name, roles, tagline, interests, locations, optional avatar), fills a…

• Lov Bp Polish

  by @lovstudio

  Review and improve an existing BP outline, PPTX, PDF, or rendered slide set across investment logic, evidence, copy, charts, and visual quality. Produces a scored report, page-level revisions, and targeted regeneration…

• Lov Bp Deck

  by @lovstudio

  Turn an approved investor BP outline into a clean, professional slide deck with deliberate style selection, real product evidence, charts, branding, PPTX/PDF, and a full-deck preview. Use when the narrative already exists and…

• Explain

  by @zenobi-us

  Research a subject and build a single-page Diátaxis explainer in minimalist HTML, when a user asks for a researched web explanation, resulting in a validated HTML page with sources

• Generate Images With Takumi

  by @zenobi-us

  Guidelines, syntax, templates, API usage, and styling best practices for rendering static/animated images and vector SVG using Takumi.

• Design System Generator

  by @thienanblog

  Create or revise a project design system covering tokens, components, accessibility, motion, and visual verification. Use when the durable design-system document is the deliverable, rather than a one-off UI edit.

• Bmad Bme Agent Wade

  by @amalik

  Validated learning expert specializing in lean experiments, MVPs, and Build-Measure-Learn cycles. Refuses to scope experiments larger than necessary — asks "what's the smallest experiment that validates?"

• Ui Ux Concept Implementation

  by @thienanblog

  Implement a selected mockup, screenshot, or visual reference in an existing project and compare the rendered result. Use when visual fidelity drives the work; use dashboard guidance for operational surfaces when it fits better.

• Dynamic

  by @ww-w-ai

  Fullstack development skill using bkend.ai BaaS platform. Covers authentication, data storage, API integration for dynamic web apps. Project initialization with "init dynamic" or "dynamic init". Use proactively when user needs…

• Starter

  by @ww-w-ai

  Static web development skill for beginners and non-developers. Covers HTML/CSS/JavaScript and Next.js App Router basics. Project initialization with "init starter" or "starter init". Use proactively when user is a beginner or…

• Development Pipeline

  by @ww-w-ai

  9-phase Development Pipeline complete knowledge. Use when user doesn't know development order or starts a new project. Triggers: development pipeline, phase, development order, where to start, what to do first, how to begin, new…

• Phase 5 Design System

  by @ww-w-ai

  Skill for building platform-independent design systems. Develops consistent component libraries for all UI frameworks. Use proactively when user needs consistent UI components. Triggers: design system, component library, design…

• Phase 3 Mockup

  by @ww-w-ai

  Skill for creating mockups with UI/UX trends. Designs HTML/CSS/JS prototypes before implementation. Use proactively when user wants to validate UI/UX before coding. Triggers: mockup, prototype, wireframe, UI design, 목업, 프로토타입,…

• Batch

  by @ww-w-ai

  Process multiple features or tasks in parallel. Batch execution of PDCA commands across features. Triggers: batch, parallel, bulk, multiple features, 배치, 병렬, 대량 처리, バッチ, 並列, 一括処理, 批量, 并行, 批处理, lote, paralelo, procesamiento…

• Pm Discovery

  by @ww-w-ai

  PM Agent Team - Automated product discovery, strategy, and PRD generation. Runs PM analysis workflow to produce comprehensive PRD before PDCA Plan phase. Triggers: pm team, product discovery, PM analysis, PM 분석, 제품 기획, PMチーム,…

• Brainstorm First

  by @thienanblog

  Explore and compare practical options before implementation. Use for requested brainstorming, requirements tradeoffs, diagnosis options, or UI concepts; skip when the approach is already selected.

• Ux Decisions

  by @viralcode

  AI skill for the Making UX Decisions framework (uxdecisions.com) by Tommy Geoco. Use for UI/UX design decisions, design audits, pattern selection, visual hierarchy analysis, and reviewing designs for completeness. Enables rapid,…

• Ui Audit

  by @viralcode

  AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.

• Ux Audit

  by @viralcode

  AI skill for automated design audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.

• Ui Ux Master

  by @viralcode

  Master UI/UX design skill combining Apple HIG, modern web design, SuperDesign patterns, and universal design principles. Use for any UI/UX design task including iOS/macOS/web apps, landing pages, dashboards, design systems,…

• Trmnl

  by @viralcode

  Generate content for TRMNL e-ink display devices using the TRMNL CSS framework. Use when the user wants to display information on their TRMNL device, send messages to an e-ink display, create dashboard content, show…

• Apple Hig

  by @viralcode

  Expert guide for designing iOS, macOS, watchOS, tvOS, and visionOS apps following Apple Human Interface Guidelines. Use when building Apple platform apps or interfaces, implementing SF Symbols, designing with iOS components,…

• Ui Ux Pro Max

  by @viralcode

  UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs,…

• Vision Sandbox

  by @viralcode

  Agentic Vision via Gemini's native Code Execution sandbox. Use for spatial grounding, visual math, and UI auditing.

• Ui Design System

  by @viralcode

  UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual…

• Pinak Frontend Guru

  by @viralcode

  Expert UI/UX and React performance auditor (PinakBot persona). Use when a user needs a "deep audit" of their frontend code, wants to "make it pro", or needs advice on both React performance and Web design best practices.…

• Human Optimized Frontend

  by @viralcode

  Generates a frontend interface that is visually pleasing and experientially sound by jointly optimizing aesthetics, motion graphics, and user experience (UX) using quantified evaluation. Use only when the user explicitly invokes…

• Deliberate Frontend Redesign

  by @viralcode

  Generates a deliberately designed frontend aesthetic that avoids generic UI patterns. Use when the user explicitly requests to redesign a frontend by invoking this skill by name. Trigger keywords: use…

• Ui Skills

  by @viralcode

  Opinionated constraints for building better interfaces with agents.

• Btp Diagram Generator

  by @likweitan

  Generate SAP BTP (Business Technology Platform) solution architecture diagrams as native draw.io (.drawio) files following the official SAP BTP Solution Diagram guidelines (Fiori Horizon design system) and open them via a…

• Vercel React View Transitions

  by @laguagu

  Guide for implementing smooth, native-feeling animations using React's View Transition API (the `ViewTransition` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to…

• Nextjs Shadcn

  by @laguagu

  Creates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Also use when the user asks to create a new Next.js project, add UI…

• Authorization Iam

  by @likweitan

  Help with ABAP authorization and IAM (Identity and Access Management) including authorization objects, authorization checks, IAM apps, business catalogs, business roles, restriction types, CDS access control (DCL), privilege…

• Icons

  by @laguagu

  Find, fetch, and install the right icon or logo from the right source — brand marks, country flags, file-type icons (PDF, DOCX, ZIP), and UI glyphs — and keep them visually consistent with the app. Use when the project's icon…

• Stake Game Developer

  by @egorfedorov

  End-to-end Stake game development workflow for math, RGS contract, frontend playback, and compliance gating. Use when building or updating Stake games, defining game modes and RTP targets, validating generated books/index…

• Css Motion Designer

  by @egorfedorov

  Design CSS animation systems and motion recipes for casino game UI. Use when building round transitions, idle loops, inter-round motion, background patterns, or CSS-only animation specs.

• Pixi Svelte Integrator

  by @egorfedorov

  Integrate and validate PixiJS rendering pipelines inside Svelte applications. Use when wiring Pixi application lifecycle to Svelte component lifecycle, handling mount/unmount cleanup, coordinating reactive state with render loop…

• Ui Slot Ux Designer

  by @egorfedorov

  Design, review, and validate slot game UI/UX flows for desktop and mobile play. Use when defining control hierarchy, spin-state UX, bet/balance presentation, modal interactions, responsive layouts, accessibility constraints,…

• Event Animation Designer

  by @egorfedorov

  Design, sequence, and validate event-driven animation systems for games and interactive UI. Use when defining animation triggers, timeline ordering, transition guards, interruption/cancel rules, easing/duration consistency,…

• Slot Qa Engineer

  by @egorfedorov

  Design and execute test plans for slot games covering math correctness, UI logic, performance, and compliance. Use when validating game rules, running regression tests, verifying error handling, checking jurisdiction…

• Slot Audio Engineer

  by @egorfedorov

  Design, mix, and integrate slot game audio including ambient loops, spin sounds, win celebrations, and feature music. Use when defining audio assets, tuning volume levels, synchronizing sound with animations, or validating audio…

• Slot Vfx Artist

  by @egorfedorov

  Design and implement visual effects for slot games using shaders, particle systems, and sprite animations. Use when defining big win sequences, feature transitions, symbol animations, or optimizing VFX performance for mobile…

• Ui Patterns

  by @lubusIN

  UI/UX patterns and guidelines derived from official Frappe apps (CRM, Helpdesk, HRMS). Use when designing interfaces for custom Frappe applications to ensure consistency with the ecosystem.

• Mantine Combobox

  by @mantinedev

  Build custom dropdown/select/autocomplete/multiselect components using Mantine's Combobox primitives. Use this skill when: (1) creating a new custom select-like component with Combobox primitives, (2) building a searchable…

• Forms

  by @rejot-dev

  Create, update, and inspect system Forms with runtime tools. Use when designing a JSON Schema form, changing its stored definition, reading submissions, or routing form lifecycle events.

• Router

  by @lubusIN

  Route to the appropriate Frappe skill based on task type. Use as the entry point when working on Frappe projects to determine which specialized skill to apply.

• Design Farmer

  by @hakilee

  Automated design system construction from repository analysis to production-ready implementation. Analyzes codebases, extracts design patterns, builds token hierarchies with OKLCH color management, implements accessible…

• Divi 5 CSS Patterns

  by @cjsimon2

  Use this skill when writing CSS for Divi 5 / Divi 5.11, styling Divi modules (buttons, sections, rows, blurbs, toggles, forms including the 5.3 Contact Form 7 Styler and 5.11 Gravity Forms module), the newer modules (Timeline,…

• Divi 5 Performance

  by @cjsimon2

  Use this skill when optimizing Divi 5 site performance, improving Core Web Vitals (LCP, INP, CLS), reducing render-blocking CSS, working with Divi's Critical CSS / Dynamic CSS / Inline Stylesheet system, configuring font loading…

• Divi 5 Compatibility

  by @cjsimon2

  Use this skill when validating CSS for Divi 5 / Divi 5.11 compatibility, checking unsupported features or units, troubleshooting Divi CSS that isn't applying, debugging plugin conflicts (WP Rocket, LiteSpeed, Wordfence,…

• Track Planes And Ships

  by @UseOSINT

  Track aircraft and vessels from public ADS-B and AIS broadcasts using ADS-B Exchange, Flightradar24, FlightAware, MarineTraffic, VesselFinder and Equasis. Use when following a tail number or flight, looking up an ICAO 24-bit hex…

• Ai Music

  by @genmedia-labs

  Generate AI music on RunComfy via the `runcomfy` CLI — a smart router across the music-model catalog. Routes to ElevenLabs AI Music Generation (premium 44.1 kHz stereo vocal tracks, 5 s–5 min, $0.0083/s) and ACE Step / ACE Step…

• Codex Pet

  by @genmedia-labs

  Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into `${CODEX_HOME:-$HOME/.codex}/pets/<name>/` and Codex picks it up as a custom Codex Pet…

• Ai Image Generation

  by @genmedia-labs

  Generate and edit images on RunComfy via the `runcomfy` CLI — a smart router across the full image-model catalog: FLUX 2 (Klein 9B/4B, Pro, Dev, Flash, Turbo, Max), Google Nano Banana 2 / Pro, OpenAI GPT Image 2, ByteDance…

• Image Outpainting

  by @genmedia-labs

  Image outpainting on RunComfy via the `runcomfy` CLI — extend a still beyond its original canvas, fill in what the camera didn't capture, change aspect ratio (square → 16:9, portrait → landscape) while preserving the original…

• Image Edit

  by @genmedia-labs

  Edit images on RunComfy — this skill is a smart router that matches the user's intent to the right edit model in the RunComfy catalog. Picks Nano Banana Edit (batch up to 20, identity-preserving default), OpenAI GPT Image 2 Edit…

• Image To Video

  by @genmedia-labs

  Animate any still image on RunComfy — this skill is a smart router that matches the user's intent to the right i2v model in the RunComfy catalog. Picks HappyHorse 1.0 I2V (Arena #1, native audio, identity preservation) for…

• Relight

  by @genmedia-labs

  Relight a still image — change the lighting setup, color temperature, direction, or mood — on RunComfy via the `runcomfy` CLI. Routes to Qwen Edit 2509's dedicated `relight` LoRA endpoint for purpose-built relighting, with…

• Flux Kontext

  by @genmedia-labs

  Edit images with Flux 1 Kontext Pro (Black Forest Labs' precise local image-edit model) on RunComfy — bundled with the model's documented prompting patterns so the skill gets sharper output than naive prompting against the same…

• Gpt Image Edit

  by @genmedia-labs

  Edit images with OpenAI GPT Image 2 (the `/edit` endpoint of ChatGPT Images 2.0) on RunComfy — bundled with the model's documented prompting patterns so the skill gets sharper output than naive prompting against the same model.…

• Nano Banana Edit

  by @genmedia-labs

  Edit images with Google Nano Banana 2 (image-to-image edit endpoint) on RunComfy. Documents Nano Banana Edit's strengths (preserve subject identity, swap background, localize edits with spatial language, multi-image batch edits…

• Gpt Image 2

  by @genmedia-labs

  Generate and edit images with OpenAI GPT Image 2 (ChatGPT Images 2.0) on RunComfy. Documents GPT Image 2's strengths (embedded text, logos, multilingual typography, instruction precision), its 3 fixed sizes,…

• Ai Product Photography

  by @101-skills

  Generate professional AI product photography and commercial images. Models: FLUX, Imagen 3, Grok, Seedream for product shots, lifestyle images, mockups. Capabilities: studio lighting, lifestyle scenes, packaging, e-commerce…

• Remotion Render

  by @101-skills

  Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS,…

• Email Design

  by @101-skills

  Email marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional templates, and mobile optimization. Use for: email marketing, newsletter…

• Character Design Sheet

  by @101-skills

  Character consistency across AI-generated images with reference sheets and LoRA techniques. Covers turnaround views, expression sheets, color palettes, and style consistency tricks. Use for: character design, game art,…

• Pitch Deck Visuals

  by @101-skills

  Investor pitch deck structure with slide-by-slide framework, visual design rules, and data presentation. Covers the 12-slide framework, chart types, team slides, and common investor turn-offs. Use for: fundraising decks,…

• Data Visualization

  by @101-skills

  Data visualization with chart selection, color theory, and annotation best practices. Covers chart types (bar, line, scatter, heatmap), axes rules, and storytelling with data. Use for: charts, graphs, dashboards, reports,…

• Book Cover Design

  by @101-skills

  Book cover design with genre-specific conventions, typography rules, and AI image generation. Covers fiction and non-fiction genres, sizing, thumbnail testing, and iteration workflows. Use for: self-publishing, ebook covers,…

• Explainer Video Guide

  by @101-skills

  Explainer video production guide: scripting, voiceover, visuals, and assembly. Covers script formulas, pacing rules, scene planning, and multi-tool pipelines. Use for: product demos, how-it-works videos, onboarding videos,…

• Og Image Design

  by @101-skills

  Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dynamic generation. Use for: social sharing images, blog thumbnails, link…

• Chat Ui

  by @101-skills

  Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building…

• Logo Design Guide

  by @101-skills

  Logo design principles and AI image generation best practices for creating logos. Covers logo types, prompting techniques, scalability rules, and iteration workflows. Use for: brand identity, startup logos, app icons, favicons,…