MCP CheckClaude skills for frontend design
50 of 679 public skills on GitHub that mention frontend design: skills named for it first, then by stars, at most 3 from one repository. Each links to its folder; copy it into ~/.claude/skills/ to use it.
frontend design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
anthropics/skills★ 185kNo licence statedFolder:
frontend-designfrontend ui engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and…
addyosmani/agent-skills★ 112kMITFolder:
frontend-ui-engineeringdesign taste frontend
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section…
Leonxlnx/taste-skill★ 105kMITFolder:
taste-skillfrontend
Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to PDF or print, figures, PNG/SVG diagrams, slides, and images for Notion or Slack. Use for any styling, layout, animation, or…
code-yeongyu/oh-my-openagent★ 70kLicence: see repoFolder:
frontendfrontend engineer
Pro frontend engineering discipline. Enforces build-test-verify workflow for every web project. Never declare done until the site is built, tested, responsive, accessible, and visually verified in a real browser. Pairs with a deployment skill such as…
nanocoai/nanoclaw★ 31kMITFolder:
frontend-engineerfrontend forge fi operations
Operate FrontendIntegration resources and the frontend-forge extension. Use when Codex needs to create a FrontendIntegration from FrontendIntegration YAML, update or patch FI lifecycle state, inspect or troubleshoot FI build output, or create, enable,…
kubesphere/kubesphere★ 17kLicence: see repoFolder:
frontend-forge-fi-operationsfrontend integration yaml
Generate canonical FrontendIntegration YAML from a simplified single-menu authoring model for frontend-forge.
kubesphere/kubesphere★ 17kLicence: see repoFolder:
frontend-integration-yamlfrontend forge fe operations
Operate FrontendExtension (FE) resources in frontend-forge: create, update, rebuild, inspect package artifacts, download packages, publish, unpublish, delete, and debug package/publish controller behavior. Use this skill whenever the user mentions FE…
kubesphere/kubesphere★ 17kLicence: see repoFolder:
frontend-forge-fe-operationsweb design analyzer
网页与数字界面设计师和网页开发工程师在需要逆向分析网页截图时，使用本技能一键提取配色、排版及组件特征，自动生成结构化 Design System 数据与 AI Coding Prompt，让设计还原与前端开发更高效。
anbeime/skill★ 8.9kNo licence statedFolder:
web-design-analyzerlanding page audit 39
CRO analysis for landing pages evaluating headline clarity, CTA placement, trust signals, mobile friction, and conversion killers. Use when uploading a landing page screenshot, pasting a URL for review, requesting conversion rate optimization feedback, or…
irinabuht12-oss/marketing-skills★ 6.1kNo licence statedFolder:
landing-page-audit-39landing page audit
Reviews your landing pages against the ads driving traffic to them. Checks for message match between ad copy and page content, CTA clarity, above-the-fold alignment, form friction, and flags any disconnects between what the ad promises and what the page…
irinabuht12-oss/marketing-skills★ 6.1kNo licence statedFolder:
landing-page-auditfrontend ui dark ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
microsoft/skills★ 3.2kMITFolder:
frontend-ui-dark-tsbackend to frontend handoff docs
Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.
softaworks/agent-toolkit★ 2.6kMITFolder:
backend-to-frontend-handoff-docsfrontend to backend requirements
Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.
softaworks/agent-toolkit★ 2.6kMITFolder:
frontend-to-backend-requirementslanding page cro expert
Audits and rewrites landing pages, homepages, and sales pages to increase conversion — diagnosing why a page is not converting, rewriting headlines, hero copy and calls to action, and prioritizing which changes to test first. Use this when a page…
cbrock84/headcount★ 2.5kMITFolder:
landing-page-cro-expertsenior frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing…
composio-community/awesome-claude-plugins★ 2kNo licence statedFolder:
senior-frontendweb design guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines".
CloudAI-X/claude-workflow-v2★ 1.4kMITFolder:
web-design-guidelinesoma frontend
Implement or modify web UI in React, Next.js, or Angular. Use for components, pages, styles, forms, and frontend state or data flows.
first-fluke/oh-my-agent★ 1.4kMITFolder:
oma-frontendecommerce landing page
Audit and optimize e-commerce landing pages for conversion. CTA placement, trust signals, page structure, copy optimization, and A/B testing strategy for product pages, collection pages, and campaign landing pages.
nexscope-ai/eCommerce-Skills★ 1.3kMITFolder:
ecommerce-landing-pageshopify landing page builder
High-converting landing pages — campaign pages, collection pages, seasonal promos, A/B testing
nexscope-ai/eCommerce-Skills★ 1.3kMITFolder:
shopify-landing-page-builderanthropic frontend design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
fcakyon/claude-codex-settings★ 1.2kApache-2.0Folder:
anthropic-frontend-designfrontend testing debugging
This skill should be used when user asks to "debug this UI", "verify a rendered frontend change", or "check responsive layouts". Diagnose visual and interaction problems, compare reference screenshots, and reuse project QA journeys when available.
fcakyon/claude-codex-settings★ 1.2kApache-2.0Folder:
frontend-testing-debuggingopenai frontend design
Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable…
fcakyon/claude-codex-settings★ 1.2kApache-2.0Folder:
openai-frontend-designui design
Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
TencentCloudBase/CloudBase-AI-Toolkit★ 1.2kMITFolder:
ui-designlanding page
Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing…
jezweb/claude-skills★ 1.1kMITFolder:
landing-pageexceptional web design
Reviews the design of an existing non-SPA (classic) or SPA Power Pages site - a live URL or a local project folder - and recommends what to change, without modifying anything. Captures up to eight key pages at desktop and mobile, scores them against the…
microsoft/power-platform-skills★ 1.1kMITFolder:
exceptional-web-designlanding page generator
Deprecated compatibility entry for Landing Page construction. This page is now maintained in Pagina; install and use page-builder to build a new Landing Page.
kostja94/marketing-skills★ 1.1kMITFolder:
landing-pagefrontend dev
前端开发规范，包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等
doccker/cc-use-exp★ 1.1kLicence: see repoFolder:
frontend-devcc frontend dev
前端开发规范，包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等
doccker/cc-use-exp★ 1.1kLicence: see repoFolder:
cc-frontend-devfrontend safety
前端修改安全约束。当用户修改 Vue/React 组件、调整页面布局、创建覆盖层/蒙版组件时激活。提供数据绑定保护、布局一致性规范、覆盖层定位规范。
doccker/cc-use-exp★ 1.1kLicence: see repoFolder:
frontend-safetyfrontend component build
Build production-ready frontend components with accessible markup, sensible props, defined states, and tested behavior. Use this skill whenever the user wants to build a component from scratch, refactor an existing one, design a component API, or implement…
rampstackco/claude-skills★ 1kMITFolder:
frontend-component-buildlanding page copy
Write landing page copy with attention to the hero, value proposition, social proof, objection handling, and conversion-focused CTAs. Use this skill whenever the user wants to write a landing page, sales page, hero section, or any conversion-focused web…
rampstackco/claude-skills★ 1kMITFolder:
landing-page-copycomfyui frontend extensions
Authoring ComfyUI v2 frontend extensions with @comfyorg/extension-api, covering defineNode/defineExtension/defineWidget, shell UI (sidebar tabs, commands, hotkeys), typed events, and handles. Use when writing or editing ComfyUI web-UI extension code…
artokun/comfyui-mcp★ 879MITFolder:
comfyui-frontend-extensionstrailsnap ui design
基于 TrailSnap（行影集）现有设计系统设计、实现和审查前端 UI。适用于 package/website 的新页面、组件、布局、主题、移动端适配与界面改版；纯后端任务和其他项目不适用。
LC044/TrailSnap★ 849AGPL-3.0Folder:
trailsnap-ui-designlight frontend design
Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成**能跑的 React/Tailwind/shadcn 代码 + 设计决策说明**—— 有**视觉记忆点**(signature element)、**风格自洽**(design tokens 一致)、**适配场景**(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、**反「一眼 AI」**(紫蓝渐变/Inter/16px 圆角/巨型 hero/居中堆叠/emoji 标题)、**视觉无障碍**(WCAG…
Light0305/Light-skills★ 824MITFolder:
light-frontend-designweb design
网页设计与部署。生成精美的单页 HTML 网页（报告、落地页、数据可视化等），支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome 技术栈。当用户要求制作网页、生成报告页面、创建落地页、数据可视化展示、部署网页到线上时使用。
countbot-ai/CountBot★ 783MITFolder:
web-designlanding page creator
Build high-converting affiliate landing pages as single self-contained HTML files. Triggers on: "create a landing page for", "build a landing page", "product landing page", "affiliate landing page", "comparison page for", "vs page", "single product page",…
Affitor/affiliate-skills★ 751MITFolder:
landing-page-creatorfrontend ai guide
Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates. Use when reviewing components, hooks, browser behavior, or frontend implementation completeness.
shinpr/claude-code-workflows★ 706MITFolder:
frontend-ai-guide12 landing page brief global
Use when a NEW landing page, sales page, or single-product page has to be built — seven-section structure, one page one goal one CTA, copy per block, mobile-first rules, technical and speed requirements, tracking plan, A/B test plan, and a dropshipping…
minhnv0807/ai-business-skills★ 638MITFolder:
12-landing-page-brief-global12 brief landing page
Dung khi can viet brief de XAY landing page moi hoac trang ban hang moi — cau truc section, copy tung khoi, yeu cau ky thuat, tracking va timeline giao dev. Kich hoat khi user nhac 'brief landing page', 'lam trang ban hang', 'can trang dich', 'thue dev lam…
minhnv0807/ai-business-skills★ 638MITFolder:
12-brief-landing-pagefrontend patterns
React, Next.js, TypeScript frontend patterns - component design, state management, performance
vibeeval/vibecosystem★ 541MITFolder:
frontend-patternsdeploy frontend
Use when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
butterbase-ai/butterbase-skills★ 535MITFolder:
deploy-frontendjourney frontend
Use as the frontend build stage of the Butterbase journey. Implements the Frontend section of 02-plan.md by delegating to deploy-frontend. Scaffolds (if needed) and deploys via create_frontend_deployment + manage_frontend (start_deployment). Sets…
butterbase-ai/butterbase-skills★ 535MITFolder:
journey-frontendimagegen frontend web
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress…
mxyhi/ok-skills★ 507Apache-2.0Folder:
imagegen-frontend-webfrontend dev guidelines
Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포넌트, 페이지, 기능 생성, 데이터 페칭, 스타일링, 라우팅, 프론트엔드 코드 작업 시 사용.
aiskillstore/marketplace★ 446No licence statedFolder:
frontend-dev-guidelineslanding page design
Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing,…
aiskillstore/marketplace★ 446No licence statedFolder:
landing-page-designfrontend slides
Browser-based HTML presentation generation.
notque/vexjoy-agent★ 443MITFolder:
frontend-slideszero build frontend
Zero-build frontend development for static apps, browser extensions, maps, and lightweight data-backed interfaces. Use when deployment must not require a build step.
jamditis/claude-skills-journalism★ 439MITFolder:
zero-build-frontendweb design picker
Use when creating distinct website directions, a client review picker, asset catalog, previews, and Cloudflare-ready handoffs.
jamditis/claude-skills-journalism★ 439MITFolder:
web-design-pickerplaywright frontend
For frontend engineers authoring UI — how to make components reliably locatable by tests and AI agents. Covers the official Playwright locator priority, semantic/accessible markup first, and how to add valid, unique, stable `data-testid` attributes (naming…
testdino-hq/playwright-skill★ 405MITFolder:
frontend
Claude skills for frontend design: what people ask
Is there a Claude skill for frontend design?
Yes: 679 public skills from 323 GitHub repositories mention frontend design. The best-known ones named for it are frontend design (anthropics/skills, ★ 185k), frontend ui engineering (addyosmani/agent-skills, ★ 112k) and design taste frontend (Leonxlnx/taste-skill, ★ 105k). Stars belong to the whole repository, not to one skill.
How do I add frontend design to Claude?
For frontend design, copy the frontend-design folder from anthropics/skills (the folder that holds SKILL.md) into ~/.claude/skills/ to use it in every Claude Code project, or into .claude/skills/ for one project. For the Claude apps, upload the zipped folder as a custom skill instead.
How recently were frontend design skills updated?
421 of the 679 frontend design skills sit in repositories that changed in the 30 days before 31 Oct 2026.
Are frontend design skills safe to install?
Installing a frontend design skill means Claude will follow its instructions and may run its scripts, so read SKILL.md and every script first: for frontend design, that is everything in the frontend-design folder. Watch for downloads, commands that send data out, invisible characters, and text telling Claude to keep something from you.
What licences do these frontend design skills use?
Of the 50 frontend design skills listed here, 35 sit in repositories under an open licence such as MIT or Apache 2.0, and 7, such as frontend design and web design analyzer, state no licence at all, which legally means you may not reuse them. The licence badge on each card tells you which is which.
More topics: every “Claude skills for…” page.