podo
UserDesign Skills for Agents
Categories
Indexed Skills (50)
addyosmani-quality
6 web quality skills from Google Chrome's Addy Osmani: accessibility (WCAG), web quality audit (Lighthouse-style), Core Web Vitals (LCP/INP/CLS), performance, SEO, and security best practices.
ai-graphic-design-skill
Maps 15 AI tools to design scenarios — Midjourney for ideation, Stable Diffusion for production, ControlNet for composition control, vectorization pipelines, and mockup generation. Includes a 2025-2026 AI Creative Director competency roadmap.
assimovt-productskills
16 focused product-management skills spanning the full lifecycle: discovery (user interviews, problem validation, JTBD, research synthesis), strategy (competitor analysis, positioning, strategy docs), prioritization (RICE, Shape Up scope-cutting and bet-sizing), evidence-first PRDs, plus launch plans, North Star metrics frameworks, A/B experiment design, and Now/Next/Later roadmaps.
brand-design-md
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.
claude-wireframe-skill
Generates 5 UX design approaches as interactive prototypes — 1 safe design-system extension and 4 exploratory variants — starting as B&W wireframes then producing color variants via parallel agents. Scans codebase on first run to build persistent design context.
content-catalogue
Domain navigator for presentations, diagrams, wireframes, data visualization, design review, product strategy, copywriting, UX writing, content design, and design research skills. Routes to the right skill for slides, charts, UX strategy, PM frameworks, email, microcopy, product copy, user research, and design sprints.
copywriting-skill
Copywriting toolkit for product and web — persuasion-driven copy for landing pages, feature pages, pricing pages, email sequences, and CTAs. Ships 5 skills: core copywriting, SEO copywriting, social copywriting (LinkedIn + X), French- native copy, and a tone-of-voice generator. Built-in anti-AI-pattern layer. Works with Claude Code, Cursor, and Windsurf.
css-animation-skill
Four-phase workflow — scrapes your live app's design language, interviews you about what to animate, produces a brief and self-contained HTML/CSS animation file, then iterates. Requires Claude-in-Chrome MCP for live scraping.
deanpeters-pm-skills
9 product management skills using canonical frameworks: NNGroup customer journey maps, Lean UX Canvas, Teresa Torres opportunity-solution trees, proto-personas, 6-frame storyboards, user stories with acceptance criteria, user story mapping, full discovery cycle, and structured PRD process.
design-auditor
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.
design-catalogue
Catalogue navigator for design-agent-skills. Lists available design skill stubs, matches user intent to the right stub, and routes to install and invoke. Use when the user wants to browse or find the right design skill.
design-engineering-catalogue
Domain navigator for UI craft, visual design, brand, color, typography, mobile design, and interactive design engineering skills. Routes to skills for taste-driven UI, platform design (iOS/Android), components, color science, and the full visual design stack.
accessibility-agents
Twenty-five specialist accessibility agents enforcing WCAG 2.2 AA compliance: nine web code specialists, six document accessibility specialists (Office/PDF), and markdown auditors. Each agent focuses on a specific accessibility domain.
accessibility-catalogue
Domain navigator for accessibility, WCAG compliance, performance auditing, and code quality skills. Routes to the right skill for a11y remediation, WCAG 2.2 audits, Core Web Vitals, React quality, and motion performance.
algorithmic-art
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.
animate-css-skill
Adds Animate.css (v4.1.1) animations to HTML, React/JSX, and WordPress PHP templates. Includes scroll-trigger via Intersection Observer, RTL directional flipping, and prefers-reduced-motion compliance.
animate-skill
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.
anthropics-skills
6 official Anthropic skills for frontend design, artifact creation, and presentation. Covers UI/UX development tools, complex HTML artifacts, visual art in PNG/PDF, professional theme application, brand guidelines, and PowerPoint creation.
antvis-chart-skills
7 professional chart and visualization skills powered by Ant Group's AntV ecosystem. 26+ chart types, 98.2% accuracy on test cases. Covers charts, infographics, graphs, tables, icons, and narrative reports.
apple-hig-skills
Apple Human Interface Guidelines as 14 agent skills covering iOS, macOS, visionOS, watchOS, and tvOS. From raintree-technology, makers of the Apple HIG compliance website.
awesome-design-skills
Registry of 67 visual aesthetic and style skills for Claude Code, Cursor, Codex, and other agents. Each skill ships as SKILL.md + DESIGN.md covering tokens, components, accessibility, tone, and quality gates for a specific design aesthetic — glassmorphism, brutalism, claymorphism, neumorphism, editorial, bento, retro, riso, and 59 more. Distributed via the TypeUI CLI.
baseline-ui
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.
bencium-ux-designer
Produces distinctive, production-grade frontend interfaces with high design quality and a strong point of view. Actively avoids generic AI-generated aesthetics in favour of considered, original UI decisions.
callstack-agent-skills
Official Callstack React Native skills covering best practices (profiling, FPS, re-renders, Turbo Modules), GitHub PR workflows, GitHub Actions build artifacts, React Native upgrading templates, and brownfield migration strategy.
cc-slidev
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.
chadboyda-gtm
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.
claud3
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.
claude-pm-skills
Production-grade skills for product thinking, discovery, prioritization, and launch decisions. Covers the full PM lifecycle with a different author and focus than other PM skill packages in the catalogue.
claude2figma
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.
claudedesignskills
22-skill package across 5 bundles covering Three.js, GSAP ScrollTrigger, React Three Fiber, Framer Motion, Babylon.js, A-Frame, PixiJS, Locomotive Scroll, Barba.js, React Spring, Magic UI, AOS, Anime.js, Lottie, Rive, Spline, and Blender pipeline. The broadest motion/creative suite available.
cloudai-threejs
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.
cloudflare-web-perf
Audit Core Web Vitals and render-blocking resources. Official Cloudflare skill for identifying and fixing LCP, INP, CLS, TTFB issues with Cloudflare-specific optimization strategies.
color-expert
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.
composio-artifacts
Build interactive Claude artifacts with Composio tools. Connects artifacts to real external services (GitHub, Slack, Linear, Notion) via Composio's 250+ tool integrations. Requires a Composio account and API key.
content-strategy
Define what content a product needs, how it is structured, and who owns it. Content audit, content model, voice and tone, governance, and content hierarchy.
coreyhaines-marketing
3 CRO (conversion rate optimization) skills by Corey Haines: optimize post-signup onboarding and activation, improve conversion rates on marketing pages, and optimize signup and trial activation flows.
creative-director
Senior Creative Director skill with 20+ ideation methodologies (SIT, TRIZ, SCAMPER, Bisociation, Synectics) and a 3-axis evaluation framework calibrated against Cannes Lions, D&AD, and HumanKind award standards.
d3js-skill
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.
dark-pattern-audit
Audits codebases and product copy for deceptive dark patterns inferable from local source code and text — no runtime inspection or screenshots needed. Produces a structured narrative report with confidence grading, source locations, concise reasoning, and official pattern reference links for each detected pattern. Covers pricing, subscriptions, consent, modals, preselected controls, misleading CTAs, and more.
data-analysis-skill
Multi-expert parallel analysis workflow that selects 3-5 domain expert subagents to analyze datasets in parallel, synthesizes findings into interactive HTML reports with charts, and exports to PowerPoint one-click. Requires Python packages: pandas, openpyxl, tabulate, chardet.
data-viz-agent
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.
design-brief
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.
design-consultation
Build a complete design system from scratch. Garry Tan's design consultation skill: systematic approach to establishing visual language, component library, spacing scale, and design tokens from first principles.
design-debt-audit
Identify, categorize, and prioritize accumulated design inconsistencies and structural problems. Debt taxonomy, audit process, Severity×Frequency/Effort scoring, debt register.
design-for-ai
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.
design-html
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.
design-impact-reporting
Communicate design’s contribution to user and business outcomes in stakeholder terms. Metrics framework, scorecard / before-after / A-B / portfolio report formats.
design-lab
Interactive design exploration environment: conducts design interviews, generates multiple UI variants, and refines designs through structured iterative feedback loops until the direction is confirmed.
design-motion-principles
Motion and interaction design expert with two modes — build interactive components with purposeful motion, or audit existing animations for AI-slop patterns. Audit emits a branded HTML report with looping CSS demos per finding. Based on Emil Kowalski (restraint), Jakub Krehel (production polish), and Jhey Tompkins (creative experimentation) — lenses weighted to project context. Works with React, Framer Motion, CSS, and HTML.
design-negotiation
Advocate for design quality, scope, and time with cross-functional partners using evidence and shared goals — not taste or authority.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.