Design AI agent skills

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

• Illustration Grainy Gouache

  by @MengTo

  Draws original cosy animal scenes as hand-authored SVG cards (480x360) in a grainy gouache, risograph-like style. Identifying traits are flat shapes with no outlines on a hot-pink card; soft 3-4 stop gradient shading on every…

• Illustration Halftone Line

  by @MengTo

  Draws hand-authored SVG spot illustrations in a halftone line style for design and coding scenes. Identifying traits are a confident black line with a slight hand wobble and contours left open, grey tones made only of fine…

• Background Grid Webgl

  by @MengTo

  Create a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.

• Build Wireframe Scan Reveal

  by @MengTo

  Reveal Three.js geometry with an expanding world-space scan whose wire cage leads the solid surface, then burns away. Use for wireframe scanning, radial mesh reveals, survey pulses, holographic assembly, topology intros, and 3D…

• Book Serif Index

  by @MengTo

  Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.

• Beautiful Shadows

  by @MengTo

  Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without…

• Blue Cloudy Clean Modern

  by @MengTo

  Create a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.

• 3d Paper Material

  by @MengTo

  Build a paper sheet in Three.js that reads as paper up close — washi, cotton rag or kraft with baked fibre and tooth relief, laid and chain lines, a torn deckle edge with frayed fibres, four-layer thickness, a rolled corner and…

• Cinematic Gsap Lenis Motion System

  by @MengTo

  Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned…

• Bright Green Tech System Webgl

  by @MengTo

  Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.

• Blue Laser Clean Glass Layout

  by @MengTo

  Create a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.

• Beam Glow States

  by @MengTo

  Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained…

• Build Awwwards Quality Sites

  by @MengTo

  Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smooth-scroll engine, optional Three.js…

• Infographic Structure Creator

  by @antvis

  Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart),…

• Release Mac App

  by @steipete

  macOS app release: Sparkle, notarization, GitHub Release, Homebrew, closeout.

• Swiftui Liquid Glass

  by @steipete

  SwiftUI Liquid Glass: implement, adopt, refactor, review correctness/perf/design.

• Create Cli

  by @steipete

  CLI UX/spec: args, flags, help, output, errors, config, dry-run.

• Frontend Design

  by @steipete

  Frontend UI: pages, apps, components, polished non-generic design.

• Preline Theme Generator

  by @htmlstreamofficial

  Generate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, match a brand color, translate a mood into a theme, generate light and…

• Modular Decomposition

  by @tech-leads-club

  Runs a sequenced monolith-to-modular pipeline that sizes and inventories components, finds shared domain duplication, addresses flattening and hierarchy issues, analyzes coupling, then groups components into candidate…

• Evolutionary Modular Architecture

  by @tech-leads-club

  Guides design and implementation of evolutionary modular-monolith platforms with DDD (strategic + tactical), flat-by-aggregate organization, an Anti-Corruption Layer for vendor independence, a transactional outbox for events,…

• Frontend Design

  by @tech-leads-club

  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. Generates creative, polished code that…

• React Native Expert

  by @tech-leads-club

  Senior React Native and Expo engineer for building production-ready cross-platform mobile apps. Use when building React Native components, implementing navigation with Expo Router, optimizing list and scroll performance, working…

• Frontend Blueprint

  by @tech-leads-club

  AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code. Collects visual references, design tokens, typography, icons, layout preferences, and brand…

• Ai Sdr

  by @tech-leads-club

  When the user wants to deploy AI sales development reps, automate sales qualification, build signal-to-action routing, or design AI agent architecture for sales. Also use when the user mentions 'AI SDR,' 'AI sales agent,'…

• Figma

  by @tech-leads-club

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

• Web Design Guidelines

  by @tech-leads-club

  Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Focuses on visual design and interaction…

• Figma Implement Design

  by @tech-leads-club

  Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Use when the user provides Figma URLs or node IDs…

