ysyecustSkillfrontend-patterns
ysyecust/everything-claude-code/.agents/skills/frontend-patterns/SKILL.md
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
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 17Worked for most · soon
ysyecustSkill
fimokleiSkillfrontend-patterns
fimoklei/pm-ai-playbook/skills/frontend-skills/frontend-patterns/SKILL.md
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
talayashSkillfrontend-patterns
talayash/agentrium/.claude/skills/frontend-patterns/SKILL.md
React/TypeScript/xterm.js patterns for Agentrium frontend
ai4brands-designSkillfrontend-design
ai4brands-design/claude-skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboards, or frontend applications.
ai4brands-designSkillfrontend-slides
ai4brands-design/claude-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.
ai-champions-hubSkillfrontend-slides
ai-champions-hub/skills/skills/frontend-slides/SKILL.md
Create beautiful HTML/CSS presentation decks from topics, outlines, or source content. Use when generating slides, pitch decks, visual presentations, or converting deck ideas into a single HTML file.
AnonymXXXSkillfrontend-design
AnonymXXX/codex-harness-engineering/.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.
AnthonyPoschenSkillfrontend-design
AnthonyPoschen/agent-skills/skills/frontend-design/SKILL.md
Design, build, restyle, or review polished frontend interfaces for web apps, dashboards, tools, landing pages, components, and responsive workflows. Use whenever a request involves frontend visual design, layout, styling, UI hierarchy, interface polish, design systems, color palettes, typography, color schemes, prefers-color-scheme, dark and light themes, responsive behavior, or making an existing web experience more usable and distinctive. Also use for motion, elevation, accessibility, and design critique. Apply it to both new screens and focused UI improvements, even when the user asks only for code. Avoid templated AI aesthetics. When designing or reviewing UI, visually inspect the running interface in both dark and light themes with browser-use or computer-use tools.
aps08Skillfrontend-design
aps08/fullstack-clean-architecture/.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.
CODE-SAURABHSkillfrontend-design
CODE-SAURABH/OpenSkills/frontend-design/SKILL.md
Design and implement distinctive, production-ready web interfaces. Use when creating or substantially redesigning a page, component, dashboard, marketing site, or product UI; when choosing visual direction, typography, layout, responsive behavior, states, or accessibility; or when an existing interface feels generic, inconsistent, or poorly structured.
CreamyLongSkillfrontend-design
CreamyLong/quill/skills/public/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.
csiddhant796-blipSkillsenior-frontend
csiddhant796-blip/claude-skills-collection/senior-frontend/SKILL.md
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
damacusSkillfrontend-design
damacus/agent-skills/skills/frontend-design/SKILL.md
Create polished frontend interfaces and components with strong visual design. Use when building websites, dashboards, React components, or styling web UI.
davidvornholtSkillfrontend-design
davidvornholt/mailbox/.agents/skills/frontend-design/SKILL.md
Use when creating or visually styling a web interface. Establishes a deliberate visual direction before implementation.
DonggangChenSkillfrontend_design
DonggangChen/antigravity-agentic-skills/frontend_design/SKILL.md
Premium/creative UI design. ⚠️ Use for Distinctive, memorable interface. For basic UI → design-patterns.
dqtx760Skillfrontend-slides
dqtx760/skills-manage/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.
edorabma9304Skillfrontend-design
edorabma9304/Claude-Skill-by-Ozolab-Indonesia/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.
ForgeyClapSkillfrontend-design
ForgeyClap/claude-forge/.claude/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.
gaoyu06Skillfrontend-design
gaoyu06/harness/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.
garthcodesSkillfrontend-expert
garthcodes/claude-skills/skills/frontend-expert/SKILL.md
Expert at building front-end features using Hotwire (Turbo + Stimulus), ViewComponents, and Tailwind CSS. Use when user asks to create interactive UI, build components, add Stimulus controllers, implement responsive designs, or work with Turbo Frames/Streams. Specializes in Rails 8 front-end patterns with accessibility and mobile-first design.
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.