CSS & styling skills for AI agents

CSS & styling

2,031 rows from 627 repositories

Stylesheets, utility frameworks and animation.

What CSS & styling skills agree on

554 skill files read, by 512 of the 512 authors on this shelf whose files we hold, 2026-09-06

The middle one of the 81 measured here is ~2.1k 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

Animate only transform and opacity32 of 512 in 30 filesalso worded as Animate transform and opacity only; Only animate transform and opacity properties
Respect prefers-reduced-motion21 of 512also worded as Respect prefers reduced motion; Respect prefers-reduced-motion in animations.
Support reduced motion preferences16 of 512 in 6 filesalso worded as Support reduced motion accessibility; Support prefers reduced motion
Use Tailwind CSS for styling14 of 512 in 13 filesalso worded as Use Tailwind CSS utility classes; Compile Tailwind to CSS for production
Use semantic HTML elements11 of 512 in 10 filesalso worded as Use semantic HTML; use semantic HTML first
Use oklch for color values11 of 512 in 10 filesalso worded as Use OKLCH for all colors in production code; Use OKLCH as the recommended color format
Honor prefers-reduced-motion in animations10 of 512also worded as Honor prefers-reduced-motion.; Honor prefers-reduced-motion preferences.
Provide a reduced-motion fallback for animations10 of 512 in 9 filesalso worded as Always provide reduced-motion fallbacks; Establish reduced-motion fallbacks
Use property names in camelCase9 of 512 in 4 filesalso worded as Use property names in camelCase in vars; Use camelCase for class names
Ensure UI animations stay under 300ms9 of 512 in 6 filesalso worded as Keep UI animations under 300ms; Keep UI feedback animations under 300ms
Use ease-out or custom curves for entering elements9 of 512 in 6 filesalso worded as Use ease-out for entering or exiting elements; Use ease-out for entering elements
Specify AnimatePresence mode explicitly12 of 512 in 2 files
Set initial states explicitly12 of 512 in 2 files
Use SVG icons instead of emojis8 of 512
Always pair enter with exit8 of 512 in 4 filesalso worded as Pair enter with exit

What they tell it not to do

Do not animate layout properties50 of 512 in 34 filesalso worded as Avoid animating layout properties; Do not animate layout-heavy properties
Do not use emojis as UI icons20 of 512 in 19 filesalso worded as Do not use emojis as structural icons; Do not use emoji as iconography
Do not hardcode colors17 of 512also worded as Do not hardcode colors in component files; Do not hardcode hex for chart colors
Do not use transition all14 of 512 in 10 filesalso worded as Never use transition all; Do not use for CSS-only transitions
Do not use inline styles14 of 512 in 12 filesalso worded as Never use static styles in inline style props; Never use inline styles for theme values
Never animate width, height, top, or left14 of 512also worded as do not animate width or height; Do not animate width height or box-shadow
Do not use motion purely for decoration13 of 512 in 3 filesalso worded as Do not use decorative motion without interaction
Avoid using purple gradients11 of 512also worded as Never use purple/indigo gradients on white; Do not use AI purple blue gradients
Avoid using Inter font10 of 512also worded as Avoid the Inter font; Never use Inter, Roboto, Arial, or system fonts
Do not use ease-in on UI interactions10 of 512 in 7 filesalso worded as never use ease-in on ui; Do not use ease-in for UI animations

What they expect to be installed

npm68 of 512 in 54 files
npx35 of 512 in 31 files
python335 of 512 in 34 files
node28 of 512
python27 of 512 in 24 files
Tailwind CSS25 of 512
Vite22 of 512 in 20 files
grep21 of 512 in 16 files
pnpm19 of 512
GSAP17 of 512

What they ask it to produce

tokens.css17 of 512also worded as tokens.ts; tokens.json
tailwind.config.ts15 of 512 in 14 filesalso worded as tailwind.config.js; Tailwind config
React components14 of 512 in 12 filesalso worded as Animated React components; React component
DESIGN.md11 of 512 in 10 filesalso worded as *-design-language.md; DESIGN-SYSTEM.md
Design system9 of 512 in 8 filesalso worded as Design system documentation; design systems
MP49 of 512also worded as MP4 video; .mp4
components.json9 of 512 in 8 filesalso worded as components; components json configuration
UI components9 of 512also worded as React UI components; Interactive UI components

When CSS & styling authors say to reach for one

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

