Design Agent Skills

D3.js data visualization skill based on Edward Tufte principles. Selects the right chart type from 80+ options by analyzing the data question, then generates single-file HTML with D3 v7, dark theme, responsive layout, direct labels, and annotations.

Create programmatic videos with React. Official Remotion skill package — compose video sequences using React components, animate with spring physics, and render to MP4/GIF. Ideal for product demos, explainers, and data-driven videos.

The deepest design engineering skill in the ecosystem. 23 domain references, 18 slash commands, 3 style variants, and a standalone anti-slop CLI detector with 33 rules. Covers premium UI taste, component patterns, and opinionated design-engineering workflows.

Claude Code plugin for creating developer-focused technical presentations (tech talks, conference content) using Slidev with evidence-based design guardrails for slide quality. Adds opinionated constraints on top of raw Slidev for presentation polish.

55 production-ready PM skills organized around the Triple Diamond methodology: 26 phase skills (Discover through Iterate), 8 foundation skills (personas, OKRs, lean canvas), 6 utility meta-skills, and 15 Design Sprint and Foundation Sprint methodology skills. Templates, workflows, and sample outputs included.

Design search experiences that help users find, recover from failure, and refine. Query input, autocomplete, results, ranking, filtering, zero-results, and analytics.

Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns. Understands the local component registry and avoids common shadcn anti-patterns during implementation.

Design engine that teaches agents design judgment, not just data. Ships 69 brand-agnostic rules, 48 React components, 13 slash commands (/ss-tokens, /ss-component, /ss-audit, /ss-a11y, and more), and 60+ interchangeable brand skins (Toss, Stripe, Linear, Vercel, Notion, Raycast, Arc…). Tailwind v4 + Radix UI. Works with Claude Code and Cursor.

Create sophisticated data visualizations with D3.js: bar charts, line graphs, scatter plots, interactive visualizations with proper data binding, scales, axes, and animations. Handles real datasets with transformations and transitions.

Interactive design exploration environment: conducts design interviews, generates multiple UI variants, and refines designs through structured iterative feedback loops until the direction is confirmed.

Senior Product Manager agent with 30+ PM frameworks and SaaS metrics. Covers discovery, prioritization, roadmapping, stakeholder communication, and product analytics for B2B and consumer products.

Diagnose Apple HIG compliance issues with targeted guidance and fixes. 14 specialized skills covering HIG component categories — identifies non-compliant patterns and provides specific remediation steps.

Design fluency for frontend development. 1 skill with 23 slash commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.), curated anti-pattern detection CLI, and runtime node scripts. Covers UI design, redesign, critique, accessibility, motion, theming, typography, and component craft across websites, dashboards, and apps.

Ink-style visual design skill for Claude artifacts. Applies a distinctive editorial aesthetic — high contrast, strong typographic voice, restrained color — to artifact output from Google Labs.

GLSL shader development: ray marching, fluid simulation, particle systems, and procedural generation. Official MiniMax skill for creating real-time visual effects in WebGL and creative coding contexts.

Generate low-fidelity wireframes for UI layouts, user flows, and screen architecture. Focuses on structure and content hierarchy before visual design decisions are made.

Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS. Ensures UI work meets baseline quality standards before shipping.

Implement designs as production-ready HTML/CSS with pixel-level fidelity. Garry Tan's design-html skill — translates mockups, Figma specs, or design descriptions into clean, semantic, accessible HTML output.

Official Expo skills for working with Expo projects and Expo Application Services (EAS). Fine-tuned for Opus models by the Expo team. Covers the Expo SDK, EAS Build, EAS Submit, and Expo Router.

Connects to Figma API, discovers Community resources matching the project, extracts design tokens, and generates framework-specific code for 7 frameworks.

Official GSAP skills suite with 8 focused skills: core GSAP, Timeline, ScrollTrigger, plugins (Flip/Draggable/SplitText), utils, React (useGSAP hook), performance (60fps), and frameworks (Vue/Svelte/Nuxt). Works across Cursor, Claude Code, Copilot.

Generate structured PowerPoint presentations from content or outlines. Produces clean .pptx files with consistent slide layouts, proper hierarchy, and presenter-ready formatting.

