Frontend design skills
Skills that help your agent build and style user interfaces. Think components, CSS, and design systems.
At a glance
This list has 120 skills from 8 public GitHub repos. 114 of them have a license that lets us quote the description. The newest repo update is 2026-10-13. The oldest is 2026-07-24. Most skills come from alirezarezvani (92), ComposioHQ (6), anthropics (6). Our basic check flagged notes on 4 of them.
Frontend design skills
Sorted with licensed, described skills first, then by newest repo update.
api-and-interface-design
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, def...
documentation-and-adrs
Records decisions and documentation. Use when you need to document an architecture decision (ADR) or the reasoning behind a design choice, when changing publ...
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing lay...
performance-optimization
Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance reg...
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or planning anything new, in s...
brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand co...
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art...
codebase-design
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a...
frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making...
grill-with-docs
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use whe...
prototype
Build 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 explore what ...
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use ...
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing...
supabase
Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client li...
supabase-postgres-best-practices
Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres d...
a11y-audit
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML ...
ab-test-setup
When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test th...
agent-designer
Use when the user asks to design a multi-agent system, pick an orchestration pattern (supervisor/swarm/pipeline), generate tool schemas for agents, or evalua...
agent-workflow-designer
Design production-grade multi-agent workflows with clear pattern choice (sequential, parallel, hierarchical), handoff contracts, failure handling, and cost/c...
api-design-reviewer
Comprehensive REST API design review with automated linting, breaking-change detection, and design scorecards. Catches inconsistent conventions, missing vers...
apple-hig-expert
Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language (announced ...
atlassian-templates
Atlassian Template and Files Creator/Modifier expert for creating, modifying, and managing Jira and Confluence templates, blueprints, custom layouts, reusabl...
aws-solution-architect
Design AWS architectures for startups using serverless patterns and IaC templates. Use when asked to design serverless architecture, create CloudFormation te...
azure-cloud-architect
Design Azure architectures for startups and enterprises. Use when asked to design Azure infrastructure, create Bicep/ARM templates, optimize Azure costs, set...
brand-guidelines
When the user wants to apply, document, or enforce brand guidelines for any product or company. Also use when the user mentions 'brand guidelines,' 'brand co...
business-operations-skills
Use when running, diagnosing, or designing internal business operations - process documentation, vendor SLAs, capacity planning, internal comms, SOP/runboo...
capacity-planner
Use when an ops leader (Director of CX, Head of Support, VP Ops, Head of BizOps, Head of IT ops, Head of Finance ops) is sizing ops capacity, building a head...
capture
Captures and organizes chaotic brain dumps into a structured, actionable system with zero information loss. Use this skill whenever the user says 'capture th...
chaos-engineering
Use when planning, running, or learning from chaos engineering experiments. Triggers on "chaos experiment", "fault injection", "gameday", "resilience test", ...
chaos-engineering
Use when planning, running, or learning from chaos engineering experiments. Triggers on "chaos experiment", "fault injection", "gameday", "resilience test", ...
chief-customer-officer-advisor
Chief Customer Officer advisory for startups: retention decomposition (gross retention vs NRR honesty, churn root-cause taxonomy), customer segmentation stra...
chief-customer-officer-advisor
Chief Customer Officer advisory for startups: retention decomposition (gross retention vs NRR honesty, churn root-cause taxonomy), customer segmentation stra...
chro-advisor
People leadership for scaling companies. Hiring strategy, compensation design, org structure, culture, and retention. Use when building hiring plans, designi...
churn-prevention
Reduce voluntary and involuntary churn through cancel flow design, save offers, exit surveys, and dunning sequences. Use when designing or optimizing a cance...
clinical-research
Use when designing a prospective clinical study before submission - selecting and classifying endpoints (primary / key-secondary / exploratory, with surrog...
cmo-advisor
Marketing leadership for scaling companies. Brand positioning, growth model design, marketing budget allocation, and marketing org design. Use when designing...
code-to-prd
Reverse-engineer any codebase into a complete Product Requirements Document (PRD). Analyzes routes, components, state management, API integrations, and user ...
commercial-policy
Use when designing or revising a company's commercial policy - the rules of engagement governing discounts off list price, approver thresholds, exception f...
commercial-skills
Use when reviewing, approving, or designing commercial motion - pricing models, deal review, discount approval, partnership economics, channel mix, commerc...
company-os
The meta-framework for how a company runs - the connective tissue between all C-suite roles. Covers operating system selection (EOS, Scaling Up, OKR-native...
confluence-expert
Atlassian Confluence expert for creating and managing spaces, knowledge bases, and documentation. Configures space permissions and hierarchies, creates page ...
coo-advisor
Operations leadership for scaling companies. Process design, OKR execution, operational cadence, and scaling playbooks. Use when designing operations, settin...
cpo-advisor
Product leadership for scaling companies. Product vision, portfolio strategy, product-market fit, and product org design. Use when setting product vision, ma...
cro-advisor
Revenue leadership for B2B SaaS companies. Revenue forecasting, sales model design, pricing strategy, net revenue retention, and sales team scaling. Use when...
culture-architect
Build, measure, and evolve company culture as operational behavior - not wall posters. Covers mission/vision/values workshops, values-to-behaviors translat...
database-designer
Use when the user asks to design database schemas, plan data migrations, optimize queries, choose between SQL and NoSQL, or model data relationships.
database-schema-designer
Use when the user asks to create ERD diagrams, normalize database schemas, design table relationships, or plan schema migrations.
dependency-auditor
Audit and manage dependencies across multi-language projects. Identifies vulnerabilities, license conflicts, transitive dependency risks, and safe-upgrade pa...
design-system
Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/techni...
email-template-builder
Build complete transactional email systems: React Email templates, provider integration (Resend, Postmark, SendGrid, AWS SES), preview server, i18n support, ...
engineering-advanced-skills
Index of 37 advanced engineering agent skills for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. Use when browsing or choosing among the POWERFUL-tier eng...
engineering-skills
Index of the engineering-team skills bundle for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw, and 6 more tools. Architecture, frontend, backend, QA, DevO...
epic-design
Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects - no WebGL requ...
experiment-designer
Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests, or interpreting A/B outcomes with practical s...
free-tool-strategy
When the user wants to build a free tool for marketing - lead generation, SEO value, or brand awareness. Use when they mention 'engineering as marketing,' ...
gcp-cloud-architect
Design GCP architectures for startups and enterprises. Use when asked to design Google Cloud infrastructure, deploy to GKE or Cloud Run, configure BigQuery p...
generate
Generate Playwright tests. Use when user says "write tests", "generate tests", "add tests for", "test this component", "e2e test", "create test for", "test t...
grill-me
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants t...
helm-chart-builder
Helm chart development agent skill and plugin for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw - chart scaffolding, values design, template patterns, d...
inbox-triage
Runs a full inbox triage using the knowledge base created by the 'inbox-setup' skill. Light-intake by design (most invocations skip questions and run with KB...
information-security-manager-iso27001
ISO 27001 ISMS implementation and cybersecurity governance for HealthTech and MedTech companies. Use when designing an ISMS, running security risk assessment...
interview-system-designer
This skill should be used when the user asks to "design interview processes", "create hiring pipelines", "calibrate interview loops", "generate interview que...
iso13485-audit-prep
/cs:iso13485-audit-prep <scope> - ISO 13485 QMS audit 6-question forcing interrogation. Design controls + CAPA + post-market focused. Use before Clause 8.2...
jira-expert
Atlassian Jira expert for creating and managing projects, planning, product discovery, JQL queries, workflows, custom fields, automation, reporting, and all ...
kubernetes-operator
Use when building a Kubernetes Operator - custom controllers that reconcile CRD state. Triggers on "build an operator", "CRD design", "reconcile loop", "co...
kubernetes-operator
Use when building a Kubernetes Operator - custom controllers that reconcile CRD state. Triggers on "build an operator", "CRD design", "reconcile loop", "co...
landing
Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator p...
landing-page-generator
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, F...
llm-cost-optimizer
Use proactively whenever LLM API costs come up -- or should. Triggers include: 'my AI costs are too high', 'optimize token usage', 'which model should I use'...
loop-library
Discover, find, compare, audit, repair, adapt, and design repeatable AI-agent loops with explicit triggers, actions, verification, stopping conditions, guard...
markdown-html-orchestrator
Use when a user wants to convert any markdown file in their Claude project into a single-file, lightly-interactive HTML - long-form documents (specs, plans...
mcp-server-builder
Design and ship production-ready MCP (Model Context Protocol) servers from OpenAPI contracts instead of hand-written tool wrappers. Python and TypeScript sup...
md-document
Converts long-form markdown (specs, RFCs, reports, plans, explainers) into a single-file, lightly-interactive HTML document with sticky TOC, scrollspy, searc...
md-slides
Converts a markdown deck (slides separated by `---` HR boundaries or by `# ` H1 headings, with optional `<!-- notes: ... -->` presenter notes blocks) into a ...
memory-engineering
Use when designing, reviewing, or paying for an agent memory system - adding memory to an agent, choosing between long-context / RAG / graph / agentic memo...
notebooklm
Browser automation skill for controlling Google's NotebookLM. Use when the user wants anything done in NotebookLM (e.g., 'open NotebookLM', 'check my [name] ...
observability-designer
Design production-ready observability strategies combining metrics, logs, and traces. Includes SLI/SLO design, golden-signals monitoring, alert optimization....
partnerships-architect
Use when a startup is approached by a prospective partner and someone has to decide should we sign this partner, at what partner tier (referral / reseller / ...
pricing-strategist
Use when designing or revisiting product pricing - selecting a pricing model (subscription seat-based, usage-based, value-based, freemium, or hybrid), runn...
pricing-strategy
Design, optimize, and communicate SaaS pricing - tier structure, value metrics, pricing pages, and price increase strategy. Use when building a pricing mod...
product-research
Use when planning and synthesizing product/user research as a method-and-repository discipline - selecting the right method for the goal (generative interv...
product-skills
Use when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experim...
product-strategist
Strategic product leadership toolkit for Head of Product covering OKR cascade generation, quarterly planning, competitive landscape analysis, product vision ...
prompt-governance
Use when managing prompts in production at scale: versioning prompts, running A/B tests on prompts, building prompt registries, preventing prompt regressions...
quality-manager-qms-iso13485
ISO 13485 Quality Management System implementation and maintenance for medical device organizations. Provides QMS design, documentation control, internal aud...
rag-architect
Use when the user asks to design a RAG pipeline, choose a chunking strategy or embedding model, pick a vector database, or evaluate retrieval quality (precis...
referral-program
When the user wants to design, launch, or optimize a referral or affiliate program. Use when they mention 'referral program,' 'affiliate program,' 'word of m...
research-ops-skills
Use when planning, funding, scoping, or synthesizing enterprise research across workstreams - clinical study design, R&D program finance, market sizing/sur...
saas-scaffolder
Generates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dash...
senior-architect
This skill should be used when the user asks to "design system architecture", "evaluate microservices vs monolith", "create architecture diagrams", "analyze ...
senior-backend
Designs and implements backend systems including REST APIs, microservices, database architectures, authentication flows, and security hardening. Use when the...
senior-data-engineer
Data engineering skill for building scalable data pipelines, ETL/ELT systems, and data infrastructure. Expertise in Python, SQL, Spark, Airflow, dbt, Kafka, ...
senior-data-scientist
World-class senior data scientist skill specialising in statistical modeling, experiment design, causal inference, and predictive analytics. Covers A/B testi...
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance,...
senior-fullstack
Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scor...
senior-prompt-engineer
Use when the user asks to optimize prompts, design prompt templates, evaluate LLM outputs with an eval set, measure RAG retrieval quality, validate agent/too...
senior-qa
Generates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, an...
ship-gate
Pre-production audit that scans a codebase for security, database, deployment, code quality, AI/LLM, dependency, frontend, and observability issues. Intercep...
site-architecture
When the user wants to audit, redesign, or plan their website's structure, URL hierarchy, navigation design, or internal linking strategy. Use when the user ...
slo-architect
Use when defining, reviewing, or operating SLOs/SLIs/error budgets. Triggers on "define an SLO", "what should our SLO be", "error budget", "burn rate", "SLI"...
slo-architect
Use when defining, reviewing, or operating SLOs/SLIs/error budgets. Triggers on "define an SLO", "what should our SLO be", "error budget", "burn rate", "SLI"...
terraform-patterns
Terraform infrastructure-as-code agent skill and plugin for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. Covers module design patterns, state management...
ui-design-system
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
ux-researcher-designer
UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and...
vpe-advisor
VP of Engineering advisory for startups: delivery throughput (DORA 4 metrics + bottleneck identification), engineering hiring funnel (sourcing → screen → ons...
vpe-advisor
VP of Engineering advisory for startups: delivery throughput (DORA 4 metrics + bottleneck identification), engineering hiring funnel (sourcing → screen → ons...
workflow-builder
Design and write deterministic multi-agent workflow scripts (.js files in .claude/workflows/) for Claude Code's Workflow tool. Use when a user wants to build...
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use ...
brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand co...
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art...
mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use whe...
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing...
vercel-composition-patterns
Open the source on GitHub to read what this skill does.
vercel-react-best-practices
Open the source on GitHub to read what this skill does.
vercel-react-native-skills
Open the source on GitHub to read what this skill does.
vercel-react-view-transitions
Open the source on GitHub to read what this skill does.
web-design-guidelines
Open the source on GitHub to read what this skill does.
Productboard Automation
Open the source on GitHub to read what this skill does.
Related categories
The Daily 5 newsletter
Five good agent skills in one email. Unsubscribe any time.
Placeholder. The mailing list is not connected yet, so nothing is collected.
Questions
What are frontend design skills?
Skills that help your agent build and style user interfaces. Think components, CSS, and design systems. Each one is a folder with a SKILL.md file that your agent reads when a task matches.
How do I install a frontend design skill?
Copy the skill folder into the skills folder your agent reads. Each skill page shows the exact command for Claude Code, Codex, Cursor, Gemini CLI, and OpenClaw.
Can I trust these skills?
We run a basic automated check for risky patterns. It is not a full audit. Read a skill before you install it.