Design & frontend skills for AI agents

Design & frontend

16,188 rows from 2,679 repositories

What the user actually looks at, and the code that draws it.

What Design & frontend skills agree on

1,697 skill files read, by 1,179 of the 2,086 authors on this shelf whose files we hold, 2026-09-06

The middle one of the 230 measured here is ~1.6k tokens long, counted with cl100k_base

Counted by distinct author, so one author publishing three of these counts once. Where a claim sits in fewer files than authors, that is said: a claim held by forty authors across three files is one file people copied, not forty people who agreed. Near-identical wordings are grouped and the other wordings are shown, so the grouping is yours to check.

What they tell the agent to do

Commit to a bold aesthetic direction31 of 1179 in 24 filesalso worded as Commit to a bold aesthetic direction before coding; commit to one specific aesthetic direction
Prefer component composition over inheritance28 of 1179 in 14 filesalso worded as Prefer component composition over configuration; prefer composition over inheritance
Animate only transform and opacity properties27 of 1179 in 22 filesalso worded as Use only transform and opacity for animations; use transform and opacity for animations
Memoize expensive computations with useMemo26 of 1179 in 13 filesalso worded as Memoize expensive computations and callbacks; Memoize expensive computations
Use semantic HTML elements24 of 1179 in 23 filesalso worded as Use semantic HTML elements for all components; use semantic HTML for all components
Virtualize long lists for performance21 of 1179 in 10 filesalso worded as virtualize long lists; Virtualize long lists for performance optimization
Use CSS variables for design tokens20 of 1179 in 14 filesalso worded as Use CSS variables for all color tokens; use design system tokens as css variables in prototypes
Implement loading, empty, and error states20 of 1179also worded as Design all states including empty, error, and loading; Include empty, loading, error, and success states
Lazy load heavy components with Suspense19 of 1179 in 8 filesalso worded as Lazy load heavy components
Respect prefers-reduced-motion media queries18 of 1179 in 10 filesalso worded as Respect prefers-reduced-motion media query
Prioritize CSS-only animations for HTML18 of 1179 in 16 filesalso worded as prioritize CSS-only animations for HTML elements; prioritize CSS-only solutions for animations
Use compound components for related UI elements18 of 1179 in 7 filesalso worded as use compound components for related elements; Implement compound components for related elements
Implement render props for data fetching18 of 1179 in 7 filesalso worded as Implement render props for flexible data fetching; Use render props for data fetching components
Use semantic color tokens18 of 1179 in 13 filesalso worded as Use semantic color tokens instead of raw hex values; use semantic tokens for colors
Ensure touch targets are at least 44x44px18 of 1179also worded as Ensure 44x44px minimum touch targets; Ensure 44x44 pt minimum for touch targets

What they tell it not to do

Do not use generic AI-generated aesthetics29 of 1179 in 23 filesalso worded as avoid generic AI aesthetic patterns; Do not use generic AI aesthetic patterns
Do not rely solely on color to convey information24 of 1179 in 21 filesalso worded as Do not convey information by color alone; do not rely on color alone to convey meaning
Do not animate layout properties22 of 1179 in 19 filesalso worded as Never animate top, left, width, or height properties; Do not animate layout-triggering properties like top or width
Do not use pure black or pure white21 of 1179 in 19 filesalso worded as Never use pure black; do not use pure black
Do not use inline styles20 of 1179 in 14 filesalso worded as Do not use inline styles on every render; Do not use inline style tags
Do not use arbitrary pixel values19 of 1179 in 16 filesalso worded as Do not use arbitrary spacing values; Do not use arbitrary pixel values for spacing
Do not use Inter font19 of 1179 in 17 filesalso worded as Do not use standard fonts like Inter or Roboto; never use Inter, Roboto, or system fonts
Do not use emoji icons19 of 1179also worded as Do not use emojis; Do not use emojis as UI icons
Do not use gradient text18 of 1179also worded as do not use gradient text for impact; Do not use heading gradient text
Do not write code18 of 1179also worded as Do not write implementation code; do not write production code