"Write HTML. Render video." — 11 skills for composition authoring, TTS/transcription, CLI workflow, asset registry, URL capture, and GSAP/Anime.js/CSS/Lottie/Three.js/WAAPI animation. Built specifically for AI coding agents. Requires HeyGen account for media generation.

Marp presentation skill with 22 curated example decks, SVG charts, dashboard components, and dark/light themes. Teaches slide composition and visual quality patterns for Markdown-based presentations rendered with the Marp framework.

Open-source local-first alternative to Claude Design with 31 design skills (web prototypes, SaaS landing pages, dashboards, mobile onboarding, gamified apps, email, social carousels, poster design, motion frames, sprite animation) and 71 brand-grade design systems. Runs as a daemon plus web UI or desktop app.

Production pipeline for interactive and generative visual art using p5.js. Covers 2D/3D rendering, noise and particle systems, flow fields, GLSL shaders, pixel manipulation, kinetic typography, WebGL, and audio-reactive visuals. 10 reference files from NousResearch's Hermes agent.

High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density. Prevents generic AI UI slop through metric-based rules, strict component architecture, and premium design engineering directives.

Four-skill enforcement layer for design system compliance in Figma: ensures components are instances of master components, and colors/fonts/spacing/radii bind to Figma variables and styles. Every canvas write is auto-verified for token compliance.

286K words of color science applied to UI/UX design. Covers OKLCH/OKLAB color spaces, palette generation, accessibility contrast ratios, color naming, pigment mixing, and historical color theory. By meodai, creator of color-names.

Generate structured design briefs from loose requirements and product context. Turns vague ideas into actionable design specs: goals, constraints, audience, success metrics, and scope boundaries.

86 PM and product design skills from Lenny Rachitsky's framework. Covers user research, behavioral product design, designing surveys, conducting interviews, running design reviews, user onboarding, growth loops, design systems, and writing specs. 945 stars.

Detects regressions in security, performance, correctness, and architecture across React codebases using score-based quality checks. Surfaces issues with severity ratings and actionable remediation steps for each finding.

Official Slidev skill from the Slidev team — helps agents understand and generate developer-focused technical presentations using Slidev's Markdown format with Vue components, code highlighting, and animations.

Emil Kowalski-inspired animation patterns for Next.js/React with 8 working examples: hover effects, toast notifications, text reveals, and modals. Emphasises motion that feels inevitable and purposeful.

18 go-to-market agent skills that turn a coding agent into a GTM operator: positioning + ICP, AI pricing, sales-motion design, cold outreach, AI SDR, lead enrichment, multi-platform and Product Hunt launches, programmatic SEO, paid creative, retention/expansion, partner programs, and GTM metrics/attribution.

Two-mode plugin: CHECKER audits designs across seven categories (purpose, typography, proportions, composition, visual hierarchy, color, SEO); APPLIER guides six-phase creation from foundation through technical implementation.

Deeply researches a codebase, designs a feature through iterative brainstorming and annotation cycles, then decomposes it into an implementable issue hierarchy (parent + sub-issues with dependencies) on GitHub or GitLab. Hard gates between phases ensure research happens before design, and design is complete before implementation. Each sub-issue is scoped to require zero creative decisions.

2 official fal.ai skills: image/video generation using fal.ai AI models, and 3D model generation from text or images. Requires a fal.ai API key.

HTML-native design skill producing magazine-grade typography, precise CSS Grid, animated prototypes with 20 design philosophies, 5-dimension self-review, and MP4 export. Agent-agnostic and works without external component libraries.

Scores and rewrites text to remove AI writing patterns. Rates content across 7 dimensions — AI vocabulary, content inflation, grammar patterns, UX copy quality, structural tells, punctuation, and meta-content — each on a 1–10 scale. Works with raw text, Figma URLs, and UI screenshots. Based on Wikipedia's Signs of AI Writing field guide.

AI-powered PowerPoint generation with document analysis and styled image generation. Analyzes input documents, structures content into slides, and generates matching visual assets. Requires API credentials for image generation features.

