Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
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。
JoshBuildAppSkillJoshBuildApp/launchkit/skills/web-frontend/SKILL.md
Use when writing or reviewing the frontend code of a website — HTML/CSS/JS structure, component architecture, responsive layout, and code quality standards. Triggers: "build the frontend", "code this page/component", "make it responsive", "clean up the frontend code", "what stack should I use", implementing a design in code.
PaulRBergSkillPaulRBerg/agent-skills/skills/frontend-design/SKILL.md
browser skill for rendered verification when available, otherwise the host's DevTools/browser tool. name: frontend-design skill-dependencies: - chromium-browser description: Use when creating or substantially redesigning web interfaces, landing
stark-contrastSkillstark-contrast/skills/skills/stark-frontend/SKILL.md
This skill should be used for web front-end accessibility work — whenever the user mentions "accessibility", "a11y", "WCAG", "ARIA", "screen reader", "keyboard navigation", "focus management", or "semantic HTML", asks to fix accessibility violations on a web / URL / code / Storybook asset in Stark, or wants to set up accessibility scanning for a website or front-end codebase. Use it to turn Stark violations into correct, minimal HTML/ARIA fixes and to tell real WCAG failures apart from best-practice cleanup. Prefer this skill for any web UI accessibility task even if the user doesn't say "Stark".
flazouhSkillflazouh/acepe/.github/skills/frontend-design/SKILL.md
Build web interfaces with genuine design quality, not AI slop. Use for any frontend work - landing pages, web apps, dashboards, admin panels, components, interactive experiences. Activates for both greenfield builds and modifications to existing applications. Detects existing design systems and respects them. Covers composition, typography, color, motion, and copy. Verifies results via screenshots before declaring done.
xu-xiangSkillxu-xiang/everything-claude-code-zh/.agents/skills/frontend-patterns/SKILL.md
React、Next.js、状态管理（State Management）、性能优化（Performance Optimization）及 UI 最佳实践的前端开发模式。
mturacSkillmturac/everything-openai-codex/.agents/skills/frontend-slides/SKILL.md
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
mturacSkillmturac/everything-openai-codex/.cursor/skills/frontend-slides/SKILL.md
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract 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.