What they expect to be installed

React91 of 1179 in 72 files
git82 of 1179
grep75 of 1179
Playwright70 of 1179
CSS55 of 1179 in 49 files
python354 of 1179 in 51 files
bash47 of 1179
npm45 of 1179 in 44 files
python45 of 1179 in 37 files
Next.js43 of 1179 in 30 files

What they ask it to produce

DESIGN.md56 of 1179also worded as DESIGN.md file; DESIGN-SYSTEM.md
UI components41 of 1179 in 32 filesalso worded as animated UI components; 3D UI components
Screenshots40 of 1179 in 38 filesalso worded as browser screenshots; screenshot
Production-grade frontend code34 of 1179 in 25 filesalso worded as production-grade functional code; production-grade functional frontend code
React components29 of 1179 in 18 filesalso worded as React Native components; Feature-based React components
Custom hooks23 of 1179 in 11 files
Self-contained HTML file22 of 1179also worded as Self-contained HTML files; single self-contained HTML file
Design tokens18 of 1179 in 16 filesalso worded as design system tokens; Design token plan

When Design & frontend authors say to reach for one

The situations these authors wrote into their own files, counted out of the same 1,179 authors, with the skills that name each one

User wants to explore UI design24 of 1179 in 15 files
- Prototype
- Pdlc ui design
- Skill prototype
- and 16 more on this shelf
User asks to build web components22 of 1179 in 20 files
Implementing responsive layouts20 of 1179 in 15 files
- Frontend ui engineering
- Pretext
- Mobile development
- and 1 more on this shelf
User asks for design critique20 of 1179
- Design critique
- Design review
Building new UI components or pages19 of 1179 in 15 files
- Ui ux pro max
- Web design guidelines
- Frontend ui engineering
- Frontend designer
- and 1 more on this shelf
User requests architecture design19 of 1179 in 18 files
- Design first
- Figma design fetch
- Ui review
- and 1 more on this shelf
Managing application state18 of 1179 in 7 files
- Frontend patterns
- and 8 more on this shelf
Building React components17 of 1179 in 7 files
- Frontend patterns
- and 8 more on this shelf

How Design & frontend skills are built

14,664 skill directories by 2,367 authors, read from their repositories’ own file trees 2026-08-05

The middle bundle among those shipping files is 3 files, 18.3 KB beside SKILL.md

Counted by distinct author, same as above, so one author publishing forty template copies counts once. SKILL.md itself is not counted as a file, so a single-file skill is one where that file is the whole skill.

The shape

SKILL.md is the whole skill669 of 2,367 authors, 7,143 of 14,664 skills
files ship beside it1,698 of 2,367 authors, 7,521 of 14,664 skills
executable scripts ship inside647 of 2,367 authors, 1,661 of 14,664 skills

The folders they converge on

references/1,141 of 2,367 authors, 3,662 of 14,664 skills
scripts/544 of 2,367 authors, 1,423 of 14,664 skills
agents/378 of 2,367 authors, 1,042 of 14,664 skills
assets/288 of 2,367 authors, 611 of 14,664 skills
examples/199 of 2,367 authors, 461 of 14,664 skills
templates/178 of 2,367 authors, 319 of 14,664 skills

