Frontend & Design Skills for Claude Code
Skills for UI work: design direction, React and web best practices, accessibility and browser testing. Every listing below works with Claude Code. Free GitHub projects and paid options are ranked together.
Updated October 2026 · 10 listings · stars refreshed daily from GitHub
How to add frontend & design skills to Claude Code
Personal skills live in ~/.claude/skills/<name>/SKILL.md, project skills in .claude/skills/ (commit them to share with your team). Plugins from a marketplace can bundle skills too: /plugin marketplace add owner/repo, then /plugin install.
Frontend Design skill 🧩 SkillFree
Guides the agent to build distinctive, production-grade UIs instead of generic "AI-looking" designs
Vercel Agent Skills 🧩 SkillFree
Vercel's Agent Skills for React, Next.js, deployment and writing
Web App Testing skill 🧩 SkillFree
Teaches the agent to test local web apps with Playwright scripts
Diagram Design 🧩 SkillOpen source
39 editorial diagram types as self-contained HTML and SVG, matched to your brand
OpenDesign 🧩 SkillFreemium
Local-first design workspace that uses your coding agent to build prototypes, decks and UI
Playwright Skill 🧩 SkillFree
Lets your coding agent write and run Playwright browser automation on the fly
Scroll Craft 🧩 SkillOpen source
Agent skill for building premium, immersive, scroll-driven websites to a real design standard
Frontend Slides 🧩 SkillOpen source
Agent skill that builds self-contained HTML slide decks and converts PowerPoint files
Auteur 🧩 SkillOpen source
Agent Skill that art-directs websites and gates them with anti-slop and motion checks
Awesome Design.md 🧩 SkillFree
73+ ready-to-drop DESIGN.md files that teach a coding agent a real brand's design system
More for Claude Code
🤖 Subagents for Claude Code (67) 🔌 MCP Servers for Claude Code (74) Claude Code review
Popular searches
- Skills for Claude Code
- Development workflow skills for Claude Code
- Community skill collections for Claude Code
- Document & office skills for Claude Code
- Science & data skills for Claude Code
- Security skills for Claude Code
- Official skill collections for Claude Code
- Subagents for Claude Code
- Agent workflows & frameworks for Claude Code
- Subagent collections for Claude Code
- MCP servers for Claude Code
- Docs & code context MCP servers for Claude Code
- Developer tool MCP servers for Claude Code
- Claude Code alternatives