Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
JuankCadavidSkillJuankCadavid/akili-specs/.claude/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, dashboards, or frontend applications.
xcrrrSkillxcrrr/claude-skills/skills/design/frontend-design/SKILL.md
Use this skill when specifying, designing, or documenting UI components, layouts, and design systems for frontend implementation. Trigger phrases: 'design this UI component', 'create a responsive layout', 'spec the CSS for', 'design system for'. Do NOT use for backend development, server-side logic, data engineering, or writing server code.
travisjneumanSkilltravisjneuman/.claude/skills/frontend-enhancer/SKILL.md
This skill should be used when enhancing the visual design and aesthetics of web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. REQUIRES ui-research skill first. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.
OvichSkillOvich/charrette/skills/frontend-design/SKILL.md
Use before building or changing any screen (a new page, dialog, panel, or a visual rework), to design it first as a mockup or prototype in the project's own design language, which the skill extracts from the codebase and writes down once. Not for implementing the screen and not for reviewing code quality (frontend-review).
OvichSkillOvich/charrette/skills/frontend-review/SKILL.md
Use when reviewing the quality of React code, readability, organisation, naming, component structure, rendering and performance, on a diff, a path or a whole codebase. Not for correctness bug-hunting, and not for design principles across languages (code-design-review).
ucsandmanSkillucsandman/claude-skills/frontend-verify/SKILL.md
Verify frontend changes end to end after editing a web app, instead of manually clicking through pages. Use this whenever you have changed UI code and need to confirm nothing broke: "verify my frontend", "check the site after these edits", "did my UI break", "did my changes break anything", "make sure these routes still work", "smoke test the app", "check for console errors", "validate the pages I touched". Works with Next.js (app and pages router), React, Vite, and any local dev server. Built to be token cheap: it reads console errors and failed network requests first and writes full page state to disk, so it only pulls a snapshot or a screenshot into context when a route actually fails. Use it before saying a frontend change is done.
zhangziyana007-sudoSkillzhangziyana007-sudo/skiller-community/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.
CloudflareSkillcloudflare/vibesdk/worker/agents/think/skills/frontend-design-saas/SKILL.md
S-tier SaaS dashboard and product UI reference. Use this skill when building application shells, data tables, settings panels, billing pages, dashboards, auth flows, admin tools, or any internal/customer-facing SaaS product UI. Inspired by Stripe, Linear, Vercel, Airbnb, Notion. Covers neutral-led design tokens, sidebar+content shells, dense data UIs, form-heavy configuration pages, command palettes, empty states, and the accessibility (WCAG AA+) bar these products clear.
mturacSkillmturac/everything-openai-codex/.agents/skills/frontend-patterns/SKILL.md
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
mizchiSkillmizchi/skills/frontend-review-ci/SKILL.md
Use when CI is slow (>10 min), flaky, or the user asks to optimize GitHub Actions for a frontend project. Analyzes `gh run list` history, identifies bottleneck steps, proposes sharding / cache / concurrency improvements. Runs `scripts/audit-ci.sh`.
iflytekSkilliflytek/skillhub/.agents/skills/frontend-conventions/SKILL.md
Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.
endearqbSkillendearqb/endearqb-skills/skills/endearqb-frontend-dataviz/SKILL.md
根据用户提供的数据生成符合 Storytelling with Data（SWD）原则的可视化图表。 触发条件：用户提供数据并要求"画图"、"生成图表"、"可视化"、"做个图"、 "帮我展示这些数据"，或上传 CSV/Excel/表格数据并希望看到图形化呈现时， 必须使用本 skill。即使用户只说"帮我分析这些数据"而数据适合可视化， 也应主动使用本 skill 生成图表。
mit-networkSkillmit-network/everything-claude-code/.agents/skills/frontend-patterns/SKILL.md
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
Akindu23SkillAkindu23/my-agent-skills/skills/frontend-design/SKILL.md
Distinctive, intentional visual design when building new UI or reshaping an existing one.
alfredangSkillalfredang/ai-cms/.agents/skills/frontend-design/SKILL.md
Project-locked frontend design skill for the Tertiary Infotech CMS. Enforces a dark, sci-fi/robotics aesthetic matching www.tertiaryrobotics.com — Exo 2 + Inter typography, near-black backgrounds, cyan/purple/amber accents, animated glow gradients, hexagonal/grid motifs. Use whenever building or refining ANY UI in this repo.
arnabdeypolimiSkillarnabdeypolimi/claude_code_setup/.claude/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context.
b1mangoSkillb1mango/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, 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.
bolasblackSkillbolasblack/claude-skills/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use when building 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.
costiashSkillcostiash/CognivAgent/.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.
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.
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.
