steipeteSkillfrontend-design
steipete/agent-scripts/skills/frontend-design/SKILL.md
Frontend UI: pages, apps, components, polished non-generic design.
Claude skills and agent skills
Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
Best matches · from page 3Worked for most · soon
steipeteSkill
VercelSkillfrontend-design
vercel-labs/open-agents/.agents/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Galaxy-DawnSkillfrontend-design
Galaxy-Dawn/claude-scholar/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
CloudflareSkillfrontend-design
cloudflare/vibesdk/worker/agents/think/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
MicrosoftSkillfrontend-design
microsoft/agent-academy/docs/cowork-collective/badge-check/assets/SKILL.md
Use this skill when generating reports, tables, or email output to produce polished, self-contained, responsive HTML.
MicrosoftSkillfrontend-design
microsoft/agent-academy/.github/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
coleam00Skillprime-frontend
coleam00/skills/.claude/skills/prime-frontend/SKILL.md
Primes the agent with focused understanding of the frontend portion of the codebase — components, routing, state management, and styling — without loading unrelated backend code. Use at the start of a session when the work is scoped to UI or client-side features. Optionally pulls external task context from Jira issues and Confluence pages first.
RinisnotarobotSkillts-frontend
Rinisnotarobot/rinco-pi-skills-commands/skills/stacks/ts-frontend/SKILL.md
React and TypeScript frontend conventions - hooks discipline, component composition, server/client component boundaries, Suspense and error boundaries, data fetching and form actions, memoization and bundling, and component testing with React Testing Library. Use when working in a React or TypeScript frontend - writing or reviewing components, hooks, pages, or TSX, wiring data fetching or forms, tuning render cost, configuring tsconfig or module resolution, or when a React change must reconcile with the project's selected frontend architecture. 中文触发：React、前端组件、hooks、TSX、组件测试
jjyaoaoSkillfrontend-design
jjyaoao/HelloAgents/skills/frontend-design/SKILL.md
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
xstongxueSkillfrontend-design
xstongxue/best-skills/skills/frontend-design/SKILL.md
创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。
tranhieuttSkillteam-frontend
tranhieutt/software_development_department/.claude/skills/team-frontend/SKILL.md
name: team-frontend type: workflow description: "Orchestrates the frontend team of ux-designer, ux-researcher, frontend-developer, and accessibility-specialist to design, implement, and validate a UI feature from research
mrgoonieSkillfrontend-design
mrgoonie/claudekit-skills/.claude/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
digitalsambaSkillfrontend-design
digitalsamba/claude-code-video-toolkit/.claude/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
stareezy-1Skillfrontend-seo
stareezy-1/frontend-architecture-skill/skills/frontend-seo/SKILL.md
A portable, framework-agnostic SEO system for any React or React Native-for-web frontend. Centralizes site metadata in one constants module, derives canonical URLs from a single base, builds per-route metadata (title, description, canonical, Open Graph, Twitter/X cards), generates sitemap.xml, robots.txt, and an RSS feed from real content, and emits typed JSON-LD structured data (Person, WebSite, BlogPosting, CreativeWork, BreadcrumbList, FAQPage). Pure, testable builder functions with a thin framework adapter on top. Use this skill when adding SEO to a site, wiring metadata into routes, generating sitemaps/robots/feeds, adding schema.org structured data, fixing canonical URLs or duplicate-content issues, or reviewing SEO coverage. Pairs with the frontend-architecture skill (SEO lives in a service module) and works with Next.js App Router, Remix, Astro, React + Vite, and Expo Router for web.
xu-xiangSkillfrontend-slides
xu-xiang/everything-claude-code-zh/.agents/skills/frontend-slides/SKILL.md
从零开始创建令人惊叹、动画丰富的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面、或为演讲/路演创建幻灯片的场景。帮助非设计师用户通过视觉探索而非抽象选择来发现他们的审美偏好。
xu-xiangSkillfrontend-slides
xu-xiang/everything-claude-code-zh/.cursor/skills/frontend-slides/SKILL.md
从零开始或通过转换 PowerPoint 文件创建令人惊叹、动画丰富的 HTML 演示文稿（Presentations）。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面或为演讲/路演创建幻灯片（Slides）的场景。通过视觉探索而非抽象选择，帮助非设计师发掘其审美偏好。
fmindSkillweb-frontend
fmind/dot/skills/web-frontend/SKILL.md
Build accessible browser UIs with HTML, CSS, JavaScript, and Tailwind; check compatibility.
zhao-wuyanSkillteam-frontend
zhao-wuyan/ccw-command-explorer/.claude/skills/team-frontend/SKILL.md
Unified team skill for frontend development. Pure router — all roles read this file. Beat model is coordinator-only in monitor.md. Built-in ui-ux-pro-max design intelligence. Triggers on "team frontend".
vellum-aiSkillfrontend-design
vellum-ai/vellum-assistant/skills/frontend-design/SKILL.md
Design-quality layer for frontend code — typography, color, motion, spatial composition, and avoiding generic "AI slop" aesthetics. Use this as a companion when you are already writing or styling frontend code and want it to look distinctive and production-grade. For building an app, dashboard, tracker, calculator, visualization, landing page, or slide deck the user wants inside the assistant, load `app-builder` instead — it loads this skill itself for the design pass.
OpenAISkillgame-ui-frontend
openai/plugins/plugins/game-studio/skills/game-ui-frontend/SKILL.md
Design UI surfaces for browser games. Use when the user asks for HUDs, menus, overlays, responsive layouts, or visual direction that must protect the playfield.
About skills
What is a Claude skill?
A folder with a SKILL.md file: a name, a description of when to use it, and instructions. Claude loads a skill only when the task matches its description.
How do I use one I find here?
Copy the folder into your project's .claude/skills/ directory, or into your own skills folder to use it everywhere.
What do the warnings mean?
We read each file for commands that read secrets, delete things or pipe downloads into a shell, and say so before you copy it. No warning is not a promise that a file is safe.
Which skills worked for people?
Open a skill to see its discussion. Reports from people and their agents are coming.