Design AI agent skills

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

• Harden

  by @fengshao1227

  Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready,…

• Audit

  by @fengshao1227

  Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility…

• Delight

  by @fengshao1227

  Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions,…

• Animate

  by @fengshao1227

  Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design,…

• Colorize

  by @fengshao1227

  Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or…

• Bolder

  by @fengshao1227

  Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants…

• Clarify

  by @fengshao1227

  Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or…

• Overdrive

  by @fengshao1227

  Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something…

• Typeset

  by @fengshao1227

  Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished,…

• Polish

  by @fengshao1227

  Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from…

• Onboard

  by @fengshao1227

  Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user…

• Distill

  by @fengshao1227

  Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.

• Optimize

  by @fengshao1227

  Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.

• Quieter

  by @fengshao1227

  Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.

• Normalize

  by @fengshao1227

  Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.

• Teach Impeccable

  by @fengshao1227

  One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.

• Sn Ppt Standard

  by @OpenSenseNova

  仅在 `sn-ppt-entry` 与 `sn-ppt-story` 已准备绝对 `DECK_DIR` 和 `outline.md` 后使用；生成每页独立 HTML（1600×900）、渲染 PNG、逐页讲稿、`present.html`，并按 `static_postprocess` 选择生成由 Standard 自有 exporter 转换的 PPTX。**`present.html`…

• Sn Ppt Workbench

  by @OpenSenseNova

  Use when the user asks to open, preview, inspect, or visually edit an existing SenseNova HTML presentation in the PPT Workbench, using an explicit deck_dir or the latest deck in the current workspace.

• Sn Ppt Creative

  by @OpenSenseNova

  Use when a prepared PPT task with a current outline.md should be generated as an image-first presentation with one 16:9 image per slide and optional PPTX packaging.

• Sn Ppt Dazzle

  by @OpenSenseNova

  需要把演示 / 幻灯片 / PPT / slides 做成单文件 HTML 动态 deck（动效、跨页过渡、键盘翻页、1280×720）时使用。本 skill 非入口：使用前必须先确认 sn-ppt-entry 与 sn-ppt-story 两个前置 skill 可用，依次执行 entry（建 DECK_DIR / task_pack.json）→ story（生成…

• Interface Design

  by @Dammyjay93

  Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual…

• Photo Abstract Editorial

  by @ZzzLc0405

  Create a clean, vertical editorial artwork that preserves an uploaded photograph as the original image and pairs it with a restrained, photo-derived abstract memory panel and poetic English title. Use when asked to transform a…

• Sn Md To Html Report

  by @OpenSenseNova

  将 Markdown 报告、研究笔记、行业分析、战略备忘录、技术白皮书、复盘、周报等长文档，重组并创作为有编辑判断、网页美感和证据秩序的自包含 HTML 专题页。用户要求“转成 HTML”“网页化报告”“美化报告”“做成专题页”“便于分享”“提升可读性/设计感”“把报告做成网页”时使用。必须先写 plan.md 再写 HTML，保留原文事实断言和结论强度，不套模板，不做机械 Markdown 转换。

• Sn Image Resume

  by @OpenSenseNova

  Generates a designed portfolio-resume image from resume content provided in conversation text. Extracts optional style instructions, converts the resume into a fixed portfolio-resume layout prompt, and generates the final image…

• Drawio

  by @jgraph

  Always use when user asks to create, generate, draw, or design a diagram, flowchart, architecture diagram, ER diagram, sequence diagram, class diagram, network diagram, mockup, wireframe, or UI sketch, or mentions draw.io,…

• Epic Ui Guidelines

  by @epicweb-dev

  Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack

• Text To Lottie

  by @diffusionstudio

  Create, edit, or fix Lottie/Bodymovin JSON animations for the local Skia Skottie player. Use for text-to-Lottie, SVG/logo/type animation, loaders/icons, state feedback, UI microinteractions, lower thirds, diagrams,…