When implementing motion patterns13 of 512 in 3 files
- Motion ui
- and 3 more on this shelf
Animation11 of 512
- Sota frontend design
- Video
Designing new UI components or pages11 of 512 in 10 files
- Ui ux pro max
Implementing accessibility10 of 512 in 9 files
- Senior frontend
- Sota frontend design
- and 7 more on this shelf
Implement dark mode, night mode, or customization10 of 512
- Theming components
Responsive design10 of 512
- Tailwindcss
- Sota frontend design

How CSS & styling skills are built

1,836 skill directories by 586 authors, read from their repositories’ own file trees 2026-08-05

The middle bundle among those shipping files is 4 files, 38.5 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 skill149 of 586 authors, 741 of 1,836 skills
files ship beside it437 of 586 authors, 1,095 of 1,836 skills
executable scripts ship inside192 of 586 authors, 353 of 1,836 skills

The folders they converge on

references/289 of 586 authors, 540 of 1,836 skills
scripts/179 of 586 authors, 323 of 1,836 skills
agents/57 of 586 authors, 108 of 1,836 skills
assets/47 of 586 authors, 75 of 1,836 skills
data/42 of 586 authors, 50 of 1,836 skills
evals/26 of 586 authors, 52 of 1,836 skills

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
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.
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
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
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
Refero skill
referodesign/refero_skill Skill
188★
Research-first design skill for AI agents. 150K+ real app screens and flows via Refero MCP.
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 转化为一致的透明背景游戏动画序列帧。
Gridgeist
ohmiler/gridgeist/skills/gridgeist Skill
106★ repo
Gridgeist turns product intent into a rigorous visual system—without the generic AI SaaS aftertaste.
Artifacts builder
walidboulanouar/Ay-Skills/skills/artifacts-builder Skill
no license85★ repo
Open source Claude Code skills by AY Automate
UI UX PRO MAX
liyupi/github-claw/.agents/skills/UI-UX-PRO-MAX Skill
no license68★ repo
用 GitHub 打造 AI 智能体：长期记忆 + AI Agent 技能包（UI/UX、图片生成、SEO）+ GitHub Actions 自动化 + Copilot 编程 Agent，支持 Vibe Coding 快速孵化项目。
Cinematic ui
akseolabs-seo/cinematic-ui Skill
59★
A reasoning-first cinematic web design skill. Makes AI think like a film director — research a real film, extract its visual language, translate it into page narrative and composition. Not a style picker. A director's workflow. 讓 AI 像電影導演一樣思考的網站設計 Skill。研究真實電影語言、轉譯成頁面敘事與構圖。不是風格選單，是導演工作流。
Sprite animation assets
DwDestiny/codex-visual-asset-skills/skills/sprite-animation-assets Skill
58★ repo
Codex skills for transparent image assets and animation sprite sets
Avoid ai design
funboy322/avoid-ai-design Skill
44★
A Claude Code skill that audits AI-generated frontend and rewrites it to remove generic AI-slop design patterns (purple gradients, Inter, default shadcn). The design counterpart to avoid-ai-writing.
Motion lexicon
Ryan-yang125/motion-lexicon/skills/motion-lexicon Skill
40★ repo
Open bilingual UI motion recipes for humans and agents.
Flowbite mcp
themesberg/flowbite-mcp/io.github.themesberg/flowbite-mcp MCP server
40★ repo
MCP server to convert Figma designs to Flowbite UI components in Tailwind CSS
Remotion motion graphics
haidrrrry/claude-remotion-skill/remotion-motion-graphics Skill
39★ repo
Open-source Claude agent skill that teaches Claude Code, Claude Desktop & Claude AI to create and edit professional motion graphics videos with Remotion. AI video editing, B-roll, captions, sound design — from one prompt.
Avenox graphics
avenoxai/avenoxskills/skills/avenox-graphics Skill
35★ repo
Production agent skills for Claude Code, Cursor, and any SKILL.md harness — Codex fleets, video pipeline, monorepo review bundles, multi-chain explorer.
Animation vocabulary
virastack/ai/.agents/skills/animation-vocabulary Skill
23★ repo
AI-native architecture kit for modern React — disciplined agent rules in one command.
Wiggle claude skill
talknerdytome-labs/wiggle-claude-skill Skill
no license21★
Claude Skill for Animating Logos
Baseline ui
master5d/claude-design-skills/skills/baseline-ui Skill
no license18★ repo
Design-focused Agent Skills for Claude Code: UI/UX, interface design, typography, and motion. Emil Kowalski-inspired.
Animation review
jaaaaaaaaaaack/custom-skills/animation-review Skill
no license16★ repo
Public repo for my custom-built claude skills (currently just animation-review)
Animate css skill
msrbuilds/animate-css-skill/animate-css-skill Skill
no license13★ repo
Claude Code skill that adds Animate.css animations to HTML, React/JSX, and WordPress PHP templates — with scroll-trigger, RTL, and reduced-motion support
Interaction design skills
rastian/interaction-design-skills Skill
no license12★
A Claude skill for interaction design -> flows, states, micro-interactions, affordances, feedback, and IxD principles for product, UX, UI, and service designers.
Css animation skill
neonwatty/css-animation-skill Skill
12★
A Claude Code skill that generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding
Creating reanimated animations
estevg/skills/plugins/creating-reanimated-animations/skills/creating-reanimated-animations Skill
12★ repo
React Native Reanimated animation skill
AD RESTYLER
holy-templar/AD-RESTYLER Skill
10★
Restyle any ad into any visual style with one prompt — free Claude skill for Google Omni Flash video-to-video.
Svg character animator
molauu/svg-character-animator Skill
10★
Agent Skill for production-quality SVG character animation — morph state machines, idle motion, SwiftUI export
Frontend architecture
stareezy-1/frontend-architecture-skill/skills/frontend-architecture Skill
10★ repo
Six portable, framework-agnostic frontend Agent Skills (SKILL.md) for the React & React Native ecosystem: architecture, SEO, Lighthouse performance gate, typed data contracts, optimistic mutations, and observability. About Me : https://stareezy.tech
Figbridge
rudraptpsingh/figbridge/io.github.rudraptpsingh/figbridge MCP server
10★ repo
Free, local MCP bridge for Figma — HTML, CSS, Tailwind, tokens, agent handoff bundles.
Factory animation
nonlinear-xyz/factory-kit/skills/factory-animation Skill
9★ repo
Personal Claude Code factory — synthesized cross-build skills, specialist subagents, and slash commands. Phase 0.
Replica
Surya17155/Replica Skill
9★
Turn any screenshot/design reference into a precise, copy-paste-ready developer prompt. Upload a screenshot → get exact hex colors, Tailwind classes, animation specs, and component structure — ready for Lovable, Bolt, Replit, or Cursor.
Alterlab cdm animation previz
AlterLab-IEU/AlterLab-FC-Skills/skills/cdm/alterlab-cdm-animation-previz Skill
9★ repo
🎓 72 production-grade Claude AI skills for communication students — PR & advertising, cinema, new media, GenAI production, visual communication & research methods. Built by AlterLab.
Ltx2 video
patraxo/ltx2-vidgen-skill/skills/ltx2-video Skill
no license8★ repo
Own your AI video pipeline. LTX-2.3 (22B) self-hosted on your Modal GPU via a Claude Code skill — t2v, i2v, keyframes, v2v + synced audio. ~$0.02 per 5s clip, idle = $0.
Motion guide
JarvixGaby/motion-guide-skill/motion-guide Skill
8★ repo
AI-agent skill for product-safe UI motion decisions.
Mangou
MangouArt/mangou/skill-src/mangou Skill
no license6★ repo
Bring AI Comic Director to your OpenClaw
Design token bridge mcp
kenneives/design-token-bridge-mcp/io.github.kenneives/design-token-bridge-mcp MCP server
5★ repo
Translate design tokens between Tailwind, Figma, CSS, Material 3, and SwiftUI
Brand design
rfxlamia/pocketto/skills/brand-design Skill
4★ repo
A middleweight workflow for serious AI-coded features: less ceremony than BMAD, more accountability than Superpowers. Source : Trust Me Bro.
Design auditor
billhector/design-skills/skills/design-auditor Skill
4★ repo
Claude Code skills for extracting design systems from websites and auditing existing projects — with Tailwind v4 theme generation and WCAG accessibility checks
Modern frontend design
deveshpunjabi/modern-frontend-skill/skills/modern-frontend-design Skill
4★ repo
A skill for coding agents that transforms vague UI requests into polished, production-quality frontends.
Pretext frontend motion
HongMing-Huang/pretext-frontend-motion Skill
4★
Multi-CLI skill bundle and npm CLI for Pretext-driven text layout, typography, and frontend motion.
Css i18n
globalize-now/globalize-skills/skills/css-i18n Skill
3★ repo
Set of skills for globalizing and localizing app
Ai ui ux motion engine
OpaceDigitalAgency/skills/skills/ai-ui-ux-motion-engine Skill
3★ repo
Open AI Agent Skills for website design, UI/UX, motion graphics, 3D web, accessibility and future SEO workflows across Codex, Claude Code, Cursor, Copilot, Antigravity, Gemini, Windsurf and more.
Frontend code review
DNM03/frontend-code-review/skills/frontend-code-review Skill
3★ repo
Agent skills for production-ready frontend code reviews across React, Next.js, TypeScript, accessibility, UX, performance, and SEO.
Modern css
moderncss/skills/skills/modern-css Skill
3★ repo
Modern CSS skills for coding agents and humans
Admin ui svelte
lindoelio/my-agent-skills/admin-ui-svelte Skill
no license3★ repo
A collection of reusable Agent Skills for AI-powered development tools.
Arabic rtl best practices
alMubarmij/Arabic-AI-Skills/arabic-rtl-best-practices Skill
3★ repo
مهارات للغة العربية لأدوات ووكلاء الذكاء الاصطناعي
Universal designer
satishTheLegend/universal-designer Skill
3★
Claude Code meta-skill: single entry point for all frontend design, animation & 3D — detects your stack, sets direction, routes to 24 specialist skills.
Animation principles
mshadmanrahman/pm-operating-system/_context/skills/animation-principles Skill
2★ repo
An opinionated workflow system that restructures how product managers work with Claude Code. 16 PM skills, 9 agents, 10 coding rules, 13 slash commands, 6 automation hooks, product brain system, and session lifecycle with memory/handoffs.
Ai accessibility audit
varunk130/ai-ux-skill-library/skills/ai-accessibility-audit Skill
2★ repo
The 12-skill AI UX design engine for Claude Code & GitHub Copilot — purpose-built for designing UX for AI products, agents, and experiences.
Animejs
webmilmind1/claude-plugins/frontend-kit/skills/animejs Skill
no license2★ repo
Frontend Design Kit for Claude Code — UI, UX, components, charts & animation. KokonutUI, Bklit UI, and Anime.js skills in one installable plugin.
Site to prompt
dhernz/site-to-prompt/skills/site-to-prompt Skill
2★ repo
Convert any site into a prompt — give your agent a URL and it parses the site into a structured prompt another agent can rebuild from.
3d website architect
deveshpunjabi/3d-website-skill/skills/3d-website-architect Skill
2★ repo
A professional AI development skill that trains coding agents and LLMs to design, build, test, and deploy modern premium websites with advanced animations and 3D interactive experiences
Design teardown
YunyueLi/design-teardowns/skills/design-teardown Skill
2★ repo
Reverse-engineer world-class product landing pages into source-level design teardowns: a gallery of 11 in-depth examples + a reusable Claude Agent Skill. Real extracted tokens, evidence-backed analysis.
Web animation engine
smk-labs/web-animation-engine Skill
2★
A Claude skill and ~700-line React+SVG runtime for composing animated web scenes, explainers, and motion graphics. CDN-only, no npm, no build step.
Design md skill
s-a-s-k-i-a/design-md-skill Skill
no license2★
Auto-generate a spec-conformant DESIGN.md from your existing design tokens (theme.json, Tailwind, CSS variables, DTCG). The Claude Code skill that makes your design system AI-readable in one command.
Angular developer
Pyfagorass/bookofspells/skills/angular/angular-developer Skill
no license2★ repo
📖 The Book of Spells: a curated, enchanted index of real LLM tooling — and a pipeline that gathers SKILL.md skills from many houses into one searchable shelf.
Skills
2389-research/css-development/skills Skill
1★ repo
CSS development workflows with Tailwind composition, semantic naming, and dark mode by default
Wnb compose animation
wenubey/claude-android-skills/skills/wnb-compose-animation Skill
1★ repo
Reusable Claude Code skills for Android — Kotlin, Jetpack Compose, unit + UI testing, animations
Artifacts builder
wrm3/ai_project_template/.claude/skills/artifacts-builder Skill
1★ repo
template for projects that you plan on having one or more different AI Assistants working in, and attempting to keep co-ordinated

All 2,031 in the catalog