KbWenSkillfrontend-patterns
KbWen/agentic-os/.agents/skills/frontend-patterns/SKILL.md
Apply frontend conventions when components, pages, forms, or client state change.
Claude skills and agent skills
Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
Best matches · from page 12Worked for most · soon
KbWenSkill
MicrosoftSkillfrontend-ui-dark-ts
microsoft/skills/.github/plugins/azure-sdk-typescript/skills/frontend-ui-dark-ts/SKILL.md
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
EthanYoQSkillfrontend-design
EthanYoQ/Skill-hub/skills/03-frameworks/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
sukirman1901Skillfrontend-expert
sukirman1901/frontend-expert/SKILL.md
Chat-first frontend UI quality suite — 33 skills across UI Quality, Responsive, Ship FE, and Depth pillars. Token decision tree, compliance gates, anti-AI-slop, motion vocabulary (12 families), marketing landing recipes, and quality loop. Auto-loads on any UI/build/audit/polish request — no slash commands needed.
sukirman1901Skillfrontend-expert
sukirman1901/frontend-expert/skills/frontend-expert/SKILL.md
Frontend Expert suite for shipping product web UI — judgment, tokens, responsive, motion vocabulary, anti-AI-slop, shell chrome, forms/data, a11y, testing, and polish loop. Use when building or auditing dashboards, settings, SaaS surfaces, or when the user asks for Frontend Expert / design-system-enforcer quality. Chat-first: map intent to the suite skills; do not wait for slash commands.
yinqd3Skillfrontend-slides
yinqd3/workbuddy-skills/frontend-slides/SKILL.md
创建精美的 HTML 演示文稿，支持从零创建、PPTX 转网页、或增强已有 HTML 演示。零依赖单文件，固定 16:9 比例，34 种设计模板。用户说要"做PPT""做演示文稿""创建slides""转换PPTX"时使用。
SentrySkillfrontend-data-fetching
getsentry/sentry/.agents/skills/frontend-data-fetching/SKILL.md
Fetch data in Sentry's frontend with TanStack Query and apiOptions. Use when adding or editing React code in static/ that calls the API — useQuery/useMutation/useInfiniteQuery, apiOptions, queryOptions/mutationOptions, fetchMutation, reading response headers/pagination, or conditional fetching. Trigger on "fetch data", "add an API call", "useQuery", "useMutation", "apiOptions", "queryFn", "pagination headers", "X-Hits", or "why is my query type wrong".
SentrySkillmigrate-frontend-forms
getsentry/sentry/.agents/skills/migrate-frontend-forms/SKILL.md
Guide for migrating forms from the legacy JsonForm/FormModel system to the new TanStack-based form system.
aiatelieSkillfrontend-design
aiatelie/ai-atelie/.claude/skills/frontend-design/SKILL.md
Aesthetic and convention guide for editing AI Atelie's own chrome — the editor, canvas frame, toolbars, sidebars, dialogs, settings, projects screen. Use whenever the diff touches `web/src/` (especially `*.module.css`, `index.css`, `styles/themes.css`, `lib/theme.ts`) or any user-facing component on the host app. Opts into the canonical craft rulebook at `atelier/` and layers the host-app-specific posture (two-axis theme×design system, warm-cream + Claude rust, restraint over flourish) on top. NOT for user-generated designs inside the canvas — those use the product skill at `skills/frontend-design/`.
aiatelieSkillfrontend-design
aiatelie/ai-atelie/skills/frontend-design/SKILL.md
Aesthetic direction for designs outside an existing brand system
alphaparkincSkillfrontend-design
alphaparkinc/openclaw-skills/frontend-design/SKILL.md
name: frontend-design description: 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
jscraikSkillfrontend-design
jscraik/Agent-Skills/Skills/agent-ops/frontend-design/SKILL.md
Analyze ambiguous frontend design requests and route the right UI owner. Use this skill when broad design intent needs classification before implementation.
kensaurusSkilldesign-frontend
kensaurus/cursor-kenji/skills/design-frontend/SKILL.md
Create a new production-grade UI from scratch, not a polish pass. Use when "build this UI", "design this page", or "new dashboard layout". Polish → enhance-web-ui. Landing → enhance-web-landing. Redesign → enhance-web-redesign.
lin037Skillfrontend-design
lin037/quiet-archive/.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 for this blog project. Generates creative, polished code that avoids generic AI aesthetics and respects the project's content / API contracts.
lotfb86Skillfrontend-design
lotfb86/web-design-skills/01-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.
nikzlabsSkillfrontend-design:frontend-design
nikzlabs/shipit/.claude/skills/frontend-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.
PIXARTSeuSkillfrontend-design
PIXARTSeu/Synapse/.agents/skills/frontend-design/SKILL.md
Component-level frontend craft toolkit with 20 iterative design commands (/critique, /audit, /normalize, /polish, /harden, /animate, /colorize, /distill, /typeset, /arrange, /delight, /clarify, /optimize). Use to refine, critique, or polish EXISTING UI components and pages — spacing, typography, motion, states, micro-interactions — or to run a specific refinement command. For generating a whole new page from a brief use hallmark; for a data-backed design system use ui-ux-pro-max.
YassimbaSkillfrontend-slides
Yassimba/loom/skills/frontend-slides/SKILL.md
Build a self-contained HTML slide deck that runs in the browser. Use when the user wants a presentation, slides for a talk or a pitch, a PPT/PPTX converted to web, or an existing HTML deck improved.
CloudflareSkillfrontend-conventions
cloudflare/cloudflare-os/.agents/skills/frontend-conventions/SKILL.md
Use for creating, modifying, moving, or reviewing React frontend code anywhere in packages/*, including Workshop pages, gatekeeper management apps, shared UI, components, hooks, forms, interactions, styling, accessibility, and frontend tests.
alvinindraSkillmodern-frontend
alvinindra/modern-frontend-skills/SKILL.md
Awwwards-grade premium frontend pack. Picks one of six purpose-built directions (cinematic-scroll, motion-bento, publication, nightside, modernist-grid, considered-modern), then layers the Emil Kowalski craft canon on top. Activates on requests for landing pages, hero sections, portfolios, agency sites, SaaS dashboards, product showcases, feature sections, marketing pages, scrolltelling, narrative pacing, immersive launches, or any UI that should feel premium, editorial, cinematic, dark, moody, refined, taste-driven, or "stunning". Trigger on Awwwards, SOTD, SOTY, Louis Paquet, Locomotive, TUX Creative, Emil Kowalski, Sonner, Vaul, premium UI, conversion-grade SaaS, magnetic button, scroll reveal, parallax, world-class, design engineering. ALWAYS use this instead of the generic frontend-design skill for premium / cinematic / Awwwards-quality work.
About skills
What is a Claude skill?
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.
How do I use one I find here?
Copy the folder into your project's .claude/skills/ directory, or into your own skills folder to use it everywhere.
What do the warnings mean?
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.
Which skills worked for people?
Open a skill to see its discussion. Reports from people and their agents are coming.