Skill directory · Design

Frontend and Design agent skills

Skills for interface design and frontend engineering: UI systems, CSS, components, motion and accessibility. They help an agent produce interfaces with deliberate visual decisions instead of default templates.

Build a shortlist for your task →

All 198 frontend and design skills

SkillRepositoryWhat it does
aesthetic-instrument 82/100 · Bavelikiy/great_ctoDefines great_cto's visual style, a dark surface ladder with one accent and two typefaces, as twelve checkable rules for its board, site, and reports.
angular-developer 81/100 · Bangular/skillsGenerates Angular code and gives architectural guidance on components, services, signals, forms, routing, server rendering, accessibility, styling, testing, and CLI tooling.
angular-new-app 80/100 · Bangular/skillsCreates a new Angular application using the Angular CLI and provides guidelines for building a modern Angular app.
anydesign 84/100 · Bavelikiy/great_ctoAnalyzes images, websites, and Figma files to extract their design and generate a design.md with a token system, component inventory, and reconstruction notes.
auteur 89/100 · Bagiwhitelist/auteurDesigns and builds complete web experiences, including landing pages, cinematic scroll-directed sites, and multi-screen products, as one consistent design system with generated assets.
brand-guidelines 81/100 · Banthropics/skillsApplies Anthropic's official brand colors and typography to artifacts that should carry Anthropic's look and feel.
committed-aesthetic 82/100 · Bavelikiy/great_ctoExplains how to write and use a skill that commits to one checkable aesthetic rather than a catalogue, so designs are executed consistently.
design 77/100 · Cohad6k/emuloGuides UI, UX, visual hierarchy, redesign, and design critique work so that it follows the user's Emulo taste.
expo-design-system 79/100 · Cexpo/skillsBuilds and maintains a design system in an Expo app, covering design tokens, components with variant, size, and state props, and shared component extraction.
fal-redesign 73/100 · Cfal-ai-community/skillsRedesigns a coded website by screenshotting it, generating a reference image with fal.ai, and writing a Markdown build-spec with hard constraints and tokens.json.
firecrawl-website-design-clone 80/100 · Bfirecrawl/skillsExtracts a website's design system into an agent-ready DESIGN.md covering colors, fonts, spacing, components, and layout patterns, using Firecrawl scrape evidence.
flutter-add-widget-preview 77/100 · Cflutter/skillsAdds interactive widget previews to a Flutter project using the previews.dart system when creating new UI components or updating existing screens.
impeccable 86/100 · Bpbakaus/impeccableGuides frontend and native interface design through focused playbooks for hierarchy, typography, accessibility, responsive layouts, motion and UX copy.
nextjs-developer 84/100 · Bjeffallan/claude-skillsGuides building Next.js 14+ applications with App Router, server components, and server actions, including route handlers, middleware, streaming SSR, metadata, and Vercel deployment.
superdesign 83/100 · Bsuperdesigndev/superdesign-skillDesigns or redesigns frontend UI, presentations, and graphics on the Superdesign canvas using a choice of AI models, comparing results and exploring visual variants.
ui-animation 86/100 · Bmblode/agent-skillsBuilds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface sound.
ui-design 84/100 · Bmblode/agent-skillsDesigns and builds React, Next, and Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data.
web-artifacts-builder 87/100 · Banthropics/skillsBuilds elaborate multi-component claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui, for complex artifacts needing state management, routing, or shadcn/ui components.
accessibility-audit 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsConduct a comprehensive accessibility audit against WCAG guidelines with severity ratings and remediation steps.
aesthetic-usability 61/100 · Dinfrasity-labs/dev-gtm-claude-skillsApply the Aesthetic-Usability Effect — visually consistent, polished interfaces are perceived as more usable.
amazon-dynamodb 67/100 · Daws/agent-toolkit-for-awsDesigns, reviews, and debugs DynamoDB data layers from design axioms — enumerates access patterns, chooses partition/sort keys and GSIs, decides…
angular-architect 84/100 · Bjeffallan/claude-skillsGenerates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies…
animation-principles 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsApply animation principles to UI motion for purposeful, polished interactions.
anti-ui-slop 80/100 · Bgithub/awesome-copilotStop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design…
arc-region-switch 80/100 · Baws/agent-toolkit-for-awsAnswers questions about Amazon Application Recovery Controller (ARC) Region switch including architecture, plans, execution blocks, workflows…
arize-link 77/100 · Cgithub/awesome-copilotGenerates deep links to the Arize UI for traces, spans, sessions, datasets, labeling queues, evaluators, and annotation configs. Produces clickable…
azure-kusto-graph 72/100 · Cmicrosoft/azure-skillsBuild and query Kusto graphs from natural language. Covers transient graphs (make-graph), persistent graph models/snapshots, pattern matching…
banner-design 73/100 · Cnextlevelbuilder/ui-ux-pro-max-skillDesign banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied…
batch-script-progress 84/100 · Bgithub/awesome-copilotDesign and verify runtime output when creating or modifying Python, PowerShell, or Node.js scripts that process multiple files, records, or API…
character-design 75/100 · Cfal-ai-community/skillsBuild consistent character designs and character media with genmedia. Use this for original characters, reference sheets, expression sheets, outfit…
chatgpt-apps 79/100 · Copenai/skillsBuild, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design…
cloud-design-patterns 80/100 · Bgithub/awesome-copilotCloud design patterns for distributed systems architecture covering 42 industry-standard patterns across reliability, performance, messaging…
codebase-design 78/100 · Cmattpocock/skillsShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities…
color-system 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsBuild a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.
component-spec 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsWrite a detailed component specification including props, states, variants, accessibility requirements, and usage guidelines.
content-experimentation-best-practices 75/100 · Csanity-io/agent-toolkitContent experimentation and A/B testing guidance covering experiment design, hypotheses, metrics, sample size, statistical foundations, CMS-managed…
content-modeling-best-practices 75/100 · Csanity-io/agent-toolkitStructured content modeling guidance for schema design, content architecture, content reuse, references versus embedded objects, separation of…
copilot-pr-autopilot 73/100 · Cgithub/awesome-copilotCopilot left 14 review comments on your PR — half are nits. Hours of fix → reply → resolve → re-request, and each round lands MORE comments. This…
create-implementation-plan 67/100 · Dgithub/awesome-copilotCreate a new implementation plan file for new features, refactoring existing code or upgrading packages, design, architecture or infrastructure.
critique-affordance 61/100 · Dinfrasity-labs/dev-gtm-claude-skillsCritique a screen's interactive affordances — what looks clickable, state visibility, CTA clarity, and action discoverability.
critique-brand-consistency 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsCritique a screen's brand consistency against mood.md, voice.md, and tokens.md.
critique-color 61/100 · Dinfrasity-labs/dev-gtm-claude-skillsCritique a screen's colour usage — contrast ratios, palette coherence, semantic meaning, and colour accessibility.
critique-composition 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsCritique a screen's composition — balance, whitespace, rhythm, and gestalt principles.
critique-information-density 61/100 · Dinfrasity-labs/dev-gtm-claude-skillsCritique a screen's information density — cognitive load, content prioritisation, scanning patterns, and progressive disclosure.
critique-typography 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsCritique a screen's typography — scale usage, readability, consistency, and token compliance.
critique-visual-hierarchy 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsCritique a screen's visual hierarchy — entry point, eye flow, weight distribution, and emphasis.
d365-solution-blueprint 82/100 · Bgithub/awesome-copilotAuthors a Dynamics 365 Finance and Supply Chain Management Solution Blueprint from scratch through a structured, section-by-section architect…
daily-focus-board 83/100 · Bgithub/awesome-copilotSpin up a personal, motivating daily focus board that renders in a browser canvas and that the user drives by talking to their AI partner. Tasks…
dark-mode-design 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign effective dark mode interfaces with proper color adaptation, contrast, and elevation.
data-visualization 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign clear, accessible data visualizations with appropriate chart selection and styling.
design 73/100 · Cnextlevelbuilder/ui-ux-pro-max-skillComprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate…
design-brief 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsWrite a comprehensive design brief that defines the problem space, constraints, audience, and success criteria.
design-critique 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsFacilitate structured design critiques with clear feedback frameworks and actionable outcomes.
design-debt-audit 64/100 · Dinfrasity-labs/dev-gtm-claude-skillsIdentify, categorize, and prioritize accumulated design inconsistencies and structural problems across a product.
design-everyday-things 83/100 · Bwondelai/skillsApply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models. Use when the user mentions "why is this…
design-md 65/100 · Dgoogle-labs-code/stitch-skillsAnalyze Stitch projects and synthesize a semantic design system into DESIGN.md files
design-principles 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsDefine a set of actionable design principles that guide decision-making and resolve trade-offs.
design-qa-checklist 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsCreate QA checklists for verifying design implementation accuracy.
design-rationale 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsWrite clear design rationale connecting decisions to user needs, business goals, and principles.
design-review-process 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsEstablish design review gates with criteria, checklists, and approval workflows.
design-system 83/100 · Bnextlevelbuilder/ui-ux-pro-max-skillToken architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables…
design-system-adoption 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsCreate adoption strategies and materials to drive design system usage across teams.
design-system-governance 64/100 · Dinfrasity-labs/dev-gtm-claude-skillsDefine how a design system evolves — contribution models, versioning, change management, and deprecation.
design-token 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsDefine and organize design tokens (color, spacing, typography, elevation) with naming conventions and usage guidance.
design-token-audit 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsAudit design token usage across a product for consistency and coverage.
documentation-template 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsGenerate structured documentation templates for components, patterns, or guidelines within a design system.
doherty-threshold 64/100 · Dinfrasity-labs/dev-gtm-claude-skillsApply the Doherty Threshold — keep system response times under 400ms to maintain user flow and perceived performance.
dotnet-design-pattern-review 62/100 · Dgithub/awesome-copilotReview the C#/.NET code for design pattern implementation and suggest improvements.
enhance-prompt 72/100 · Cgoogle-labs-code/stitch-skillsTransforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and…
error-handling-ux 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign error prevention, detection, and recovery experiences.
expo-animation 80/100 · Bexpo/skillsBuild animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which…
expo-native-ui 75/100 · Cexpo/skillsBuild beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects…
expo-ui 81/100 · Bexpo/skillsBuild native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet)…
fabric-lakehouse 80/100 · Bgithub/awesome-copilotUse this skill to get context about Fabric Lakehouse and its features for software systems and AI-powered functions. It offers descriptions of…
fal-gamedev 62/100 · Dfal-ai-community/skillsGenerate 2D pixel art game assets, characters, sprite sheets, background removal, and game backgrounds. Trigger for "pixel art character", "sprite…
feedback-patterns 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign system feedback for user actions including confirmations, status updates, and notifications.
figma 79/100 · Cheygen-com/hyperframesImport Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames…
figma 74/100 · Copenai/skillsUse the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code…
figma-code-connect-components 82/100 · Bopenai/skillsConnects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to…
figma-create-design-system-rules 74/100 · Copenai/skillsGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set…
figma-create-new-file 71/100 · Copenai/skillsCreate a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling…
figma-generate-design 75/100 · Copenai/skillsUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers…
figma-generate-library 79/100 · Copenai/skillsBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component…
figma-implement-design 77/100 · Copenai/skillsTranslates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user…
figma-use 77/100 · Copenai/skills**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this…
fitts-law 62/100 · Dinfrasity-labs/dev-gtm-claude-skillsApply Fitts's Law to size and position interactive targets for fast, accurate interaction.
fluentui-blazor 83/100 · Bgithub/awesome-copilotGuide for using the Microsoft Fluent UI Blazor component library (Microsoft.FluentUI.AspNetCore.Components NuGet package) in Blazor applications…
flutter-build-responsive-layout 77/100 · Cflutter/skillsUse `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look…
flutter-fix-layout-issues 80/100 · Bflutter/skillsFixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools. Use when addressing "RenderFlex overflowed"…
form-design 62/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign forms that minimize friction, prevent errors, and guide users to successful completion.
frontend-design 84/100 · Banthropics/skillsGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography…
frontend-dev 67/100 · DMiniMax-AI/skillsFull-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual…
gdpr-compliant 81/100 · Bgithub/awesome-copilotApply GDPR-compliant engineering practices across your codebase. Use this skill whenever you are designing APIs, writing data models, building…
gesture-patterns 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign gesture-based interactions for touch and pointer devices.
grill-me 59/100 · Dmattpocock/skillsA relentless interview to sharpen a plan or design.
grill-with-docs 61/100 · Dmattpocock/skillsA relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
gsap-framer-scroll-animation 81/100 · Bgithub/awesome-copilotUse this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal…
gtm-developer-ecosystem 77/100 · Cgithub/awesome-copilotBuild and scale developer-led adoption through ecosystem programs. Use when deciding open vs curated ecosystems, building developer programs…
gtm-technical-product-pricing 77/100 · Cgithub/awesome-copilotPricing strategy for technical products. Use when choosing usage-based vs seat-based, designing freemium thresholds, structuring enterprise pricing…
handoff-spec 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsCreate developer handoff specifications with measurements, behaviors, assets, and edge cases.
Show the other 98 frontend and design skills
SkillRepositoryWhat it does
heuristic-evaluation 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsConduct expert heuristic evaluations using Nielsen's heuristics and domain-specific criteria.
hicks-law 61/100 · Dinfrasity-labs/dev-gtm-claude-skillsApply Hick's Law to reduce decision time by limiting the number of simultaneous choices presented to users.
high-perf-browser 83/100 · Bwondelai/skillsOptimize web performance through network protocols, resource loading, and browser rendering internals. Use when the user mentions "my site is slow"…
hyperframes 80/100 · Bheygen-com/hyperframesMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a…
hyperframes-animation 80/100 · Bheygen-com/hyperframesAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques…
hyperframes-creative 82/100 · Bheygen-com/hyperframesNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat…
hyperframes-keyframes 84/100 · Bheygen-com/hyperframesUse when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other…
hyperframes-registry 78/100 · Cheygen-com/hyperframesSearch, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visual — whenever a…
icon-system 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsCreate an icon system specification covering grid, sizing, naming, categories, and implementation guidance.
imagegen-frontend-mobile 61/100 · DLeonxlnx/taste-skillMoved to github.com/Leonxlnx/imagegen-skills. Runs only when called by name.
imagegen-frontend-web 61/100 · DLeonxlnx/taste-skillMoved to github.com/Leonxlnx/imagegen-skills. Runs only when called by name.
improve-app 80/100 · Bwondelai/skillsGuided journey from a shipped app that works but feels rough to a product that fits the job, flows without friction, reads clearly, and persuades…
information-architecture 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign the structure, hierarchy, and navigation model for a product's content and features.
interface-design 75/100 · Cinfrasity-labs/dev-gtm-claude-skillsCraft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when…
interfaces-that-feel 74/100 · Cinfrasity-labs/dev-gtm-claude-skillsApply an emotional resonance lens to any UI. Use when a design is technically correct but flat — to identify what's missing and prescribe specific…
ios-design-review 64/100 · Dgarrytan/gstackVisual design audit for iOS apps on real hardware. (gstack)
ios-hig-design 81/100 · Bwondelai/skillsDesign native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit"…
law-of-common-region 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsApply the Law of Common Region to group elements using containers, backgrounds, and boundaries.
law-of-proximity 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsApply the Law of Proximity to group related elements through spatial relationships.
layout-grid 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsDefine responsive layout grid systems with columns, gutters, margins, and breakpoint behavior.
lean-ux 81/100 · Bwondelai/skillsApply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables. Use when the user…
legacy-circuit-mockups 80/100 · Bgithub/awesome-copilotGenerate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize…
loading-states 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign loading, skeleton, and progressive content reveal patterns.
localization-design 64/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign interfaces that adapt gracefully to multiple languages, writing directions, and cultural contexts.
macos-golden-gate-design 80/100 · Bgithub/awesome-copilotDesign, implement, review, or refactor native macOS 27 Golden Gate interfaces in SwiftUI or AppKit. Use when a Mac app must match Apple's current…
markstream-install 82/100 · Bgithub/awesome-copilotInstall and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications. Use for package…
metronome 76/100 · Cstripe/aiGuides Metronome usage-based billing integration decisions — event ingestion (single and batch, idempotency, billable metrics), contract design…
micro-interaction-spec 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsSpecify micro-interactions with trigger, rules, feedback, and loop/mode definitions.
microinteractions 81/100 · Bwondelai/skillsDesign the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones. Use when the user mentions…
millers-law 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsApply Miller's Law — chunk information into groups of ~4 to work within working memory limits.
model-routing 72/100 · Cfal-ai-community/skillsChoose default fal.ai endpoint IDs for genmedia production skills. Use this with commercial, marketing, ugc, character-design, cinematography…
motion-graphics 80/100 · Bheygen-com/hyperframesUse when creating a short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting…
motion-system 64/100 · Dinfrasity-labs/dev-gtm-claude-skillsDefine a motion system with duration tokens, easing vocabulary, and reduced-motion handling for consistent animation across a product.
naming-convention 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsEstablish a naming convention system for design elements, components, and tokens with clear rules and examples.
navigation-patterns 64/100 · Dinfrasity-labs/dev-gtm-claude-skillsSelect and design navigation patterns that match product structure, user tasks, and platform conventions.
onboarding-design 62/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign first-run experiences that get users to value quickly without overwhelming them.
oo-component-documentation 70/100 · Cgithub/awesome-copilotCreate or update standardized object-oriented component documentation using a shared template plus mode-specific guidance for new and existing docs.
pattern-library 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsStructure a pattern library entry with problem context, solution pattern, usage examples, and related patterns.
penpot-uiux-design 81/100 · Bgithub/awesome-copilotComprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web…
plugin-structure 84/100 · Banthropics/claude-plugins-officialThis skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components"…
poka-yoke 85/100 · Bgithub/awesome-copilotMistake-proof code so misuse cannot be expressed, rather than warning against it. Use when designing an interface, schema, or state machine and the…
portable-text-serialization 78/100 · Csanity-io/agent-toolkitRender and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in…
power-bi-model-design-review 67/100 · Dgithub/awesome-copilotComprehensive Power BI data model design review prompt for evaluating model architecture, relationships, and optimization opportunities.
power-bi-report-design-consultation 77/100 · Cgithub/awesome-copilotPower BI report visualization design prompt for creating effective, user-friendly, and accessible reports with optimal chart selection and layout…
power-platform-architect 77/100 · Cgithub/awesome-copilotUse this skill when the user needs to transform business requirements, use case descriptions, or meeting transcripts into a technical Power Platform…
powerbi-modeling 80/100 · Bgithub/awesome-copilotPower BI semantic modeling assistant for building optimized data models. Use when working with Power BI semantic models, creating measures…
premium-frontend-ui 69/100 · Dgithub/awesome-copilotA comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural…
product-design 87/100 · Bmblode/agent-skillsSpecifies interaction choices, action scope, reversibility, recovery, and reachable states. Use when asked to "design the flow", "should delete be…
prototype 75/100 · Cmattpocock/skillsBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or…
prototype-strategy 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsChoose the right prototyping fidelity and method for the design question.
react-container-presentation-component 77/100 · Cgithub/awesome-copilotCreate a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then…
react-expert 84/100 · Bjeffallan/claude-skillsUse when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components…
react-vite-dashboard 66/100 · Dgoogle-labs-code/stitch-skillsConvert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns…
react18-batching-patterns 77/100 · Cgithub/awesome-copilotProvides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class…
react18-lifecycle-patterns 75/100 · Cgithub/awesome-copilotProvides exact before/after migration patterns for the three unsafe class component lifecycle methods - componentWillMount…
react18-string-refs 77/100 · Cgithub/awesome-copilotProvides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill…
readable-measure 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsSet optimal line lengths for readability across typography scales and responsive layouts.
refactoring-ui 81/100 · Bwondelai/skillsAudit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix…
resilience-program-design 72/100 · Caws/agent-toolkit-for-awsDesigns a resilience program: how to structure and standardize resilience policies across an organization, team, or portfolio (tiered policy model…
responsive-design 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign adaptive layouts and interactions that work across all screen sizes and input methods.
resx-source-generator-migration 67/100 · Dgithub/awesome-copilotMigrates a project that uses checked-in .designer.cs files behind .resx to using a source-generator instead
rhino3d-scripts 78/100 · Cgithub/awesome-copilotAuthoring and debugging scripts for Rhinoceros 3D (Rhino 8 and later). Use when asked to write RhinoScript (VBScript / .rvb / .vbs), RhinoPython, or…
salesforce-component-standards 77/100 · Cgithub/awesome-copilotQuality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages. Covers SLDS 2 compliance, accessibility…
salesforce-flow-design 77/100 · Cgithub/awesome-copilotSalesforce Flow architecture decisions, flow type selection, bulk safety validation, and fault handling standards. Use this skill when designing or…
sanity-best-practices 79/100 · Csanity-io/agent-toolkitSanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization…
sanity-migration 81/100 · Bsanity-io/agent-toolkitPlans, implements, and reviews migrations from other CMSes and content systems into Sanity. Use when migrating or replatforming to Sanity from AEM…
search-ux 72/100 · Cinfrasity-labs/dev-gtm-claude-skillsDesign search experiences that help users find what they need, recover from failure, and refine results.
shadcn-ui 71/100 · Cgoogle-labs-code/stitch-skillsExpert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and…
spacing-system 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsCreate a consistent spacing system based on a base unit with contextual application rules.
state-machine 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsModel complex UI behavior as finite state machines with states, events, and transitions.
stripe-apps 81/100 · Bstripe/aiBuild, modify, or review Stripe Apps and extensions using the relevant documentation and reference guides. Use for custom Stripe Dashboard UI…
taste-design 69/100 · Dgoogle-labs-code/stitch-skillsSemantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict…
theme-factory 73/100 · Canthropics/skillsToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes…
theming-system 58/100 · Dinfrasity-labs/dev-gtm-claude-skillsDesign a theming architecture that supports brand variants, dark mode, and high-contrast modes with token mapping.
top-design 80/100 · Bwondelai/skillsCreate award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my…
typography-audit 84/100 · Bmblode/agent-skillsAudits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography"…
typography-scale 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsCreate a modular typography scale with size, weight, and line-height relationships.
ui-screenshots 69/100 · Dgithub/awesome-copilotCapture screenshots of web apps during development using Playwright and PIL. Supports full-page captures, interactive states, and an iterate-on-crop…
ui-styling 83/100 · Bnextlevelbuilder/ui-ux-pro-max-skillCreate beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and…
ui-ux-pro-max 83/100 · Bnextlevelbuilder/ui-ux-pro-max-skillUI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces…
update-implementation-plan 69/100 · Dgithub/awesome-copilotUpdate an existing implementation plan file with new or update requirements to provide new features, refactoring existing code or upgrading…
user-flow-diagram 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsCreate user flow diagrams showing paths, decisions, and branch logic.
ux-heuristics 83/100 · Bwondelai/skillsEvaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "users are confused", "form…
vercel-composition-patterns 64/100 · Dvercel-labs/agent-skillsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or…
vercel-react-native-skills 67/100 · Dvercel-labs/agent-skillsReact Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance…
vercel-react-view-transitions 68/100 · Dvercel-labs/agent-skillsGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and…
version-control-strategy 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsDefine version control strategies for design files, components, and libraries.
visual-brand-extractor 73/100 · Cgooseworks-ai/goose-skillsExtract visual branding (colors, typography, layout patterns) from a client's website and generate a style preset compatible with the HTML slides…
visual-hierarchy 59/100 · Dinfrasity-labs/dev-gtm-claude-skillsEstablish clear visual hierarchy through size, weight, color, spacing, and positioning.
von-restorff-effect 61/100 · Dinfrasity-labs/dev-gtm-claude-skillsApply the Von Restorff Effect to make the most important element distinctly different from its surroundings.
vue-expert 81/100 · Bjeffallan/claude-skillsBuilds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile…
vue-expert-js 84/100 · Bjeffallan/claude-skillsCreates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only —…
web-design-guidelines 74/100 · Cinfrasity-labs/dev-gtm-claude-skillsReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or…
web-design-reviewer 83/100 · Bgithub/awesome-copilotThis skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review…
web-perf 68/100 · Dcloudflare/skillsAudit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.
web-typography 81/100 · Bwondelai/skillsSelect, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive…
winui-app 77/100 · Copenai/skillsBootstrap, develop, and design modern WinUI 3 desktop applications with C# and the Windows App SDK using official Microsoft guidance, WinUI Gallery…
wireframe-spec 56/100 · Dinfrasity-labs/dev-gtm-claude-skillsSpecify wireframe layouts with content priority, component placement, and annotation.

How to choose frontend and design skills

Choose one design skill as the source of visual rules. Several design skills set strong opinions on type, color and spacing, and stacking two produces mixed results.

Framework skills (React, Angular, Flutter and others) belong with your stack; design skills sit above them and work across frameworks.

Ask for screenshots or renders as output. Skills that verify their own UI in a browser catch layout problems before you review.

Where to start

brand-guidelinesApplies Anthropic's official brand colors and typography to artifacts that should carry Anthropic's look and feel. Published by Anthropic. expo-design-systemBuilds and maintains a design system in an Expo app, covering design tokens, components with variant, size, and state… Published by Expo. angular-developerGenerates Angular code and gives architectural guidance on components, services, signals, forms, routing, server… Published by Angular. fal-redesignRedesigns a coded website by screenshotting it, generating a reference image with fal.ai, and writing a Markdown… Published by fal. firecrawl-website-design-cloneExtracts a website's design system into an agent-ready DESIGN.md covering colors, fonts, spacing, components, and… Published by Firecrawl.
brand-guidelines81/100 · B anthropics/skills Applies Anthropic's official brand colors and typography to artifacts that should carry Anthropic's look and feel. web-artifacts-builder87/100 · B anthropics/skills Builds elaborate multi-component claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui, for complex artifacts needing state… nextjs-developer84/100 · B jeffallan/claude-skills Guides building Next.js 14+ applications with App Router, server components, and server actions, including route handlers, middleware… ui-animation86/100 · B mblode/agent-skills Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface… ui-design84/100 · B mblode/agent-skills Designs and builds React, Next, and Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data. auteur89/100 · B agiwhitelist/auteur Designs and builds complete web experiences, including landing pages, cinematic scroll-directed sites, and multi-screen products, as one… aesthetic-instrument82/100 · B avelikiy/great_cto Defines great_cto's visual style, a dark surface ladder with one accent and two typefaces, as twelve checkable rules for its board, site… anydesign84/100 · B avelikiy/great_cto Analyzes images, websites, and Figma files to extract their design and generate a design.md with a token system, component inventory, and… committed-aesthetic82/100 · B avelikiy/great_cto Explains how to write and use a skill that commits to one checkable aesthetic rather than a catalogue, so designs are executed consistently. expo-design-system79/100 · C expo/skills Builds and maintains a design system in an Expo app, covering design tokens, components with variant, size, and state props, and shared… design77/100 · C ohad6k/emulo Guides UI, UX, visual hierarchy, redesign, and design critique work so that it follows the user's Emulo taste. superdesign83/100 · B superdesigndev/superdesign-skill Designs or redesigns frontend UI, presentations, and graphics on the Superdesign canvas using a choice of AI models, comparing results and… angular-developer81/100 · B angular/skills Generates Angular code and gives architectural guidance on components, services, signals, forms, routing, server rendering, accessibility… angular-new-app80/100 · B angular/skills Creates a new Angular application using the Angular CLI and provides guidelines for building a modern Angular app. fal-redesign73/100 · C fal-ai-community/skills Redesigns a coded website by screenshotting it, generating a reference image with fal.ai, and writing a Markdown build-spec with hard… firecrawl-website-design-clone80/100 · B firecrawl/skills Extracts a website's design system into an agent-ready DESIGN.md covering colors, fonts, spacing, components, and layout patterns, using… flutter-add-widget-preview77/100 · C flutter/skills Adds interactive widget previews to a Flutter project using the previews.dart system when creating new UI components or updating existing… impeccable86/100 · B pbakaus/impeccable Guides frontend and native interface design through focused playbooks for hierarchy, typography, accessibility, responsive layouts, motion…

Top frontend and design collections

infrasity-labs/dev-gtm-claude-skills65 frontend and design skills github/awesome-copilot37 frontend and design skills openai/skills10 frontend and design skills wondelai/skills10 frontend and design skills heygen-com/hyperframes7 frontend and design skills google-labs-code/stitch-skills5 frontend and design skills jeffallan/claude-skills5 frontend and design skills nextlevelbuilder/ui-ux-pro-max-skill5 frontend and design skills sanity-io/agent-toolkit5 frontend and design skills anthropics/skills4 frontend and design skills expo/skills4 frontend and design skills fal-ai-community/skills4 frontend and design skills

Other skill directories

AI Agents and LLM Engineering · Developer Tools and Frameworks · Marketing and SEO · Product Management · Science and Research · DevOps and Cloud · Video, Image, Audio and Creative · Productivity and Knowledge Work · Business, Sales and Finance · Testing and QA · Data, Analytics and Databases · Security · Writing and Editing · Code Review and Code Quality · Documents and Office Files