• Improve Skill Quality

  by @dotnet

  Diagnoses and fixes skills in the dotnet/skills repository that lose to their own baseline, fail to activate, time out, or return "no credible improvement". Use when an evaluation verdict is a regression or underpowered, when a…

• Migrate Static To Wrapper

  by @dotnet

  ALWAYS USE when asked to migrate, replace, or make testable existing C# static calls with a named wrapper or built-in abstraction: DateTime.UtcNow/Now or DateTimeOffset.UtcNow to TimeProvider/IClock, File.* to IFileSystem or an…

• Generate Testability Wrappers

  by @dotnet

  DO NOT USE when the target already consumes an injected interface or built-in abstraction such as IFileSystem or TimeProvider, even if the request says "generate a wrapper"; no new wrapper is needed. Use only when C# source…

• Boltz

  by @aipoch

  Structure prediction for protein, nucleic-acid, and small-molecule complexes with Boltz-2 (Passaro & Wohlwend et al. 2025, github.com/jwohlwend/boltz). Reach for this skill to validate designed binders against a target, to…

• Lieflat Charts

  by @larashero3-dotcom

  一套模板驱动的数据可视化与报告生成 skill，既能严格从 Lupi、Basics、Glance、Maps 与 Interactive gallery 的真实实现生成 HTML 图表，也能从 12 套中英文整页报告模板生成可发布的 HTML 报告；以 Mono 为保底，能按数据语义自动选择内置彩色预设，也支持用户明确提供的自定义色板。地图仅在用户明确要求时启用，同一交付禁止混用色系。

• Get Prompt From Image

  by @wuyoscar

  Analyze user-provided reference images and reverse-engineer high-fidelity AI image-generation prompts. Use when the user asks to recreate, imitate, reverse-engineer, or extract prompts from photographs, illustrations, 3D…

• Maui Safe Area

  by @dotnet

  .NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers the new SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard avoidance, Blazor Hybrid CSS safe areas, migration from legacy iOS-only…

• Maui Theming

  by @dotnet

  Guide for theming .NET MAUI apps — light/dark mode via AppThemeBinding, ResourceDictionary theme switching, DynamicResource bindings, system theme detection, and user theme preferences. Use when: "dark mode", "light mode",…

• Maui Dependency Injection

  by @dotnet

  Guidance for configuring dependency injection in .NET MAUI apps — service registration in MauiProgram.cs, lifetime selection (Singleton / Transient / Scoped), constructor injection, Shell navigation auto-resolution,…

• Use Igniteui Blazor

  by @dotnet

  Add, configure, or review Ignite UI for Blazor Lite component support in Blazor applications. USE FOR: installing IgniteUI.Blazor.Lite or IgniteUI.Blazor.GridLite, registering AddIgniteUIBlazor() in Blazor Server, WASM, Hybrid,…

• Create Datadriven Aspnetcore

  by @dotnet

  Generate or scaffold ASP.NET Core code — Razor Pages, Blazor components, MVC controllers, views, and Minimal API endpoints — without using ASP.NET Core CLI scaffolding/code-generation tools. Use when (1) adding CRUD pages,…

• Ip As Logo

  by @s1dashu

  Generate extremely simple, cute, personified square character images with rounded heavy forms, two purposeful character colors, one solid background color, and a dominant lower-corner composition. Use when creating an animal,…

• Scientific Figure Making

  by @ChenLiu-1996

  Covers publication-ready matplotlib figures for academic papers, slides, and reports—bars, trends, scatter, heatmaps, and multi-panel layouts—with this repository’s house style, print/vector export conventions, and parity with…

• Frontend Conventions

  by @iflytek

  Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.

• Diagram Maker

  by @iflytek

  Create standalone SVG/HTML or editable Excalidraw diagrams for concepts, architecture, processes, flows, and whiteboards.