• Pptx

  by @ThinkInAIXYZ

  Presentation creation, editing, and analysis. When Claude 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…

• Figma Use

  by @Devin-AXIS

  **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever…

• Figma Generate Library

  by @Devin-AXIS

  Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable…

• Figma Use Figjam

  by @Devin-AXIS

  This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.

• Figma Generate Diagram

  by @Devin-AXIS

  MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render,…

• Figma Implement Motion

  by @Devin-AXIS

  Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this…

• Figma Use Slides

  by @Devin-AXIS

  This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.

• Figma Generate Design

  by @Devin-AXIS

  Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this…

• Figma Swiftui

  by @Devin-AXIS

  SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back…

• Figma Use Motion

  by @Devin-AXIS

  Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or…

• Figma Design To Code

  by @Devin-AXIS

  Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from…

• Figma Create New File

  by @Devin-AXIS

  **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a…

• Ipollowork Reference Analyzer

  by @Devin-AXIS

  Use with any iPolloWork template generating video, slides, websites or other designs from iPolloWork reference documents and a creative-context.json attachment. Read unified content, design evidence and asset paths; apply the…

• Ipollowork Video Studio

  by @Devin-AXIS

  Create or edit the HyperFrames project owned by an active iPolloWork Video Studio session without changing the embedded Studio, starting another server, or writing to another project.

• Ipollowork Design Studio

  by @Devin-AXIS

  Create or edit HTML designs inside an active iPolloWork Design Studio session while preserving its visual system, selection, theme tokens, and project boundaries.

• Ipollowork Presentations

  by @Devin-AXIS

  Create, revise, and verify slide presentations in an active iPolloWork Design session while retaining the selected template's visual and editable contracts.

• Wechat Official Messages

  by @Devin-AXIS

  Design safe WeChat follower-message automation and send customer-service text only when the user provides an explicit target and confirmation.

• Image Editing

  by @Devin-AXIS

  Edit an image from the active iPolloWork Image Studio selection or mask without overwriting the source image.

• Image Generation

  by @Devin-AXIS

  Generate image assets through iPolloWork's image service, whether Image Studio is open or closed.

• Hyperframes Keyframes

  by @Devin-AXIS

  Build seek-safe keyframe animation for the active iPollo Video timeline.

• Add Onboarding Tour

  by @lightdash

  Add a first-run guided tour, product walkthrough, coachmarks, or empty-state mock/example data to a Lightdash frontend feature. Use when the user wants to onboard users to a page, add a "Take the tour" flow, explain an…

• Frontend Style Guide

  by @lightdash

  Apply the Lightdash frontend style guide and design principles when working on React components or styling frontend code. Use when editing TSX files, building or reviewing UI, fixing styling issues, or when the user mentions…

• Talk Stage5 Script

  by @FlorianBruniaux

  Produces a complete 5-act pitch with speaker notes, a slide-by-slide specification, and a ready-to-paste Kimi prompt for AI slide generation. Requires validated angle and title from Stage 4. Use when you have a confirmed talk…

