Skills DirectorySearch all skills ↗Design AI agent skills
3,804 skills in the archive. Read a skill’s instructions or open its original repository.
Built In Ai
by @GoogleChromeLabs
Teaches the AI about modern Chrome Built-in AI APIs (Prompt, Translation, Writing Assistance) and their polyfills.
Emil Design Engineering
by @Asymmetric-al
Design engineering principles and patterns for building polished, accessible web interfaces. Use this skill when building UI components, reviewing frontend code, implementing forms, handling touch interactions, optimizing…
Improve Animations
by @Asymmetric-al
Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it…
Bendc Frontend Guidelines
by @Asymmetric-al
HTML, CSS, and JavaScript craft guidelines from bendc/frontend-guidelines — semantics, a11y basics, selector discipline, motion-friendly CSS, and readable JS. Use for markup review, static HTML/CSS, email HTML, or general…
Find Animation Opportunities
by @Asymmetric-al
Inspect a Core UI or code surface for a small number of justified motion opportunities and explicitly identify what should remain static. Use when asked what should animate, where motion would improve feedback or comprehension,…
Apple Design
by @Asymmetric-al
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions,…
Animation Vocabulary
by @Asymmetric-al
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user…
Moai Library Shadcn
by @Asymmetric-al
Build UI with Core's shadcn/Base UI system. Use for selecting, installing, composing, or customizing shadcn/ui, registry items, themes, and wrappers. Always preserve exact style `base-maia`, Zinc-oriented semantic CSS-variable…
Emil Design Eng
by @Asymmetric-al
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. Use as a craft companion after Core's frontend, emil-design-engineering,…
Anim
by @Asymmetric-al
Tasteful, subtle web UI animation following Emil Kowalski / animations.dev principles. Use when adding or reviewing interface motion — hover and press feedback, entrances and exits, modals, toasts, menus, loading and skeleton…
Components Build
by @Asymmetric-al
Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers…
Html Widget
by @PM-Shawn
生成可交互的 HTML 可视化组件 — 算法动画、数据图表、概念演示、交互式教程等。当用户需要交互式演示、动画解释、数据探索、UI 原型等场景时触发，直接输出 html 代码块，前端会在安全沙箱中渲染为可交互组件。
Svg Diagram
by @PM-Shawn
用 SVG 生成精美的架构图、流程图、时序图、层级图、对比图等结构化图表。直接输出 ```html 代码块（内含 SVG），前端在沙箱 iframe 中渲染。效果比 Mermaid 更美观、布局更灵活。
Infographic
by @PM-Shawn
生成精美的纯 HTML+CSS 信息图 — 时间线、流程、对比分析、SWOT、金字塔、漏斗、数据卡片、组织架构等。无需外部依赖，在沙箱 iframe 中渲染。适合将结构化信息以海报级视觉效果呈现。
Brand Agency
by @glebis
Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces. This skill should be used when brand colors, visual formatting, neobrutalism style, or Agency design…
Agency Socials
by @glebis
Generate social media covers and assets for AGENCY Community events, meetups, and YouTube recordings. Use when creating event covers, YouTube thumbnails, or social posts for the AGENCY Community.
Design Tokens
by @glebis
MOVED — design-tokens now ships in the humane plugin (glebis/humane-agentic-design), not here. This directory is a redirect; install humane to get the maintained skill.
Jtbd
by @glebis
MOVED — jtbd now ships in the humane plugin (glebis/humane-agentic-design), not here. This directory is a redirect; install humane to get the maintained skill.
Eval Ui Ux
by @Ibrahim-3d
Specialized UI/UX evaluator for the Evaluate-Loop. Use this for evaluating UI shell tracks, design system tracks, screen implementation tracks, or any track where the primary deliverable is visual/interactive UI. Checks design…
Anatomy
by @wheresryan22
Build crafted, highly detailed, interactive isometric SVG figures that explain a technical idea as a real physical object (a test rig, a dial gauge, a cabinet of drawers, a plotter, a lock), with many small precise solid parts,…
Rams
by @brianlovin
Run accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.
Favicon
by @brianlovin
Generate a complete set of favicons from a source image and update HTML. Use when setting up favicons for a web project.
Spark App Template
by @github
Comprehensive guidance for building web apps with opinionated defaults for tech stack, design system, and code standards. Use when user wants to create a new web application, dashboard, or interactive interface. Provides tech…
Drawio Logical Diagrams
by @giuseppe-trisciuoglio
Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Use when creating: (1) logical flow diagrams showing data/process flow between system components, (2)…
Ui Craft
by @educlopez
Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards,…
Redesign
by @educlopez
Redesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content), picks a refresh/reskin/rebuild scope, then modernizes deliberately.…
Unhappy
by @educlopez
State-first design pass — inventories and implements all non-happy states (loading, empty, error, partial, conflict, offline) before the happy path, and refactors impossible boolean state to proper state machines. Use when…
Harden
by @educlopez
Production-readiness pass — audits and implements the full non-happy-path matrix: loading skeletons, empty states, error messages, partial data, i18n, offline, permissions, and first-run guidance. Use when preparing a surface…
Polish
by @educlopez
Final craft pass applying the compound details from the polish checklist — micro-typography, spacing rhythm, hover states, and a signature detail — directly to code. Use when the surface is functionally complete but feels…
Extract
by @educlopez
Refactoring pass — extracts repeated Tailwind class combos and markup into components, and lifts magic values into design tokens. Use when the codebase has obvious duplication, hardcoded hex values or pixel sizes, or when the…
Distill
by @educlopez
Reduction pass — cuts content, structure, visuals, and dead code that doesn't answer a user question or drive an action, respecting CRAFT_LEVEL. Use when the UI feels cluttered, has too many CTAs, walls of text, or decorative…
Craft
by @educlopez
One-shot build pipeline for a complete surface from an outcome recipe — inputs (or defaults) → composition → theme → build order → acceptance bar. Use when the user asks for a whole surface ("build me a dashboard", "hazme un…
Typeset
by @educlopez
Typography pass covering font choice, modular scale, tracking, leading, weight hierarchy, and micro-typography details. Use when fonts feel generic (default Inter with no reason), the scale is ad hoc, hierarchy is flat, or the…
Bolder
by @educlopez
Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user says "bolder", "more…
Delight
by @educlopez
Delight pass — adds one or two memorable micro-interactions (copy specificity, hover choreography, state transitions, one signature detail) without decoration or confetti. Use when the UI works but feels generic, or when the…
Adapt
by @educlopez
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when adding a new screen that hasn't been tested across viewports, or when the…
Critique
by @educlopez
Design lens critique covering visual hierarchy, clarity, and anti-slop patterns — produces a findings table, no code edits unless asked. Use when the user wants a design review, says "what's wrong with this UI", or needs a…
Animate
by @educlopez
Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user asks to add animation, "make it feel smoother", fix janky transitions,…
Finalize
by @educlopez
Pre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy. Use when the user wants to ship, merge, or finalize a surface and needs a verdict (READY / NOT READY…
Clarify
by @educlopez
UX copy review across buttons, errors, empty states, and form hints — critiques by default, applies only on request. Use when copy feels vague, generic, or AI-sounding, or when the user says "fix the labels", "improve error…
Quieter
by @educlopez
Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler",…
Colorize
by @educlopez
Color strategy pass — introduces a single accent at 3-5 intentional placements, or reduces an over-colored UI back to 90% neutral. Use when the UI has no color identity, uses blue by default, or is shouting with too many…
Heuristic
by @educlopez
Produce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws + optional persona walkthroughs. Outputs a machine-parseable scorecard plus a 0-100 UsabilityScore (the judged companion to the deterministic…
Start
by @educlopez
Front door. Reads the current project (framework, tokens, brief, spec, harness) and reports what ui-craft can do right now, then routes you to the right next step. Run this first if you're new or unsure where to begin. No code…
Shape
by @educlopez
Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code. Use when starting a new screen from scratch or when the user's brief is still ambiguous. Invoke when the user asks…
Sddesign
by @educlopez
Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run. Writes `.ui-craft/spec.md`. Run when starting a net-new surface from scratch. Invoke when the user asks for…
Ui Craft Dense Dashboard
by @educlopez
Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums. Trigger on: dashboard, admin…
Ui Craft Editorial
by @educlopez
Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif display + humanist body, wide reading column, drop caps, OpenType. Trigger on: editorial, magazine,…
Ui Craft Minimal
by @educlopez
Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one accent, Inter/Geist, hairline borders over shadows. Trigger on: minimal, clean, Linear-like,…
Audit
by @educlopez
Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit' alongside design / UI / frontend work.
Remember
by @educlopez
Record a learned design constraint from a correction into the project brief. Invoke when the user asks for remember on their UI, or mentions 'remember' alongside design / UI / frontend work.
Brief
by @educlopez
Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work.
Tokens
by @educlopez
Audit or establish the project's 3-layer token spine. Invoke when the user asks for tokens on their UI, or mentions 'tokens' alongside design / UI / frontend work.
State Machine
by @WellApp-ai
Document UI component states (current vs expected) with transitions
Design Context
by @WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
Phasing
by @WellApp-ai
Group slices into risk-optimized phases with timeline generation
Competitor Scan
by @WellApp-ai
Research best-in-class products using Browser MCP and WebSearch
Setup
by @WellApp-ai
One-time environment setup for new team members
Mcp Server
by @WellApp-ai
Guide for creating new MCP server integrations
Backup Disaster Recovery
by @aj-geddes
Implement backup strategies, disaster recovery plans, and data restoration procedures for protecting critical infrastructure and data.
Color Accessibility
by @aj-geddes
Design color palettes that are accessible to all users including those with color blindness. Ensure sufficient contrast, meaningful use of color, and inclusive design.
Browser Debugging
by @aj-geddes
Debug client-side issues using browser developer tools. Identify JavaScript errors, styling issues, and performance problems in the browser.
Frontend Review Performance
by @mizchi
Use when reviewing React rendering performance — profiler-first diagnosis, memo/useCallback/useMemo correctness, virtual scroll, useTransition/useDeferredValue, and canvas/WebGL separation for data-heavy UIs. Covers checklist…
Frontend Review State
by @mizchi
Use when reviewing state management architecture — classifying state types (server/URL/form/UI), checking for over-globalization, Jotai/Zustand/Redux patterns, derived state, and logout/cache invalidation. Covers checklist…
Make Game
by @PlayableIntelligence
Use when the user wants to design, scaffold, build, or iterate on a video game — including brainstorming new game ideas, planning a gameplay loop, choosing an engine, scaffolding a project, adding features, fixing gameplay bugs,…
Game Assets
by @PlayableIntelligence
Game asset engineer that creates pixel art sprites, animated characters, and visual entities for browser games. Use when a game needs better character art, enemy sprites, item visuals, or any upgrade from basic geometric shapes…
Meshyai
by @PlayableIntelligence
Generate custom 3D models from text or images using Meshy AI, then auto-rig and animate them for Three.js games. The preferred source for all 3D game assets. Use when the user says "generate a 3D model", "create a character…
Retrodiffusion
by @PlayableIntelligence
Generate true pixel art sprites, tilesets, and animations with the Retro Diffusion API — the best dedicated pixel art model. Use when the user says "generate pixel art", "make a sprite with AI", "use Retro Diffusion", "rdpk", or…
Game Designer
by @PlayableIntelligence
Game UI/UX designer that analyzes and improves the visual polish, atmosphere, and player experience of browser games. Use when a game needs visual improvements, better backgrounds, particles, animations, screen transitions,…
Game Architecture
by @PlayableIntelligence
Game architecture patterns and best practices for browser games. Use when designing game systems, planning architecture, structuring a game project, or making architectural decisions about game code.
Quick Game
by @PlayableIntelligence
Rapidly scaffold and implement a playable game — no assets, design, audio, deploy, or monetize. Get something on screen fast. Use when the user says "quick game", "fast prototype", "just get something playable", or wants a game…
Add Assets
by @PlayableIntelligence
Replace geometric shapes with pixel art sprites — recognizable characters, enemies, and items with optional animation. Use when the user says "add sprites", "replace the shapes with real art", "add pixel art", "make the…
Design Game
by @PlayableIntelligence
Audit and improve the visual design, polish, and player experience of an existing game. Use when the user says "make my game look better", "improve the design", "add polish", "add juice", "add particles", "fix the UI", or "make…
Game 3d Assets
by @PlayableIntelligence
3D asset engineer that finds, downloads, and integrates GLB/GLTF models into Three.js browser games. Use when a 3D game needs real models instead of primitive BoxGeometry/SphereGeometry shapes.
Architecture Diagram
by @Mathews-Tom
Generate architecture diagrams as fully editable SVG with native AWS, Azure, and GCP icons for cloud diagrams, or hand-drawn generic icons for everything else. Optionally deliver a self-contained editable draw.io mxGraph…
Concept To Video
by @Mathews-Tom
Turn concepts into animated explainer videos using Manim (Python) with MP4/GIF output, audio overlay, multi-scene composition. Triggers on: "create a video", "animate this", "make an explainer", "manim animation", "motion…
Chart Clarity
by @Mathews-Tom
Create, review, and restyle data visualizations using Edward Tufte principles: high data-ink ratio, direct labels, range-frame axes, small multiples, accessible color, responsive charts, and honest comparisons. Triggers on:…
Marp Slides
by @Mathews-Tom
Author MARP markdown slide decks exportable to PDF, PPTX, and HTML via marp-cli. Covers Marpit directives, custom CSS themes, SVG chart recipes, and dashboard components. Triggers on: "marp", "marp deck", "markdown slides",…
Md To Pdf
by @Mathews-Tom
Convert Markdown to styled PDFs with Mermaid diagrams, LaTeX/KaTeX math, tables, and code highlighting. Triggers on: "convert markdown to pdf", "make a pdf from this md", "export markdown as pdf", "pdf from markdown with…
Concept To Image
by @Mathews-Tom
Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG. Triggers on: "create an image of", "export as PNG", "save as SVG", "concept to image", "screenshot this HTML". NOT for interactive HTML, use…
Figure Rhetoric
by @Mathews-Tom
Evaluate whether figures and plots in a manuscript effectively communicate the claims they support. Audits chart-type fit, axis design, visual hierarchy, data density, caption interpretation, perceptual accuracy, and narrative…
React Component Generator
by @smallnest
Generate React components following best practices with TypeScript, Tailwind CSS, and Zustand state management. Use this skill when the user requests creating React components, UI elements, or mentions component generation.…
Feature Builder
by @smallnest
Build complete React features with proper layered architecture including UI components, business logic, API integration, and state management. Use this skill when users request implementing features like "user authentication",…
Ui Analyzer
by @smallnest
Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports and requests implementation. Provides detailed…
Request Analyzer
by @smallnest
Proactively analyze user requests at the start of conversations to determine task type, assess prompt quality, and intelligently recommend which skills to activate. Should activate for ALL user requests to ensure optimal…
Flutter Api
by @smallnest
Comprehensive Flutter API reference guide covering widgets, Material Design, Cupertino, animations, gestures, navigation, state management, and platform integration. Use when developing Flutter applications and needing detailed…
Flint Chart Author
by @jin-bo
从结构化、表格或查询结果生成数据图表：选择适合对比、趋势、分布、相关性或层级关系的图型， 生成、修复、解释或校验 Flint 图表规格，输出可直接渲染的 ```flint 围栏块。 Trigger on: "画图", "画个图", "可视化", "出个图表", "flint", "chart", "visualize", "plot this", "graph these numbers", "对比一下…（给出多行数据时）", "趋势", "分布",…
Pro Ppt
by @jin-bo
将用户的演示讲稿转化为「专业 · 高级感」风格的演示文稿图像（高端商务编辑风）。 视觉特征：极浅灰主色（#F2F2F2）、金属灰辅色、金色点缀、深蓝灰背景（#0F233B），整体克制、克莱因蓝调、印刷品级质感。 分三步：① 理解演讲内容与受众 ② 生成每页高级商务视觉提示词（Markdown 格式，保存到 workspace/docs/outline/） ③ 调用 image_gen_ppt.py 批量生成图像（保存到…
D3 Visualization Guide
by @wentorai
Guide to D3.js for building custom interactive data visualizations
Css Animation Creator
by @OneWave-AI
Create professional CSS animations, transitions, micro-interactions, and complex motion design. Use when adding animations, hover effects, loading states, page transitions, scroll animations, or any motion design work.
Color Palette Extractor
by @OneWave-AI
Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes…
Claude Design System Architect
by @OneWave-AI
Generate a complete, premium design system from a brand brief or an existing site — color tokens, type scale, spacing/radius/elevation, motion language, and component specs — exported as Tailwind config, CSS variables, and a…
Claude Design Critic
by @OneWave-AI
Audit a website or UI and de-AI it — find the patterns that make it look template-generated (in both design and copy) and return specific, prioritized fixes that push it toward editorial, premium, human-crafted. Reviews layout,…
Animate
by @OneWave-AI
Generate animated videos and motion graphics from natural language descriptions. Creates a standalone Vite + React project with Framer Motion scenes that auto-play in the browser. Use when the user wants to create animations,…
Athlete Social Media Manager
by @OneWave-AI
Create brand-safe content for athletes. Personal branding strategy, engagement optimization, crisis communication, sponsor integration.
Brand Consistency Checker
by @OneWave-AI
Scan documents and slides for off-brand colors, fonts, and logos. Validate against brand guidelines and suggest corrections.
Browser
by @Undertone0809
Control Rudder's built-in Browser through the separate run-scoped rudder-browser MCP, but invoke this skill only when the user explicitly mentions or selects Rudder's built-in Browser, Rudder Browser, or $browser. Use it then…
Visualize
by @Undertone0809
Create safe inline visual explanations in Rudder Chat. Use when asked for a chart, plot, diagram, timeline, comparison, static map, simulator, scenario view, or compact visual that materially improves understanding. Prefer…
Build Advisor
by @Undertone0809
Expert advisor for when a build, UI, workflow, spec, or implementation feels wrong but the user cannot yet express the right product, design, engineering, or evaluation critique. Use before more implementation to turn vague…
Design Deck
by @nicobailon
Present visual options for architecture, UI, and code decisions with high-fidelity side-by-side previews. For comparing approaches visually — code diffs, diagrams, UI mockups, images — not for gathering structured input (use…