• Vibe Textual Ui

  by @mistralai

  Textual TUI widget and TCSS conventions for Mistral Vibe. Use when building or styling Textual widgets, writing TCSS rules, working with selectable lists, tool headers, theme variables, or UI component layout.

• Scenes Gathered Zine Live Flow V1 0

  by @Zeejay0

  Run the complete Gathered Scenes workflow from a supplied photograph to a static poster, a scene-authored adaptive v0.2 flat paper-tear Apple Live Photo ZIP, and optional handoff of that ZIP to the local Live Photo Importer. Use…

• Morandi Cinematic Poster Zeejay

  by @Zeejay0

  Transform a user-supplied personal photograph into a source-faithful, typography-driven Morandi cinematic poster without stars or decorative collage symbols. Use film-poster title design, optional poetic byline and tagline,…

• Scenes Gathered Zine V1 9

  by @Zeejay0

  Transform a supplied photo into an orientation-matched Gathered Scenes Zine paper poster. Keep retained photographic regions visually unchanged, translate paper-covered regions into simplified spatially registered illustration…

• Scene Distillation Zine V1 3

  by @Zeejay0

  Transform a user-supplied photo into an expressive minimal zine poster made only from original source-derived illustration, an artistic proposition, emotional tension, visual metaphor, spacious negative space, art-directed…

• Scenes Gathered Zine V1 3

  by @Zeejay0

  Transform a user-supplied photo into a vertical 3:5 Gathered Scenes Zine poster that anchors truthful photography inside a spacious source-derived abstract illustration field, aggressively compresses dense foliage and other…

