Updated 1w ago
by podo
design-agent-skills
Design Skills for Agents
32 GitHub stars (32)
+12 in 30 days
| Period | New stars |
|---|---|
| Oct 1 | 0 |
| Oct 2 | +4 |
| Oct 3 | +4 |
| Oct 4 | +1 |
| Oct 5 | 0 |
| Oct 6 | 0 |
| Oct 7 | +1 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | 0 |
| Oct 11 | +1 |
| Oct 12 | 0 |
| Oct 13 | 0 |
| Oct 14 | 0 |
| Oct 15 | +1 |
| Oct 16 | +2 |
| Oct 17 | 0 |
| Oct 18 | 0 |
| Oct 19 | 0 |
| Oct 20 | +1 |
| Oct 21 | 0 |
| Oct 22 | +1 |
| Oct 23 | 0 |
| Oct 24 | +1 |
| Oct 25 | 0 |
| Oct 26 | 0 |
| Oct 27 | 0 |
| Oct 28 | +1 |
| Oct 29 | +1 |
| Oct 30 | 0 |
| Oct 31 | 0 |
| Nov 1 | +1 |
| Nov 2 | 0 |
| Nov 3 | 0 |
| Nov 4 | 0 |
| Nov 5 | +1 |
| Nov 6 | +1 |
- 30 skills (30 skills found in its SKILL.md files)
- 4 forks (4 forks)
- 1w ago last update (Last updated 1w ago)
Install
Skills CLI
npx skills add podo/design-agent-skills
Asks which skills and agents to install. Just one: npx skills add podo/design-agent-skills --skill accessibility-agents — add -g for every project.
Claude Code
git clone https://github.com/podo/design-agent-skillscp -r "design-agent-skills/skills/accessibility-agents" ~/.claude/skills/
Copies the accessibility-agents skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add podo/design-agent-skills
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md — showing the first 30 of 170 files.
-
accessibility-agents
WCAG 2.2 AA enforcement as a package of Agent Skills: router skills for web UI, full-site audits, Office/PDF/ePub documents, markdown, desktop and Python tooling, and GitHub workflows dispatch specialist, helper and reference skills by name.
skills/accessibility-agents/ on GitHub (opens in a new tab)SKILL.md -
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.
skills/accessibility-catalogue/ on GitHub (opens in a new tab)SKILL.md -
addyosmani-quality
Web quality skills from Google Chrome's Addy Osmani: a measurement-first web quality audit (Lighthouse-style), accessibility (WCAG 2.2), Core Web Vitals (LCP/INP/CLS), performance, SEO, and security/modern-web best practices.
skills/addyosmani-quality/ on GitHub (opens in a new tab)SKILL.md -
ai-graphic-design-skill
Guide for creating logos, brand identities, and visual assets with AI tools: which tool fits which scenario (Recraft, Midjourney, Firefly, DALL-E, Stable Diffusion), prompt engineering per tool, vectorization pipelines, mockups, Python automation, and IP safety. The skill text is in Portuguese.
skills/ai-graphic-design-skill/ on GitHub (opens in a new tab)SKILL.md -
algorithmic-art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems. Official Anthropic skill: it writes an "algorithmic philosophy" first, then expresses it as an interactive p5.js viewer.
skills/algorithmic-art/ on GitHub (opens in a new tab)SKILL.md -
anatomy
Build carefully crafted, interactive isometric SVG figures that explain a technical idea as a real physical object — a machine whose moving parts are the concept — framed in a card with a title, hint and live readout. Use for isometric illustrations, explanatory figures for docs or blog posts, and interactive explainers of how a system, algorithm or component works. Optionally adds WebGL shaders,…
skills/anatomy/ on GitHub (opens in a new tab)SKILL.md -
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. Bundles the Animate.css library, so no CDN is needed.
skills/animate-css-skill/ on GitHub (opens in a new tab)SKILL.md -
animate-skill
Emil Kowalski-inspired animation patterns for Next.js/React: easing and timing rules, CSS transitions and Framer Motion recipes, with working examples for hover effects, toast notifications, text reveals, and modals. Emphasises motion that feels inevitable and purposeful.
skills/animate-skill/ on GitHub (opens in a new tab)SKILL.md -
anthropics-skills
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, Anthropic brand guidelines, and PowerPoint creation.
skills/anthropics-skills/ on GitHub (opens in a new tab)SKILL.md -
antvis-chart-skills
Chart and visualization skills from Ant Group's AntV ecosystem: chart images, G2 chart code, G6 graphs, X6 diagram editors, infographics, GPT-Vis charts, icon search, and narrative text visualization (T8).
skills/antvis-chart-skills/ on GitHub (opens in a new tab)SKILL.md -
apple-hig-skills
Apple Human Interface Guidelines as agent skills covering iOS, macOS, visionOS, watchOS, and tvOS. From raintree-technology, makers of the Apple HIG compliance website.
skills/apple-hig-skills/ on GitHub (opens in a new tab)SKILL.md -
assimovt-productskills
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.
skills/assimovt-productskills/ on GitHub (opens in a new tab)SKILL.md -
awesome-design-skills
Registry of visual aesthetic and style skills for Claude Code, Cursor, Codex, and other agents. Each style is its own skill shipping SKILL.md + DESIGN.md (tokens, components, accessibility, tone, quality gates) for an aesthetic such as glassmorphism, brutalism, claymorphism, neumorphism, editorial, bento, retro, or riso. The catalogue installs a few popular styles; any other style can be added by…
skills/awesome-design-skills/ on GitHub (opens in a new tab)SKILL.md -
baseline-ui
Opinionated UI baseline that deslops AI-generated interfaces: fixes spacing, hierarchy, typography, and small layout issues, and enforces Tailwind CSS, component, interaction, and animation rules. Use as a fast cleanup or polish pass.
skills/baseline-ui/ on GitHub (opens in a new tab)SKILL.md -
bencium-ux-designer
Develops an original visual language and turns the human-chosen direction into production artifacts. Starts with ten independent, typography-led HTML directions, asks the human to judge them visually and commit to one, then builds the brand, web, or product system from it. Aimed at escaping generic AI and Big Tech aesthetics.
skills/bencium-ux-designer/ on GitHub (opens in a new tab)SKILL.md -
brand-design-md
Looks up the design spec (a DESIGN.md of colors, type weights, letter-spacing, radii, shadows) for well-known brands such as Stripe, Linear, Apple, Figma, Notion and Nike from getdesign.md at runtime, then applies it to your project. The installed skill is written in Chinese but accepts English brand names.
skills/brand-design-md/ on GitHub (opens in a new tab)SKILL.md -
building-components
Vercel's guide for building modern, accessible, and composable UI components: accessibility, composable APIs, design tokens, publishing to npm or a registry, and writing component docs. From the components.build project.
skills/building-components/ on GitHub (opens in a new tab)SKILL.md -
callstack-agent-skills
Official Callstack React Native skills covering best practices (profiling, FPS, re-renders, native modules), React Navigation, TV apps, library creation, GitHub Actions build artifacts, React Native upgrades, and brownfield migration.
skills/callstack-agent-skills/ on GitHub (opens in a new tab)SKILL.md -
cc-slidev
Claude Code plugin and skills for creating developer-focused technical presentations (tech talks, conference content) with Slidev, with evidence-based design guardrails for slide quality. Adds opinionated constraints on top of raw Slidev for presentation polish.
skills/cc-slidev/ on GitHub (opens in a new tab)SKILL.md -
chadboyda-gtm
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.
skills/chadboyda-gtm/ on GitHub (opens in a new tab)SKILL.md -
claud3
D3.js data visualization skill based on Edward Tufte principles. Selects the right chart type from a large catalogue by analyzing the data question, then generates single-file HTML with D3 v7, dark theme, responsive layout, direct labels, and annotations.
skills/claud3/ on GitHub (opens in a new tab)SKILL.md -
claude-pm-skills
Product-management decision skills for solo founders and startup PMs: problem clarity, outcome definition, assumption mapping, prioritization, experiment design, PRD critique, launch readiness, and post-launch learning. Focused on deciding what is worth building rather than writing documents faster.
skills/claude-pm-skills/ on GitHub (opens in a new tab)SKILL.md -
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.
skills/claude-wireframe-skill/ on GitHub (opens in a new tab)SKILL.md -
claude2figma
Skill set that enforces design system compliance when Claude writes to Figma through the Figma MCP server: components are instances of master components, and colors/fonts/spacing/radii bind to Figma variables and styles instead of raw values. Every canvas write is followed by a binding check. Needs a Figma file with a design system and the Figma MCP server.
skills/claude2figma/ on GitHub (opens in a new tab)SKILL.md -
claudedesignskills
Motion and creative-coding skill package 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 a Blender-to-web pipeline. One of the broadest motion/creative suites available.
skills/claudedesignskills/ on GitHub (opens in a new tab)SKILL.md -
cloudai-threejs
Three.js skills for creating interactive 3D elements and experiences on the web. Covers scene setup, geometries, materials, lighting, textures, animation, loaders, custom shaders, post-processing, interaction, performance, and React Three Fiber, with WebGL and WebGPU/TSL guidance for a current three.js release.
skills/cloudai-threejs/ on GitHub (opens in a new tab)SKILL.md -
cloudflare-web-perf
Audit Core Web Vitals and render-blocking resources. Official skill published by Cloudflare for diagnosing and fixing LCP, INP, CLS and Lighthouse performance issues, driven by Chrome DevTools performance traces.
skills/cloudflare-web-perf/ on GitHub (opens in a new tab)SKILL.md -
color-expert
A large color-science knowledge base 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.
skills/color-expert/ on GitHub (opens in a new tab)SKILL.md -
composio-artifacts
Build elaborate multi-component claude.ai HTML artifacts with React, TypeScript, Vite, Tailwind CSS, and shadcn/ui, then bundle them into a single HTML file. This is the artifacts-builder skill from ComposioHQ's awesome-claude-skills collection, a copy of Anthropic's web-artifacts-builder. It does not integrate Composio tools.
skills/composio-artifacts/ on GitHub (opens in a new tab)SKILL.md -
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.
skills/content-catalogue/ on GitHub (opens in a new tab)SKILL.md
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.