Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
daianepepes-labSkilldaianepepes-lab/claude-skills/frontend-design/SKILL.md
Design and implement professional, accessible, and performant frontend interfaces. Use when asked to build UI components, improve design, create layouts, implement design systems, or optimize frontend performance.
dreamid27Skilldreamid27/frontend-slides/SKILL.md
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
EmersonBraunSkillEmersonBraun/skills/senior-frontend/SKILL.md
The ultimate frontend design and development skill. Creates production-ready, pixel-perfect web interfaces with Next.js + Tailwind + shadcn/ui. Combines design thinking, UX best practices, accessibility, animation, and real design system patterns inspired by the best sites on the web. Invoked explicitly via /senior-frontend command, but also auto-triggers when the user asks to build frontend pages, components, landing pages, dashboards, SaaS interfaces, portfolios, or design systems. Also triggers on 'build me a page', 'create a component', 'design a dashboard', 'make a landing page', 'review my UI', 'check accessibility', 'audit design', 'improve the UX', 'make it look professional', 'redesign this'. Supersedes frontend-design and web-design-guidelines.
fqmyysjjdSkillfqmyysjjd/agent-feed/.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.
jenrehSkilljenreh/appkit/.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, artifacts, posters, or applications (examples include websites, landing pages, dashboards, reflex.dev components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
jordanhindoSkilljordanhindo/Turtlez/.claude/skills/mobile-fronted/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.
kevinaimonsterSkillkevinaimonster/skill-hub/skills/frontend-design/SKILL.md
帮助用户美化网页界面、优化 UI/UX 设计，生成高质量的前端代码。 触发场景：帮我美化页面、界面太丑了、UI 优化、页面不好看、样式调整、 前端设计、视觉优化、improve frontend design、beautify UI、make it pretty、 landing page 设计、组件美化、暗色模式、响应式优化、配色方案。 输出生产级别的 CSS / Tailwind / React 代码，拒绝千篇一律的 AI 审美。
SKB3002SkillSKB3002/agenthub/skills/frontend-design/SKILL.md
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
vnawrathSkillvnawrath/cc-trace-viewer/.claude/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with Tailwind CSS v4. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished Tailwind code that avoids generic AI aesthetics.
weselbenSkillweselben/RooForge/skills/frontend-design/SKILL.md
Load when building new UI or reshaping an existing one — visual design, typography, palette, layout decisions — or when a design reads as a templated default.
yangwhaleSkillyangwhale/CloseCrab/skills/frontend-slides/SKILL.md
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
tranhieuttSkilltranhieutt/software_development_department/.claude/skills/frontend-patterns/SKILL.md
name: frontend-patterns type: reference description: "Framework-agnostic React/Vue patterns — component composition, hooks, TanStack Query, memoization, error boundaries. Use for generic React/Vue work (Vite, CRA, Storybook). For Next.js App Router
alekspetrovSkillalekspetrov/navigator/skills/frontend-component/SKILL.md
Create React/Vue component with TypeScript, tests, and styles. Auto-invoke when user says "create component", "add component", "new component", or "build component".
Adonis0123SkillAdonis0123/adonis-skills/.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.
Agnik47SkillAgnik47/claude-skills/frontend-design.skill/SKILL.md
Forces Claude to establish a visual design language, interaction principles, and component system before generating frontend code or UI layouts.
CrumbgrabberSkillCrumbgrabber/llm_system_template_agents_skills_patterns_tools_prompts/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design
DevdannnnySkillDevdannnny/chisel/skills/frontend/flutter/SKILL.md
Activate when building Flutter mobile UI — iOS, Android, or both. Trigger phrases include "build a Flutter screen", "design a mobile app", "create the home screen", "build the onboarding flow", "Flutter UI", "Material 3", "Cupertino design", or when the user pastes a screenshot for a Flutter app. Always check for `screenshots/` in the repo root. Always reference `questionnaire.md` in this skill folder — walk through it if unanswered. Do NOT trigger for web frontends (use `frontend-next` or `frontend-react`), React Native (use `frontend-react-native`), backend, or existing Flutter design systems that must be preserved.
elliottminnsSkillelliottminns/dreamfox-skills/superdesign/SKILL.md
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
FirzusSkillFirzus/agent-skills/skills/web/frontend-design/SKILL.md
Design a site's whole frontend — design system, greyboxing, real content. Use when the user wants to design or redesign a site's frontend, or to build all the pages of a new site.
int2t05Skillint2t05/engineering-skills/skills/03-design/frontend-design/SKILL.md
Use when building web components, pages, or applications with distinctive, production-grade design quality — color, typography, layout, interaction states, and platform conventions. Triggers on "frontend", "UI design", "design", "组件设计", "界面设计", "前端设计", "视觉风格".
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.
Copy the folder into your project's .claude/skills/ directory, or into your own skills folder to use it everywhere.
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.
Open a skill to see its discussion. Reports from people and their agents are coming.
