Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
hugobatistaSkillhugobatista/agent-skills/skills/frontend/web-frontend/SKILL.md
Use when building or modifying web frontend code. Covers Vue, Tailwind CSS, Vite, dark/light mode, responsive design, and frontend tooling. For other UI types (desktop, Qt, etc.), use the dedicated skill for that domain.
jpoindexterSkilljpoindexter/theft-kit/frontend-dev/SKILL.md
Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.
mujezSkillmujez/claude-skills/skills/frontend-react/SKILL.md
Experienced frontend React developer skill. Use when building React components, pages, or applications, implementing state management, data fetching, styling, testing, or reviewing React/TypeScript/Next.js code. Activates for any frontend development task involving React.
iliaalSkilliliaal/ai-skills/skills/react-frontend/SKILL.md
React architecture patterns, TypeScript, Next.js, hooks, and testing. Use when working with React component structure, state management, Next.js routing, Vitest, React Testing Library, or reviewing React code. For visual design and aesthetic direction, use frontend-design instead.
devantler-techSkilldevantler-tech/ksail/.agents/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.
bestdeejay-designSkillbestdeejay-design/agent-skills/skills/frontend-a11y/SKILL.md
Deep accessibility (a11y) audit of a webpage or static HTML/CSS, mapped to the full Front-End-Checklist Accessibility category (95 rules) — far beyond the ~12 basic rules in frontend-perfection. Runs offline static checks (Python stdlib, no browser/network) for structure, ARIA validity, headings, landmarks, tables, forms, media tracks, lists, and CSS signals; documents an optional Playwright+axe-core runtime runner for computed contrast, focus order, live regions, modal traps, and reflow; and lists manual screen-reader checks. Use it to audit, fix, or verify accessibility: 'accessibility audit', 'a11y check', 'wcag', 'wcag audit', 'wcag compliance', 'axe', 'contrast check', 'aria', 'screen reader test', 'keyboard navigation', 'keyboard trap', 'focus trap', 'accessibility testing', 'make it accessible', 'check this page for a11y', 'проверь доступность', 'глубокая доступность'. Also triggered when the /frontend orchestrator or mobile-frontend needs the deep a11y domain.
irahardiantoSkillirahardianto/awesome-agv/.agents/skills/frontend-design/SKILL.md
Generates distinctive, production-grade frontend interfaces and artifacts (React, Vue, HTML/CSS). Prioritizes bold aesthetics, unique typography, and motion to avoid generic designs. Use when building websites, landing pages, dashboards, posters, or when the user requests to style, beautify, or create visually striking UI.
theodo-groupSkilltheodo-group/debug-that/.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.
QinghongLinSkillQinghongLin/data2story-skill/skills/frontend-design/SKILL.md
Reusable UI/visual-design system for building polished, distinctive, multimedia-rich self-contained HTML stories. A shared reference library that the Data2Story Designer and Programmer borrow from so every blog looks intentional and editorial rather than generic. Not a pipeline stage — a design source.
zeuikliSkillzeuikli/claude-code-workspace/.claude/skills/frontend-design/SKILL.md
引導 Claude 產出高品質的前端設計，避免 AI 生成的通用風格（AI slop）。包含字型、色彩、動態、背景的設計指引。
DatabricksSkilldatabricks/devhub/.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.
AnastasiyaWSkillAnastasiyaW/codex-claude-code-config/skills/frontend/frontend-design/SKILL.md
Создание высококачественных, визуально выдающихся фронтенд-интерфейсов. Используй ВСЕГДА когда пользователь просит создать веб-страницу, компонент, лендинг, дашборд, UI-кит, форму, карточки, навигацию, анимации, или любой другой веб-интерфейс. Скилл покрывает: HTML/CSS/JS компоненты, React/Vue/Svelte, Tailwind CSS, адаптивный и мобильный дизайн, визуальные стили (glassmorphism, neomorphism, material, flat, градиенты, тёмная тема), интерактивность (drag-and-drop, анимации, hover-эффекты, transitions), верстку (Flexbox, Grid, Container Queries), производительность, доступность (WCAG/ARIA), дизайн-системы и токены. Если пользователь хочет что-то "красивое", "современное", "стильное" в вебе — обязательно используй этот скилл. НЕ используй для нативных мобильных приложений (iOS/Swift/SwiftUI, Android) — для iOS бери скилл ios-development; этот скилл только про веб-UI (браузер).
hamzafarooqSkillhamzafarooq/claude-code-starter/.claude/skills/frontend-slides/SKILL.md
Create stunning, animation-rich single-file HTML presentations from scratch or by converting a PowerPoint (.pptx) file. Use when the user wants to build a presentation, convert a PPT to web format, or create slides for a talk, pitch, or demo. Shows 3 visual style previews before building the full deck — no design experience needed.
Ilm-AlanSkillIlm-Alan/frontend-design/SKILL.md
Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.
luongnv89Skillluongnv89/skills/skills/frontend-design/SKILL.md
Build production-grade frontend interfaces with distinctive aesthetics and working code. Use for UI components, pages, or frontend features. Don't use for backend/API work or usability-only audits.
avibebuilderSkillavibebuilder/claude-prime/.claude/skills/frontend-design/SKILL.md
Builds distinctive, production-grade UIs that avoid generic AI aesthetics. Use whenever the user wants to build, restyle, or give visual direction to any interface — pages, dashboards, landing pages, components, onboarding flows, mobile screens, or design systems — even without an explicit 'design' request. Also triggers for: picking an aesthetic direction, improving the look of a dull/generic existing page, adding visual personality, or choosing colors/typography. Includes a bundled design intelligence database for concrete guidance across web (React, Next.js, Vue, Tailwind) and mobile (React Native, Flutter, SwiftUI).
KunanonJSkillKunanonJ/ai-skills-hub/.agents/skills/frontend-a11y/SKILL.md
Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.
itseffiSkillitseffi/agentic-os/.agents/skills/frontend-design/SKILL.md
Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.
AlpayCSkillAlpayC/claude-skill-set/skills/tdd-frontend/SKILL.md
Test-first discipline for UI work — the seam comes from the spec, the failing test comes before the code, the assertion describes what the user experiences. Use it when a step's behaviour is specifiable before it is built.
Hedy-AlanSkillHedy-Alan/claude-5-step-dev/dev-frontend/SKILL.md
开发流水线第 4 步：前端实现。按 API 契约开发页面、组件和状态管理， API 封装层对齐契约，所有页面覆盖加载/空/错误三态。 触发词：前端实现、写前端、实现页面、开发界面、做 UI。 输入 docs/dev/03-api-contract.md（后端已实现），产出可运行的前端， 下一步交给 /dev-integration。
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.
