Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
rainmancswh-dotSkillrainmancswh-dot/claude-skills/frontend-test/SKILL.md
Automated frontend component testing with self-healing loop. Scans components, infers interaction specs, generates Vitest tests, auto-fixes failures in background. Supports React / Vue / Next.js. Use /frontend-test to trigger.
xopcaiSkillxopcai/xopc/skills/creative/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces, pages, components, dashboards, and HTML/CSS layouts.
vipulgupta2048Skillvipulgupta2048/codex-skills/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use when building or refining web components, pages, or apps (HTML/CSS/JS/React) with bold aesthetics, purposeful layouts, motion, and accessibility. Avoid generic AI-looking output.
Bbar0n234SkillBbar0n234/learnflow-ai/.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.
ClineSkillcline/skills/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.
FranRomSkillFranRom/pupila/.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.
kumaran-isSkillkumaran-is/claude-code-onboarding/.claude/skills/frontend-design/SKILL.md
Creative frontend design skill. Builds distinctive, production-grade interfaces with intentional aesthetics. Includes DFII scoring (go/no-go gate before coding), mandatory Design Thinking Phase (Purpose→Tone→Differentiation Anchor), Required Output Structure (Design Direction Summary, Design System Snapshot, Differentiation Callout), and Operator Checklist. Use when building or styling any web/mobile UI component, page, or dashboard.
shinprSkillshinpr/claude-code-workflows/skills/frontend-ai-guide/SKILL.md
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.
heyhank-appSkillheyhank-app/heyhank/.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. Generates creative, polished code that avoids generic AI aesthetics.
enbyaugustSkillenbyaugust/zacs-claude-skills/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.
sabahattinkSkillsabahattink/antigravity-fullstack-hq/skills/frontend-design/SKILL.md
UI component design principles, visual hierarchy, spacing, typography for Next.js apps. Use when building or reviewing React/Next.js components, setting up design tokens, or establishing visual consistency.
HK-hubSkillHK-hub/AgentSkills/frontend-react/SKILL.md
Professional React development skill covering Next.js, React Server Components, Tailwind CSS, and the React ecosystem. Use this skill when building modern React applications, implementing Next.js features, creating UI components with shadcn/ui, or working with complex state management.
HK-hubSkillHK-hub/AgentSkills/frontend-skill/SKILL.md
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
DataCoveySkillDataCovey/nornweave/.cursor/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.
mshadmanrahmanSkillmshadmanrahman/claude-for-designers/.claude/skills/frontend-design/SKILL.md
Build an interface from the brief and the tokens rather than from a guess. Use only after grill-me, design-brief, information-architecture and design-tokens have run.
Fandry96SkillFandry96/k3-agentic-skills/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...
VoDaiLoczSkillVoDaiLocz/kilo-kit-mcp/skills/design/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.
BlockSkillblock/agent-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.
IncomeStreamSurferSkillIncomeStreamSurfer/claude-skills-collection/skills/frontend-design/SKILL.md
Generates distinctive, high-quality frontend designs avoiding generic AI aesthetics. Use when building landing pages, UI components, dashboards, web apps, or any frontend/web design task.
nattergabrielSkillnattergabriel/frontend-craft/skills/frontend-craft/SKILL.md
Design and build professional, distinctive web frontends, and avoid or remove generic AI-generated design ("slop"). Use this skill whenever creating or styling any web UI, including websites, landing pages, dashboards, web apps, React or Vue components, HTML/CSS pages, artifacts, prototypes, and email templates. Also use it when auditing, unslopping, reviewing, or restyling an existing frontend or codebase, when a design looks generic, templated, or AI-generated, or when the user asks to make something look better, more polished, or more professional, even if they never say the word design or slop. Covers design direction, typography, color, layout, spacing, motion, copy tone, accessibility, and a final anti-slop audit, for new builds and for retrofitting existing frontends.
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.