• Specification System

  by @mvschwarz

  Use when authoring rig specs, agent specs, workflow specs, startup/context fragments, operating-mode declarations, or designing the user spec library. Covers the 4 failure modes (spec instantiates topology but not workflow/mode;…

• Frontend Design

  by @mvschwarz

  Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages,…

• Ios Redteam Pipeline

  by @elementalsouls

  End-to-end iOS red-team pipeline — IPA acquisition (App Store extraction, TestFlight, enterprise/ad-hoc sideload), class-dump/Hopper/Ghidra static analysis, Info.plist + entitlements + Keychain secret extraction, App Transport…

• Agentation Self Driving

  by @benjitaylor

  Autonomous design critique mode using the Agentation annotation toolbar. Use when the user asks to "critique this page," "add design annotations," "review the UI," "self-driving mode," "auto-annotate," or wants an AI agent to…

• Agentation

  by @benjitaylor

  Add Agentation visual feedback toolbar to a Next.js project

• Typescript

  by @EpicenterHQ

  Apply project conventions for TypeScript types, imports, generics, factories, and runtime schemas. Use when editing `.ts` files or reviewing TypeScript design and tests, including constraints that need to name an invalid literal…

• Ui Design

  by @EpicenterHQ

  Design and review Epicenter interfaces while collapsing local UI primitives into the shared component system. Use when co-designing, exploring comparable apps, turning a feature idea into Svelte UI, or changing `packages/ui`,…

• Error Handling

  by @EpicenterHQ

  Use when a task mentions error handling, Wellcrafted Results, result types, defineErrors, trySync, tryAsync, unwrap, thrown exceptions, or deciding whether to propagate, recover from, or present a failure. For recording…

• Svelte

  by @EpicenterHQ

  Apply Epicenter’s Svelte 5 patterns for runes, components, lifecycles, and workspace-backed state. Use when editing `.svelte`, `.svelte.ts`, or Svelte UI state.

• Teaching Page

  by @EpicenterHQ

  Design a self-contained HTML page that teaches one thing, using space and a single accent instead of boxes and colour. Use when building an explainer, lesson, diagram, or walkthrough page, or when an existing page reads dense,…

• Adversarial Review

  by @EpicenterHQ

  Independently pursue the strongest greenfield design, challenge the underlying model, and find concrete deletion prizes. Use when asking for an adversarial review, an independent architecture review, or an adversarial checkpoint…

• Svg Animations

  by @EpicenterHQ

  Animate SVGs with SMIL, CSS keyframes, stroke drawing, shape morphing, and motion paths. Use when adding motion to SVGs such as spinners, logos, draw-in effects, or morphing icons, not for static drawing or icon layout.

• Cohesion Over Testability

  by @EpicenterHQ

  Collapse test-shaped production boundaries while preserving behavior and coverage. Use when a helper, wrapper, injected dependency, or export exists mainly to let a unit test reach internals.

• Asymmetric Wins

  by @EpicenterHQ

  Identify an asymmetric win by refusing a small promise that would eliminate disproportionate complexity. Use when the user asks about asymmetric wins, pixel perfect fidelity, compatibility, fallbacks, modes, duplicate paths, or…

• One Sentence Test

  by @EpicenterHQ

  Test a product, API, utility, or design by stating what it actually does in one sentence. Use when auditing coherence or looking for orphaned surfaces, duplicate verbs, or inert abstractions, not for plain code-comprehension…

• Styling

  by @EpicenterHQ

  CSS and Tailwind, cn(), flex layouts. Use for "style this", "fix the CSS", "add classes", "not scrolling", "overflow", Tailwind utilities.

• Excalidraw Diagram

  by @coleam00

  Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts.

• Design Control Loop

  by @humanlayer

  interview the user to design an agentic control loop (sensor, controller, actuator under disturbances) tailored to their codebase, then build it as locally-runnable components plus a scheduled coding-agent workflow

• Swiftui Pro

  by @twostraws

  Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance. Use when reading, writing, or reviewing SwiftUI projects.

• Taro Ui Guide

  by @jd-opensource

  Guides installation, Taro config, styling, and usage of taro-ui (At* components) for WeChat/Alipay/H5/RN. Use when building Taro apps with taro-ui, picking components, theming, i18n, or modifying packages/taro-ui source.

• Typescript Pro

  by @zebbern

  Use when building TypeScript applications requiring advanced type systems, generics, or full-stack type safety. Invoke for type guards, utility types, tRPC integration, monorepo setup.

• R3f Best Practices

  by @zebbern

  React Three Fiber (R3F) and Poimandres ecosystem best practices. Use when writing, reviewing, or optimizing R3F code. Triggers on tasks involving @react-three/fiber, @react-three/drei, zustand, @react-three/postprocessing,…

• Design System Builder

  by @zebbern

  Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs…

• Data Viz Renderer

  by @zebbern

  Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards. Offers 8 color palettes and built-in icons with no external dependencies. Triggered when users…

• R3f Animation

  by @zebbern

  React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes. Use when animating objects, playing GLTF animations, creating procedural motion, or implementing physics-based movement.

• Remotion Markup

  by @remotion-dev

  Content, animation and effects best practices

• Remotion Maps

  by @remotion-dev

  Remotion Map animation knowledge

• Remotion Create

  by @remotion-dev

  Create a new Remotion video

• Remotion Interactivity

  by @remotion-dev

  Structure Remotion markup for interactivity

• Visual Audit

  by @brycewang-stanford

  Perform adversarial visual audit of Quarto or Beamer slides checking for overflow, font consistency, box fatigue, and layout issues.

• Translate To Quarto

  by @brycewang-stanford

  Translate Beamer LaTeX to Quarto RevealJS. Multi-phase workflow with TikZ extraction and QA.

• Apk Redteam Pipeline

  by @elementalsouls

  End-to-end Android APK red-team pipeline — automated APK acquisition (Play Store + apkpure + apkmirror fallback), jadx decompilation, secret/URL/JWT/Firebase grep, pinned-cert extraction, exported-component enumeration, Frida…

• Openkb Deck Neon

  by @VectifyAI

  Use when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow / glassmorphism look (赛博 / 科技风 / 暗色 / 霓虹 / 炫酷).…

• Openkb Html Critic

  by @VectifyAI

  Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.)…

