Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
Significant-GravitasSkillSignificant-Gravitas/AutoGPT/.claude/skills/write-frontend-tests/SKILL.md
Analyze the current branch diff against dev, plan integration tests for changed frontend pages/components, and write them. TRIGGER when user asks to write frontend tests, add test coverage, or 'write tests for my changes'.
rwliebsSkillrwliebs/Dossier/.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.
GitHubSkillgithub/awesome-copilot/skills/premium-frontend-ui/SKILL.md
A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.
zhou2030109-glitchSkillzhou2030109-glitch/Remit/.agents/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend UI with an intentional aesthetic direction, purposeful layouts, meaningful motion, and strong accessibility. Follow the existing project's framework and conventions; consider React, Next.js, or vanilla HTML/CSS/JS for new projects without an established stack.
duongthinh03Skillduongthinh03/portfolio/.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, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guidelines first using ai-multimodal analysis, then implements code following those guidelines. Generates creative, polished code that avoids generic AI aesthetics.
duongthinh03Skillduongthinh03/portfolio/.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, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guidelines first using ai-multimodal analysis, then implements code following those guidelines. Generates creative, polished code that avoids generic AI aesthetics.
DevdannnnySkillDevdannnny/chisel/skills/frontend/next/SKILL.md
Activate when building Next.js (App Router or Pages Router) web frontends — landing pages, marketing pages, product UI, dashboards, portfolios. Trigger phrases include "build a Next.js page", "design a Next.js landing page", "create the UI in Next", "build the marketing site", "App Router", "server components", or when the user pastes a screenshot for a Next.js 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-react` for non-Next React (Vite, CRA, Remix). Do NOT trigger for Flutter (use `frontend-flutter`), React Native (use `frontend-react-native`), backend, or existing design systems that must be preserved.
langgeniusSkilllanggenius/dify/.agents/skills/frontend-code-review/SKILL.md
Use only when the user explicitly requests a review or audit of frontend code under `web/` or `packages/dify-ui/`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, or backend-only code.
GoogleSkillgoogle/capsem/skills/frontend-design/SKILL.md
Capsem frontend design system. Use when building UI components, styling views, choosing colors, or working with Svelte 5 runes and the component library.
tranhieuttSkilltranhieutt/software_development_department/.claude/skills/frontend-design/SKILL.md
name: frontend-design type: workflow description: "Designs frontend UI architecture including component hierarchy, state management strategy, design tokens, and accessibility requirements. Use when starting frontend design or when the user
tranhieuttSkilltranhieutt/software_development_department/.claude/skills/senior-frontend/SKILL.md
name: senior-frontend type: reference description: "Next.js App Router specific patterns — Server Components, Client Components boundary, parallel fetching, bundle analysis, a11y. Use ONLY for Next.js 13+ App Router projects
roedyrustamSkillroedyrustam/vibes-plug/skills/senior-frontend/SKILL.md
Frontend development for React 19, Next.js 15, TypeScript, and Tailwind CSS v4 / Pengembangan frontend dengan React 19, Next.js 15, TypeScript, dan Tailwind CSS v4.
laguaguSkilllaguagu/claude-code-nextjs-skills/skills/frontend-design/SKILL.md
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
AI-UnleashedSkillAI-Unleashed/Claude-Skills/frontend-design-shadcn/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.
MicrosoftSkillmicrosoft/vscode-agent-lab-soc-ops/.github/skills/frontend-design/SKILL.md
Use this skill when the user asks to design/build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
tam159Skilltam159/next-role/.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.
wolverin0Skillwolverin0/claude-skills/skills/frontendgame/SKILL.md
PRIMARY skill for BUILDING or REDESIGNING app/product UI — the default entry point whenever the user starts a new interface or wants to improve/rework an existing one. Create, critique, reverse-engineer, and implement premium mobile-first product interfaces with advanced UX patterns, design-system discipline, and motion engineering. Use whenever the user asks to build/make/design/redesign/improve a UI, screen, page, dashboard, or component — app UI, mobile dashboards, fintech-style screens, screenshot-to-code, interaction design, scroll animations, sticky card stacks, animated tabs, bottom navigation, React/Next.js frontend, React Native/Expo, Flutter — or wants to avoid generic AI-looking UI. Strongly prefer this skill when screenshots or references are provided. For deep animation-feel work call emil-design-eng, for auditing an existing UI call impeccable, for palettes/fonts/style references call ui-ux-pro-max.
is-boSkillis-bo/fullstack-forge-skill/.agents/skills/forge-frontend/SKILL.md
Use automatically for frontend implementation and review, including components, pages, layouts, responsive behavior, React, Next.js, browser state, rendering, hydration, network behavior, and measured frontend performance.
is-boSkillis-bo/fullstack-forge-skill/skills/forge-frontend/SKILL.md
Use automatically for frontend implementation and review, including components, pages, layouts, responsive behavior, React, Next.js, browser state, rendering, hydration, network behavior, and measured frontend performance.
mikeandyerSkillmikeandyer/claude-skills-frontend-logic-share/frontend.core/SKILL.md
跨 skill 共用的 reference 庫。包含 CiC 便條紙格式、Activity 語法、Handler 分類對照表、失敗層級模型等所有 frontend.* skill 共用的模式定義。不直接觸發，由其他 skill Read references/ 中的檔案。
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.
