Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
azentsSkillazents/azents/.claude/skills/frontend-design/SKILL.md
Frontend UX and visual design guidance for building polished product surfaces, dashboards, admin tools, workflows, and local web apps. Use when designing or reviewing UI layout, interaction flow, information hierarchy, utility copy, responsive behavior, or visual quality before implementing frontend code.
YehudaFrankelSkillYehudaFrankel/clankbrain/.claude/skills/frontend-design/SKILL.md
Commits to a bold design direction before writing a single line of CSS. Generates a complete design system — palette, font pairing, style direction, and UX rules. Triggers on "build a landing page", "design this UI", "create a component", "design system for", "new page design", "frontend design".
yoyothesheepSkillyoyothesheep/claude-skills/frontend-review/SKILL.md
Iteratively screenshot a running dev server with Puppeteer and fix UI issues until the interface matches design guidelines. Use when asked to review, polish, or QA frontend pages.
DevdannnnySkillDevdannnny/chisel/skills/frontend/react/SKILL.md
Activate when building React frontends WITHOUT Next.js — typically Vite + React, Create React App, or Remix (when used outside the App Router pattern). Trigger phrases include "build a React app with Vite", "create the UI in React", "build a React component", "Vite + React", or when the user pastes a screenshot for a non-Next React project. Always check for `screenshots/` in the repo root. Always reference `questionnaire.md` in this skill folder — walk the user through it if unanswered. Use `frontend-next` for Next.js specifically. Do NOT trigger for Flutter, React Native, backend, or existing design systems that must be preserved.
hoangNguyenAngelhackSkillhoangNguyenAngelhack/ai-agent-setup/.agents/skills/react-frontend/SKILL.md
Build React applications with Next.js or Vite, TailwindCSS, shadcn/ui, Zustand, and TanStack Query. Use when creating web UI components, pages, forms, state management, or data fetching.
ProjAnvilSkillProjAnvil/MindForge/skills/zh-cn/frontend-react/SKILL.md
专业的 React 开发技能，涵盖 Next.js、React Server Components、Tailwind CSS 和 React 生态系统。使用此技能构建现代 React 应用程序、实现 Next.js 功能、使用 shadcn/ui 创建 UI 组件，或处理复杂状态管理。
kissgyorgySkillkissgyorgy/coding-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, or applications. Generates creative, polished code that avoids generic AI aesthetics.
PracticalSwanSkillPracticalSwan/agent-skills/frontend-design/SKILL.md
Design and implement context-fit frontend interfaces with deliberate art direction, accessible interaction, responsive behavior, complete states, and rendered verification. Use when creating or substantially reworking pages, components, product workspaces, dashboards, marketing sites, editorial surfaces, commerce flows, or justified immersive experiences.
loulanyueSkillloulanyue/awesome-claude-notes/skills/frontend-patterns/SKILL.md
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
withkynamSkillwithkynam/vibecode-pro-max-kit/.claude/skills/vc-frontend-design/SKILL.md
Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.
s-hiraokuSkills-hiraoku/synapse-a2a/.agents/skills/frontend-design/SKILL.md
Guide for creating distinctive, production-grade frontend interfaces. Covers visual design systems, typography, color, motion, spatial composition, and web interface standards. Use when designing UI, establishing design systems, or reviewing visual quality of frontend code.
DigitalExplorersSkillDigitalExplorers/agent-skills/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with strong visual identity and non-generic design patterns.
jamesrochabrunSkilljamesrochabrun/skills/skills/frontend-designer/SKILL.md
Build accessible, responsive, and performant frontend components with design system best practices, modern CSS, and framework-agnostic patterns.
JAXTech-LabsSkillJAXTech-Labs/claude-code-template/skills/razor-frontend/SKILL.md
Contexto base: veja `.claude/stack-context.md` --- name: razor-frontend description: Constrói Views Razor, ViewModels, layouts e partial views para o .Web — consumindo a API REST via sem lógica de negócio
mikeandyerSkillmikeandyer/claude-skills-frontend-logic-share/frontend.green/SKILL.md
Frontend 綠燈實作者。以 Red 階段產出的失敗測試為驅動，用最小增量迭代實作， 直到所有測試通過。透過 arguments.yml 的 FRAMEWORK 自動路由框架變體。 當 /frontend.control-flow 呼叫綠燈階段，或使用者說「frontend green」「綠燈」時觸發。
ShuwanitoSkillShuwanito/SkillsMP/.claude/skills/nexus-frontend/SKILL.md
Frontend Wizard specializing in modern UIs, accessibility (WCAG), micro-frontends, and rendering performance. Use when you need UI architecture review, accessibility audits, React performance optimization, or frontend best-practice analysis.
tadoEngSkilltadoEng/web-starter/.claude/skills/frontend-craft/SKILL.md
Design, build, refactor and audit product interfaces with deliberate visual hierarchy, interaction quality, responsive behaviour and evidence from the rendered page. Use for any UI-heavy work — a new screen, a redesign, "this looks generic", "improve the layout", a dashboard, a design review — and whenever visual quality rather than wiring is the point. Modes: build, refactor, audit.
aiaiohhhSkillaiaiohhh/claude-skills-library/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.
L-X-TSkillL-X-T/ng-agentic-skills/.agents/skills/frontend-design/SKILL.md
Create distinctive, intentional frontend designs through aesthetic direction, typography, layout, and interface copy. Use when building new UI, redesigning an existing screen, or asking for visual design guidance.
wpankSkillwpank/ai/skills/frontend/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Focuses on creative direction and memorable design choices.
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.