• Openkb Deck Editorial

  by @VectifyAI

  Use when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content. Generates a polished single-file HTML deck in the Editorial Monocle visual direction (warm…

• Suggest Lucide Icons

  by @graphif

  Suggest relevant Lucide icons for concepts or UI placements. Searches lucide.dev to find actual icons that symbolize ideas or fit design contexts. Use when needing icons for UI work, documentation, or symbolic representation.

• Hyperframes

  by @spinabot

  Author HTML compositions that the `render_video` tool turns into deterministic MP4 video — animated charts and dashboards, data explainers, text/quote cards, kinetic typography, product teasers, and branded short-form social…

• Pdf

  by @spinabot

  Create and edit PDFs to a professional standard — generate from content, draw vector/precise layouts, embed custom (incl. CJK/Unicode) fonts, CREATE and fill AcroForm fields (text/checkbox/radio/dropdown), flatten,…

• Canvas

  by @spinabot

  Display HTML content — games, visualizations, dashboards, generated HTML, interactive demos — on a connected canvas-capable display surface. Use when you need to present visual or interactive web content on a screen.

• Openhue

  by @spinabot

  Control Philips Hue lights and scenes via the OpenHue CLI.

• Codeart2d

  by @0x0funky

  Explicit-only last resort. Draws game art from code, with no image model - pixel sprites from a PixelSpec, flat vector props, UI and icons from portable SVG, rigged characters with planted feet, FX with a JS runtime, seam-proven…

• Screenshot Isolated

  by @IvanMurzak

  Render a target GameObject from a chosen camera angle with optional layer-based isolation, configurable background (solid/skybox/transparent), multi-light setup via JSON, and Composite (2x2 Front/Right/Back/Top) mode. Returns a…

• Improve Codebase Architecture

  by @vinvcn

  扫描代码库中的深化机会，生成可视化 HTML 报告，然后围绕你选中的候选项继续追问。

• Grilling

  by @vinvcn

  围绕计划、decision 或 idea 持续追问用户。适用于用户想对自己的思路做压力测试，或使用任何 “grill” 触发措辞时。

• Muapi Social Media Video

  by @SamurAIGPT

  Brand-aware social media video creator. Reads brand-identity.md, ICP.md, and messaging.md to write a post/storyboard, craft an optimized Seedance 2.0 Director prompt, generate reference frames with the best available image…

• Muapi Cinema Director

  by @SamurAIGPT

  Direct high-fidelity cinematic video with AI — translates creative intent into technical cinematographic directives for Veo3, Kling, and Luma video models via muapi.ai

• Muapi Nano Banana

  by @SamurAIGPT

  Reasoning-driven image generation using structured creative briefs (Gemini 3 style) — generates high-fidelity images via muapi.ai with logic-based prompting

• Muapi Logo Creator

  by @SamurAIGPT

  Engineer professional-grade brand logos using geometric primitives and negative space — generates minimalist, scalable vector-style marks via muapi.ai

• Muapi Ui Design

  by @SamurAIGPT

  Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai

• Muapi Color Analysis Board

  by @SamurAIGPT

  Turn a portrait photo into a high-end editorial "Color Analysis Board" in a luxury fashion-magazine style (Dior / Ralph Lauren aesthetic) — best colors, undertone, makeup guide, capsule wardrobe, hair & jewelry recommendations,…

• Muapi Chibi Collage Effect

  by @SamurAIGPT

  Turn a real lifestyle photo into a polished "chibi clone sticker diary" image — the original person stays photorealistic, surrounded by 5–8 kawaii chibi mini-clones, scrapbook doodles, and handwritten-style captions that match…

• Muapi Amazon Product Listing

  by @SamurAIGPT

  Generate a complete Amazon product listing image set — hero image, lifestyle shot, infographic with features, and comparison/detail closeups optimized for Amazon standards.