• Trustpilot Reviews

  by @browser-act

  Trustpilot customer reviews scraper for any company listed on trustpilot.com — given a company domain (e.g. shopify.com, apple.com, shopwagandtail.com) plus optional filters (page number, single star rating 1-5, single language…

• Core Components

  by @ChrisWiles

  Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

• Aura Asset Images

  by @MengTo

  Use when you need high-quality stock-style images from Aura Assets (aura.build/assets) similar to Unsplash for design mockups and marketing: backgrounds, abstract wallpapers, architecture, portraits, and headshots. Includes a…

• Optimize Web Animations

  by @MengTo

  Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter…

• Article Prompts To Skills

  by @MengTo

  Convert an article, tutorial, or prompt pack into focused reusable AgentSkills, one independent capability per skill, with portable instructions, example prompts, working demos, preview screenshots, validation, gallery updates,…

• Video To Superprompt

  by @MengTo

  Turn a reference video into a super detailed recreation or inspiration prompt. Use when the user provides, mentions, uploads, links, or points to a video and asks to analyze the design, UI, animations, transitions, scroll…

• Add Mouse Driven Orbit

  by @MengTo

  Add restrained mouse-driven orbit and parallax depth to a Three.js hero by damping one pointer target and splitting it across camera translation, look-at, and small object rotations. Use for passive cinematic 3D heroes,…

• Web Technique To Skill

  by @MengTo

  Turn a visual or interaction technique you already built into a reusable web-design skill, by isolating the one mechanism that makes it work while reproducing its approved reference exactly around that focus, and packaging it…

• Add Shader Cursor Trail

  by @MengTo

  Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film grain, and protected by…

• Html To Interaction Prompts

  by @MengTo

  Convert a supplied HTML page or generated HTML reference into a screenshot-backed article containing multiple reusable interaction prompts. Use when the user provides an HTML file, exported page, generated-page.html, or…

• Daily Ui Inspiration Capture

  by @MengTo

  Create a recurring daily UI inspiration capture. Use when the user asks to run, refresh, package, or validate dated UI inspiration bundles, especially for `articles/YYYY-MM-DD-ui-inspiration-capture/` outputs, Framer/Dribbble…

• Agency Grid Layout Minimal

  by @MengTo

  Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.

• Ambient Section Particles

  by @MengTo

  Add a restrained particle atmosphere inside one section with configurable shapes, density, gravity, wind, sway, rotation, recycling or settling, pointer disturbance, visibility pausing, responsive limits, and reduced-motion…

• Design First Ui Prompting

  by @MengTo

  Use when you need design-first, spec-driven, skimmable prompts for UI generation. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.

• Audit Reference Originality

  by @MengTo

  Audit a website or digital experience against its supplied source references for originality and plagiarism risk. Use when Codex must compare current or historical site output with reference pages, capture packs, screenshots,…

• Build Vesperfall Review Assets

  by @MengTo

  Build truthful Vesperfall asset-library review pairs from transparent PNG references and live Three.js, FBX, or img2threejs models. Use when adding a character, enemy, prop, or equipment asset to the Vesperfall catalog; creating…

• No Ai Design Slop

  by @MengTo

  Prevent and remove generic AI-generated design defaults, incoherent visual choices, and established UI defects while creating, revising, or reviewing websites, apps, screenshots, mockups, and design code. Use as a passive…

• Unsplash Asset Images

  by @MengTo

  Use when you need to pick high-quality Unsplash images for product/design assets (avatars, headshots, portraits, large website backgrounds, and abstract wallpapers) and output real Unsplash URLs plus practical instructions for…

• Animation Systems

  by @MengTo

  Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility…

• Animation On Scroll

  by @MengTo

  Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the…

• Atmosphere Background

  by @MengTo

  Create a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom.

• Build Game Map Editor

  by @MengTo

  Build, extend, or audit production-linked browser map editors for Three.js and isometric games. Use when Codex needs to create a private director view, derive a versioned editor document from authored placements, add outliner,…

• Build Game Monster System

  by @MengTo

  Build, integrate, audit, or refactor rigged monsters for Three.js and web action games. Use for monster asset contracts, procedural or imported creature rigs, semantic joints and sockets, hurtboxes and attack volumes, combat…

• Codex Gpt Image 2 5 Flare

  by @MengTo

  Generate or edit artwork with built-in Codex image gen, especially transparent PNG ornaments, game sprites, emblems, and UI graphics. Use when the user requests GPT 2.5 Flare, /codex-gpt-image-2-5-flare, or this built-in…

• 3d High Poly Models

  by @MengTo

  Create or integrate highly detailed 3D models with smooth silhouettes, shaped surfaces, believable bevels, and close-up geometry, then prepare suitable runtime LODs and loading. Use when a user requests high polygon counts,…

• 3d Retina Resolution

  by @MengTo

  Render a 3D canvas sharply on Retina and HiDPI displays, including explicit 200 percent resolution, synchronized renderer and post-processing sizes, correct pointer coordinates, and measured quality fallbacks. Use for blurry…

• 3d Falling Leaves

  by @MengTo

  Build recognizable falling leaves in world space using instanced geometry, independent tumble, coupled sideways drift, shared wind, scene occlusion, and camera-aware recycling. Use for 3D autumn leaves or drifting foliage in…

• 3d Sky Rays

  by @MengTo

  Add sun shafts and crepuscular rays to a Three.js or equivalent 3D scene, using scene occlusion, a projected sun position, controlled foreground spill, and scalable post-processing. Use for rays of light from the sky, sunlight…

• Audit Ai Design Slop

  by @MengTo

  Audit websites, apps, screenshots, mockups, and design code for harmful AI-design clichés, generic generated defaults, and established UI defects. Use when the user wants evidence-backed design feedback, an anti-slop review, or…

• 3d Four Seasons

  by @MengTo

  Add coordinated spring, summer, fall, and winter states to a 3D scene, blending foliage, sunlight, sky, ground materials, snow, and particles without rebuilding the world. Use for seasonal controls, architectural walkthroughs,…

• Build Game Audio Feedback

  by @MengTo

  Design or implement responsive audio feedback for a Three.js or web game. Use for action sounds, combat layers, music states, spatial audio, mix priorities, mute controls, accessibility, mobile audio unlock, and audio performance.

• Design Action Combat

  by @MengTo

  Design, implement, tune, or test readable tactical action combat for web games. Use for attack timing, guard and dodge windows, hit contact, posture, lock-on, weapons, boss phases, combat feedback, and deterministic combat tests.

• Unstuck

  by @Q00

  Break through stagnation with lateral thinking personas — single or multi-persona debate

• Plan Pipeline Start

  by @FlorianBruniaux

  5-phase planning: PRD analysis, design review, technical decisions, dynamic research team, metrics. Produces a complete implementation plan + ADRs before any code is written.

• Codex Ppt

  by @ningzimu

  Generate visually unified image-based PPT/PPTX decks from articles, reports, papers, notes, or outlines.

• Trustpilot Company Info

  by @browser-act

  Trustpilot company profile lookup on trustpilot.com — input a company domain (e.g. apple.com, shopify.com, shopwagandtail.com) and extract company metadata: official display name, businessUnitId, TrustScore (1-5), star rating,…

• Amazon Product Search Api Skill

  by @browser-act

  This skill is designed to help users automatically extract product data from Amazon search results. The Agent should proactively apply this skill when users request searching for products related to keywords, finding…

• Google Maps Reviews Api Skill

  by @browser-act

  This skill is designed to help users automatically extract reviews from Google Maps via the Google Maps Reviews API. Agent should proactively apply this skill when users request to find reviews for local businesses (e.g., coffee…

• Slidev

  by @antfu

  Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code…

• Unocss

  by @antfu

  UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

• Antfu Design

  by @antfu

  antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product…

• Frontend Design

  by @fengshao1227

  Frontend design skill fused from Impeccable + custom extensions. Covers design philosophy, anti-AI-slop patterns, typography, color (OKLCH), spatial design, motion, interaction, responsive, UX writing, state management,…

• Architecture

  by @fengshao1227

  架构设计能力索引。API设计、安全架构、云原生、数据安全。当用户提到架构、设计、API、云原生时路由到此。

• Critique

  by @fengshao1227

  Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use…

• Liquid Glass

  by @fengshao1227

  Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.

• Claymorphism

  by @fengshao1227

  Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.

• Neubrutalism

  by @fengshao1227

  Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.

• Glassmorphism

  by @fengshao1227

  Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.

• Extract

  by @fengshao1227

  Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components,…