9 official OpenAI skills: 6 Figma design skills (mirroring the Figma official suite), frontend design for landing pages and apps, PowerPoint slide creation with PptxGenJS, and image generation using the OpenAI Image API.

50+ design styles, 97 color palettes, and 9 technology stack templates (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Installs as a Claude plugin via .claude-plugin format.

19-skill plugin suite covering cognitive psychology UX, Nielsen heuristics, UX research methods, interaction/motion design, accessibility/inclusive design, mobile UX, desktop app design, cross-cultural i18n UX, agentic AI/generative UX, ambient/zero UI, and spatial/voice UX. 310K+ words incorporating iOS 26 Liquid Glass and WCAG 3.0.

4 official Vercel skills for web design guidelines, component building, React performance, and composition patterns. Enforces 100+ Web Interface Guidelines and accessible, composable component APIs.

Turns WCAG 2.2 into practical guidance for web design, frontend implementation, content review, accessibility QA, remediation planning, and conformance documentation. Different focus from wcag-audit-patterns — covers the full WCAG guidance workflow from design through documentation.

Data visualization engineer agent using D3.js, Chart.js, Matplotlib, and Plotly. Applies Cleveland-McGill perceptual hierarchy, WCAG AA contrast, and colorblind-safe palettes. Selects the right chart type for the data relationship.

Audits designs across 19 professional categories including typography, color/contrast, spacing, visual hierarchy, consistency, WCAG, forms, motion, dark mode, responsive, loading/empty/error states, microcopy, i18n/RTL, elevation, iconography, navigation, design tokens, ethical design/dark patterns, and Nielsen heuristics. Scores 0-100 with severity-ranked issues.

Generates professional Reveal.js presentations with themed designs, multi-column layouts, Chart.js data visualization, speaker notes, staggered animations, and PDF export. No build step required — outputs standalone HTML files.

Three.js combined with Entity Component Systems (ECS) and TypeScript, adding structured game and interactive architecture patterns on top of Three.js rendering for complex interactive scenes with many independent objects.

Create generative art using p5.js with seeded randomness, flow fields, and particle systems. Official Anthropic skill for procedural visual art generation in Claude artifacts.

Fetches exact design tokens (colors, type weights, letter-spacing) for 62 world-class brands including Stripe, Linear, Apple, Figma, Notion, and Nike at runtime, then applies them to your project.

Three.js skills for creating interactive 3D elements and experiences on the web. Covers scene setup, geometries, materials, lighting, cameras, animations, and WebGL rendering best practices.

91 skills, 9 plugins, and 28 commands across a comprehensive designer toolkit: design-research (12 skills), design-systems (11), ux-strategy (11), ui-design (14), interaction-design (15), prototyping-testing (8), design-ops (9), designer-toolkit (7), and visual-critique (4). Built by Marie Claire Dean.

Generates cross-client HTML email from MJML 4.x — Outlook 2013-365 safe, Gmail-optimized, WCAG 2.1 AA accessible. Triggers automatically when asked to create, compile, or troubleshoot HTML email.

Domain navigator for Figma, design-to-code, design tokens, and official platform skill suites. Routes to the right skill for working between design tools and code, managing design systems, or using official platform skills (Anthropic, Vercel, Expo, Software Mansion, Callstack).

8 aesthetic anchors (Brutalist, Nordic, Cyberpunk, Vaporwave, Organic, Luxury, Editorial, Industrial), each locking palette, typography, and texture to specific CSS tokens. Pick one per brief and the skill generates matching code.

Create animation-rich HTML presentations from scratch or convert PPT/PPTX into polished web slides. Produces self-contained HTML files with smooth transitions, custom layouts, and presenter-friendly controls.

Generates wireframes from natural language descriptions, outputting machine-readable JSON (.wireframe.json) and interactive HTML with drag-and-drop reordering and undo/redo. Requires only Python 3 and a browser — no design tool accounts needed.

Design skills derived from seminal books including Refactoring UI, The Design of Everyday Things, Inspired (Marty Cagan), JTBD, Hook Model, Design Sprint, and Lean UX. Available as individual skills (refactoring-ui, design-everyday-things, microinteractions, lean-ux, design-sprint).