234 agent skills
Best Design & frontend agent skills
Agent skills for UI design, frontend frameworks, CSS, accessibility and design systems. The most starred design & frontend agent skills are Brainstorming, Prototype and Codebase Design.
Updated Oct 7, 2026
Brainstorming
obra/superpowers
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior.
Design & frontendShellPrototype
mattpocock/skills
Build a throwaway prototype to answer a design question.
Design & frontendShellCodebase Design
mattpocock/skills
Shared vocabulary for designing deep modules.
Design & frontendShellAccessibility
affaan-m/ECC
Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target…
Design & frontendJavaScriptBackend Patterns
affaan-m/ECC
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
Design & frontendJavaScriptDesign System
affaan-m/ECC
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…
Design & frontendJavaScriptFrontend A11y
affaan-m/ECC
Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support.
Design & frontendJavaScriptFrontend Design Direction
affaan-m/ECC
Set an ECC-specific frontend design direction for production UI work.
Design & frontendJavaScriptReact Patterns
affaan-m/ECC
React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and…
Design & frontendJavaScriptReact Performance
affaan-m/ECC
React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills).
Design & frontendJavaScriptFrontend Design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
OfficialDesign & frontendPythonCanvas Design
anthropics/skills
Create beautiful visual art in .png and .pdf documents using design philosophy.
OfficialDesign & frontendPythonWeb Artifacts Builder
anthropics/skills
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
OfficialDesign & frontendPythonBrand Guidelines
anthropics/skills
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel.
OfficialDesign & frontendPythonSlack Gif Creator
anthropics/skills
Knowledge and utilities for creating animated GIFs optimized for Slack.
OfficialDesign & frontendPythonNext Cache Components Adoption
vercel/next.js
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces.
OfficialDesign & frontendJavaScriptNext Dev Loop
vercel/next.js
Verify Next.js runtime behavior after editing app code.
OfficialDesign & frontendJavaScriptNext Partial Prefetching Adoption
vercel/next.js
Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces.
OfficialDesign & frontendJavaScriptNext Partial Prefetching Optimizer
vercel/next.js
Optimize what selected Next.js client navigations include before the click under Partial Prefetching.
OfficialDesign & frontendJavaScriptAutoplan
garrytan/gstack
Auto-review pipeline — reads the full CEO, design, eng, and DX review skills from disk and runs them sequentially with auto-decisions using 6 decision principles.
Design & frontendTypeScriptDesign Consultation
garrytan/gstack
Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview...
Design & frontendTypeScriptDesign HTML
garrytan/gstack
Design finalization: generates production-quality Pretext-native HTML/CSS.
Design & frontendTypeScriptDesign Review
garrytan/gstack
Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them.
Design & frontendTypeScriptiOS Design Review
garrytan/gstack
Visual design audit for iOS apps on real hardware.
Design & frontendTypeScriptPlan Design Review
garrytan/gstack
Designer's eye plan review — interactive, like CEO and Eng review.
Design & frontendTypeScriptBanner Design
nextlevelbuilder/ui-ux-pro-max-skill
Design banners for social media, ads, website heroes, creative assets, and print.
Design & frontendPythonBrand
nextlevelbuilder/ui-ux-pro-max-skill
Brand voice, visual identity, messaging frameworks, asset management, brand consistency.
Design & frontendPythonDesign
nextlevelbuilder/ui-ux-pro-max-skill
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML…
Design & frontendPythonDesign System
nextlevelbuilder/ui-ux-pro-max-skill
Token architecture, component specifications, and slide generation.
Design & frontendPythonUI Styling
nextlevelbuilder/ui-ux-pro-max-skill
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Design & frontendPythonShadcn
shadcn-ui/ui
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces.
Design & frontendTypeScriptMigrate Radix To Base
shadcn-ui/ui
Migrates React projects and components from Radix UI to Base UI.
Design & frontendTypeScriptAPI And Interface Design
addyosmani/agent-skills
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface.
Design & frontendJavaScriptPerformance Optimization
addyosmani/agent-skills
Optimizes application performance across frontend, backend, queries, and databases.
Design & frontendJavaScriptFrontend UI Engineering
addyosmani/agent-skills
Builds production-quality, accessible, responsive user-facing UIs.
Design & frontendJavaScriptCritique
nexu-io/open-design
Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10.
Design & frontendTypeScriptDigital Eguide
nexu-io/open-design
A two-spread digital e-guide preview — page 1 is a cover (display title, author, "What's inside" stats, table of contents teaser); page 2 is a spread (lesson body with pull-quote and a step list).
Design & frontendTypeScriptGamified App
nexu-io/open-design
A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage.
Design & frontendTypeScriptHTML Ppt Zhangzara 8 Bit Orbit
nexu-io/open-design
A gamer's journey building a retro-arcade collection — the obsession, the hunt, and what the machines came to mean.
Design & frontendTypeScriptDesign Is
thedotmack/claude-mem
Audit a design against Dieter Rams' ten "Good design is..." principles, then hand off a /make-plan prompt for one of three outcomes — new design, refine design, or redesign.
Design & frontendTypeScriptDesign Taste Frontend
Leonxlnx/taste-skill
Anti-slop frontend skill for landing pages, portfolios, and redesigns.
Design & frontendJavaScriptHigh End Visual Design
Leonxlnx/taste-skill
Teaches the AI to design like a high-end agency.
Design & frontendJavaScriptRedesign Existing Projects
Leonxlnx/taste-skill
Upgrades existing websites and apps to premium quality.
Design & frontendJavaScriptMinimalist UI
Leonxlnx/taste-skill
Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels.
Design & frontendJavaScriptGpt Taste
Leonxlnx/taste-skill
Elite UX/UI & Advanced GSAP Motion Engineer.
Design & frontendJavaScriptIndustrial Brutalist UI
Leonxlnx/taste-skill
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics.
Design & frontendJavaScriptStitch Design Taste
Leonxlnx/taste-skill
Semantic Design System Skill for Google Stitch.
Design & frontendJavaScriptBrandkit
Leonxlnx/taste-skill
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations.
Design & frontendJavaScript
Showing the top 48 of 234 by GitHub stars. Every entry is listed in the sitemap and the JSON API.
What is the best design & frontend agent skill?
By GitHub stars, Brainstorming is the most popular (296,071 stars), followed by Prototype and Codebase Design. Compare install options and required API keys on each page.
How are these agent skills chosen?
Skills come from skills.sh, the GitHub topics claude-skills, agent-skills, claude-code-skills and skills, and the major awesome lists. A skill is listed only if its SKILL.md has a valid name and a description of 80+ characters, it has a license (the repository's or its own), the repository has a commit in the last six months, and the repository has 100+ stars or the skill is listed on skills.sh. This first batch is curated for developers (coding, testing, DevOps, data, security, frontend and technical docs) and capped at about 1,000 skills, at most 25 per repository; more categories are coming.