Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
julianoczkowskiSkilljulianoczkowski/designer-skills/frontend-design/SKILL.md
Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional attention to aesthetic details and creative choices that avoid generic AI output.
voly-codesSkillvoly-codes/voly/.claude/skills/voly-frontend/SKILL.md
Guide for working on VOLY Svelte 5 UI — components, API client, styling. Use this skill for any frontend changes in ui/.
dcSparkSkilldcSpark/shinkai-local-ai-agents/.cursor/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.
notqueSkillnotque/vexjoy-agent/skills/frontend/frontend-slides/SKILL.md
Browser-based HTML presentation generation.
syahiidkamilSkillsyahiidkamil/Software-Engineer-AI-Agent-Atlas/.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, 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.
idexalSkillidexal/idexal-skills/frontend-dev/SKILL.md
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
mikeandyerSkillmikeandyer/claude-skills-frontend-logic-share/frontend.red/SKILL.md
Frontend 紅燈實作執行器。對單一 @frontend .feature 執行完整紅燈流程： Schema Analysis（環境就緒）→ Step Template（骨架生成）→ Red Implementation（實作測試程式碼）。 透過 arguments.yml 的 FRAMEWORK 自動路由框架變體。 當 /frontend.control-flow 呼叫紅燈階段，或使用者說「frontend red」「紅燈」時觸發。
mikemai2awesomeSkillmikemai2awesome/agent-skills/skills/frontend-a11y/SKILL.md
Write minimal, accessible web UI without over-engineering, adapting to whatever stack the project uses — React, Vue, Svelte, Angular, web components, or plain HTML. Use this skill on every project and every task that writes or reviews markup or components, builds forms, adds interactive elements like buttons, dialogs, accordions, or tabs, or audits code for accessibility — even when the user never mentions accessibility, and even inside a framework, CMS, or design system. It's non-negotiable regardless of project type, stack, or deadline. About to reach for ARIA attributes, a dialog library, a focus-trap package, or a headless UI component? Use this skill first.
JetBrainsSkillJetBrains/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.
databrickslabsSkilldatabrickslabs/ontobricks/.claude/skills/frontend-design/SKILL.md
Use when creating or changing OntoBricks templates, page layouts, tabs, cards, forms, or responsive UI behavior.
mizchiSkillmizchi/skills/frontend-expert/SKILL.md
Frontend architect perspective for the weekly review. Focuses on component design, state management, DOM usage, developer experience, and build configuration. Reads raw JSON from other audit scripts and produces an opinionated perspective report.
AndrewDrygaSkillAndrewDryga/emisar/.claude/skills/design-frontend/SKILL.md
Put on the pragmatic front-end hat for the emisar Phoenix UI and marketing HEEx — build correct LiveView/operator UI with CoreComponents and LiveTable, or execute public marketing pages from creative direction with server-rendered HEEx + Tailwind. Use when implementing or changing a LiveView, HEEx template, component, operator UI, or controllers/marketing_html page in apps/emisar_web.
MicrosoftSkillmicrosoft/MicroHack/03-Azure/01-04-AI/01_Agentic_SDLC/.github/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.
YYH211SkillYYH211/Claude-meta-skill/frontend-design/SKILL.md
Creates unique, production-grade frontend interfaces with exceptional design quality. Use when user asks to build web components, pages, materials, posters, or applications (e.g., websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI). Generates creative, polished code and UI designs that avoid mediocre AI aesthetics.
loulanyueSkillloulanyue/awesome-claude-notes/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.
AkaraChenSkillAkaraChen/aghub/.agents/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context.
MooseDesign1SkillMooseDesign1/DDD-DesignDrivenDevelopment/.claude/skills/exec-frontend/SKILL.md
Internal frontend engineering agent for the executor. Writes frontend code for one task at a time using design system components, wiring to APIs, and implementing all states from the design handoff. Called by exec-feature during Stage 3. Never invoked directly by the user.
reachmeshailesh-boopSkillreachmeshailesh-boop/codex-skill-pack/skills/frontend-ux-ui/SKILL.md
Build production-grade UX/UI (flows + components) with strong aesthetics, accessibility, and engineering quality. Optimized for Next.js + Tailwind + shadcn/ui + TypeScript.
0x61ASkill0x61A/frontend-dev-skill/SKILL.md
FrontendDev — unique, SEO-complete frontend design and build skill that breaks the generic AI look. Every site gets a one-off Design DNA (named palette, type pair, layout concept, signature element) validated against a banned-pattern catalog of known AI tells, built with full SEO integration (keyword research via Semrush MCP or WebSearch fallback, semantic HTML, schema.org JSON-LD, sitemap, Core Web Vitals budgets), and verified through a screenshot self-critique loop. Analyzes user-supplied reference sites (visual + code token extraction into a Reference Design Brief) and sources real components from 21st.dev / shadcn/ui / Aceternity / Magic UI — always fetched live and re-skinned to the project DNA, never shipped as-is. Stack chosen per project (Next.js/React/Tailwind, plain HTML/CSS/JS, Vue/Nuxt, Astro). Triggers: unique frontend, distinctive design, landing page, marketing site, portfolio, benzersiz site, benzersiz tasarım, AI görünümü olmayan, yapay zeka gibi durmasın, referans site, bu siteye benzet, tasarım çek, 21st.dev, SEO uyumlu frontend, SEO uyumlu site.
deathrashedSkilldeathrashed/agents/.agents/skills/oma-frontend/SKILL.md
Frontend specialist for React, Next.js, Angular, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment. Use for UI, component, page, layout, CSS, Tailwind, shadcn, Angular, and RxJS work.
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.