Api and interface design
addyosmani/agent-skills/skills/api-and-interface-design Skill
85,040★ repo
Production-grade engineering skills for AI coding agents.
Artifacts builder
ComposioHQ/awesome-claude-skills/artifacts-builder Skill
no license72,074★ repo
A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows
Screen reader testing
wshobson/agents/plugins/accessibility-compliance/skills/screen-reader-testing Skill
38,701★ repo
Multi-harness agentic plugin marketplace for Claude Code, Codex CLI, Cursor, OpenCode, GitHub Copilot, and Gemini CLI
Frontend forge fe operations
kubesphere/kubesphere/skills/frontend-forge-fe-operations Skill
no license17,025★ repo
The container platform tailored for Kubernetes multi-cloud, datacenter, and edge management ⎈ 🖥 ☁️
Theme generator
htmlstreamofficial/preline/skills/theme-generator Skill
no license6,380★ repo
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
Antfu design
antfu/skills/skills/antfu-design Skill
5,740★ repo
Anthony Fu's curated collection of agent skills.
Video shotcraft
Vincentwei1021/video-shotcraft Skill
4,130★
AI video skill for Claude Code & Codex — cinematic product videos with Remotion: 106 shot recipe cards, 161 motion previews, a production-ready template
Playwright skill
lackeyjb/playwright-skill/skills/playwright-skill Skill
3,026★ repo
Claude Code Skill for browser automation with Playwright. Model-invoked - Claude autonomously writes and executes custom automation for testing and validation.
Accessibility
addyosmani/web-quality-skills/skills/accessibility Skill
2,628★ repo
Agent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.
Artifacts builder
composio-community/awesome-claude-plugins/artifacts-builder/skills/artifacts-builder Skill
no license1,884★ repo
A curated list of Plugins that let you extend Claude Code with custom commands, agents, hooks, and MCP servers through the plugin system.
Typeui
bergside/typeui/plugins/grok/typeui/skills/typeui Skill
no license1,735★ repo
Build better UI with AI
Impeccable
silverstein/minutes/.agents/skills/impeccable Skill
1,426★ repo
Every meeting, every idea, every voice note — searchable by your AI. Open-source, privacy-first conversation memory layer.
Better codex
noobnooc/agent/skills/better-codex Skill
no license1,374★ repo
My profile & the agent skills I created
Design dna
zanwei/design-dna Skill
1,329★
Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.
Agent team design
agentlas-ai/Agentlas-OS/skills/agent-team-design Skill
1,154★ repo
Agent OS: keep specialist agents in a hub, spin up a temporary orchestrator per task. Local-first, works with any model.
Design award match
SeanJ1ang/design-judge-skills/skills/design-award-match Skill
1,007★ repo
Evidence-driven Agent Skills for design award research, evaluation, award matching, entry writing, and submission readiness.
Asc app create ui
rorkai/app-store-connect-cli-skills/skills/asc-app-create-ui Skill
965★ repo
Skills to automate app store deployed and everything related to it using the asc cli
Motion design
LottieFiles/motion-design-skill/skills/motion-design Skill
925★ repo
Universal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI
Ss a11y
bitjaru/styleseed/engine/.claude/skills/ss-a11y Skill
886★ repo
Open-source design-method engine for Claude Code, Codex & Cursor. Gives coding agents fixed design judgment—not one fixed aesthetic—then selects or derives the right grammar from references, locks project decisions, and verifies UI, carousels, decks & docs. 20 skills · MIT.
Check accessibility
AgnosticUI/agnosticui/.claude/skills/check-accessibility Skill
823★ repo
AgnosticUI Local (v2) is a CLI-based UI component library that copies components directly into your project. Works with AI tools, agent-driven UIs, and prompt-ready workflows.
Game art direction
worldwonderer/novel-to-game/skills/game-art-direction Skill
631★ repo
将任何小说蒸馏为可玩的游戏 · Turn any novel into a playable game — a 7-skill adaptation pipeline for Claude Code, Codex & Kimi Code(k3)
Artifacts builder
ECNU-ICALK/AutoSkill/SkillBank/Common/AwesomeClaudeSkills/artifacts-builder Skill
no license551★ repo
AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution
Accessibility audit
rampstackco/claude-skills/dist/pi/.agents/skills/accessibility-audit Skill
531★ repo
Stack-agnostic Claude Skills covering the full website lifecycle: brand, design, content, SEO, dev, ops, growth, and research. Build, ship, audit, optimize.
Accessibility patterns
vibeeval/vibecosystem/skills/accessibility-patterns Skill
526★ repo
AI software team for Claude Code - 138 agents, 295 skills, 73 hooks. Self-learning, multi-agent swarm, autonomous skill evolution.
Editorial card screenshot
shaom/infocard-skills/skills/editorial-card-screenshot Skill
501★ repo
Open-source agent skills for generating editorial-style information cards from natural-language input.
A11y audit
plugin87/ux-ui-agent-skills/.claude/skills/a11y-audit Skill
no license493★ repo
Turn Claude into a Senior Design Architect — DTCG design tokens, 42 components, WCAG 2.2 accessibility, any-framework code, 138 design systems, and runnable skills.
Router
gamedev-skills/awesome-gamedev-agent-skills/router Skill
462★ repo
Game-development Agent Skills for AI coding agents: install once and a master router loads the right skill for your engine and task. 66 original, version-pinned skills (plus a master router) in the portable SKILL.md format that runs across Claude Code, Cursor, Codex, Copilot, Gemini CLI and more, for Godot, Unity, Unreal, web and beyond.
Claude design card
geekjourneyx/claude-design-card Skill
no license460★
Claude Code skill for generating design cards in 14 formats — platform covers, social sharing cards, and editorial layouts following Anthropic
Revenue centric design
heliocosta-dev/revenue-centric-design Skill
no license455★
Product-design, conversion & behavioral-science principles for SaaS
Superdesign
superdesigndev/superdesign-skill/skills/superdesign Skill
394★ repo
The design skill for Claude Code, Cursor and any coding agent. Stop shipping AI-slop UI: turn it into shippable, tasteful frontend. Install: npx skills add superdesigndev/superdesign-skill. Powered by superdesign.dev
Accessibility compliance
jamditis/claude-skills-journalism/dev-toolkit/skills/accessibility-compliance Skill
360★ repo
Claude Code skills for journalism, media, and academia - verification, FOIA, data journalism, academic writing, and more
Svelte MCP
sveltejs/ai-tools/dev.svelte/mcp MCP server
306★ repo
The official Svelte MCP server providing docs and autofixing tools for Svelte development
Color palette generator
AlpacaLabsLLC/skills-for-architects/skills/color-palette-generator Skill
303★ repo
Claude Code skills for architecture, real estate, and workplace strategy. Type /skill-name and go.
Ai game art pipeline skill
ybuild-ai/ai-game-art-pipeline-skill Skill
294★
Agent skill from Y Build for turning AI images and videos into playable game art assets
Storybook MCP Addon
storybookjs/mcp/io.github.storybookjs/addon-mcp MCP server
265★ repo
Help agents automatically write and test stories for your UI components.
Adapt
educlopez/ui-craft/.agents/skills/adapt Skill
255★ repo
Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill.
Accessibility auditor
OneWave-AI/claude-skills/accessibility-auditor Skill
248★ repo
172 production-ready Claude Code skills for sales, marketing, design, engineering, and AI agent architecture. Built and maintained by OneWave AI.
Accessibility audit
billy-enrizky/openbrowser-ai/plugin/skills/accessibility-audit Skill
238★ repo
OpenBrowser is a framework for intelligent browser automation. It combines direct CDP communication with a CodeAgent architecture, where the LLM writes Python code executed in a persistent namespace, to navigate, interact with, and extract information from web pages autonomously.
Figma ui mcp
TranHoaiHung/figma-ui-mcp/io.github.TranHoaiHung/figma-ui-mcp MCP server
221★ repo
Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back
Design harness
tigerless-labs/design-harness/plugins/design-harness/skills/design-harness Skill
no license207★ repo
Feed your agent papers and half-formed ideas — it links them into a system design you can defend. Markdown keeps the record; a visual canvas makes it readable. An Agent Skill for Claude Code & any SKILL.md-compatible agent.
Codeck design
hiyeshu/codeck/skills/codeck-design Skill
202★ repo
No Keynote. No dragging. No font sizes.
Skywork design
SkyworkAI/Skywork-Skills/skywork-design Skill
199★ repo
Skywork Agent Skills for AI office suites, including AI PPT, AI Document, AI Excel, AI Image, AI Search/DeepResearch and AI Music. These skills can be used by any skills-compatible agent, including Claude Code, Codex CLI and OpenClaw.
melta UI
tsubotax/melta-ui/io.github.tsubotax/melta-ui MCP server
194★ repo
AI-Ready design system MCP: melta UI tokens, component contracts, 99 rules, check_html self-verify
Canvas accessibility auditor
vishalsachdev/canvas-mcp/skills/canvas-accessibility-auditor Skill
191★ repo
Canvas LMS MCP server — 80+ tools and 5 agent skills for students & educators. Works with Claude, Cursor, Codex, and 40+ agents. v1.1.0
Refero skill
referodesign/refero_skill Skill
188★
Research-first design skill for AI agents. 150K+ real app screens and flows via Refero MCP.
Obsidian
gapmiss/obsidian-plugin-skill/.agents/skills/obsidian Skill
182★ repo
Agent SKILL for Obsidian.md plugin development
Extract design system
arvindrk/extract-design-system/skills/extract-design-system Skill
180★ repo
Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.
Frontend design
Karanjot786/agent-skills-cli/.agent/skills/frontend-design Skill
177★ repo
Universal CLI for Agent Skills. Access 200,000+ skills from SkillsMP and sync them to Cursor, Claude Code, GitHub Copilot, OpenAI Codex, and Antigravity.
Live component
smnandre/symfony-ux-skills/skills/live-component Skill
166★ repo
Symfony UX skills for Claude, Gemini, Codex, ... Live Component, Twig Component, Turbo, Stimulus
Svelte llm mcp
khromov/svelte-llm-mcp/garden.stanislav.svelte-llm/svelte-llm-mcp MCP server
160★ repo
An MCP server that provides access to Svelte 5 and SvelteKit documentation
2dimg2motion
WU-HAOTIAN34/2dimg2motion Skill
143★
Agent skill for converting 2D character into style-consistent transparent animation sequences and spritesheets for game engines | 用于将静态 2D 角色/物体图片，通过 agent 转化为一致的透明背景游戏动画序列帧。
Ignite UI MCP Server
IgniteUI/igniteui-cli/io.github.IgniteUI/mcp-server MCP server
136★ repo
Unified MCP server for Ignite UI — documentation, API, and CLI scaffolding
Canvas apps ui gen
ToluVictor/canvas-apps-tools/skills/canvas-apps-ui-gen Skill
127★ repo
AI skills for Power Apps Canvas Apps - Generate paste-ready Power Apps Canvas App YAML from screenshots, mockups, or text descriptions
Accessibility audit websites
TheGoat395/Codex-Skills/skills/accessibility-audit-websites Skill
117★ repo
Codex-first Agent Skills library for premium frontend, website, motion, accessibility, QA, and handoff workflows.
Templates
aryaniyaps/lamina/brand/templates Skill
112★ repo
Headless Product Design skill for AI coding agents | Design how it works, verify what you ship.
Gridgeist
ohmiler/gridgeist/skills/gridgeist Skill
106★ repo
Gridgeist turns product intent into a rigorous visual system—without the generic AI SaaS aftertaste.
Modern jetpack compose
anhvt52/jetpack-compose-skills/modern-jetpack-compose Skill
94★ repo
Agent skill for modern Android development with Jetpack Compose — best practices for code generation and review
Seedance2.0 ShotDesign Skills
woodfantasy/Seedance2.0-ShotDesign-Skills Skill
91★
Seedance 2.0 Shot Design Skills
Artifacts builder
walidboulanouar/Ay-Skills/skills/artifacts-builder Skill
no license85★ repo
Open source Claude Code skills by AY Automate
Tastemaker
codeswithroh/tastemaker/skills/tastemaker Skill
79★ repo
A Claude Code skill that grounds AI-generated UI in real reference images and a persistent per-developer taste profile, instead of generic AI-slop defaults.

All 16,188 in the catalog