One search for your own team's files and the public ecosystem. See how real projects write their agent instructions, and bring the good ideas home.
FranRomSkillFranRom/pupila/.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.
kumaran-isSkillkumaran-is/claude-code-onboarding/.claude/skills/frontend-design/SKILL.md
Creative frontend design skill. Builds distinctive, production-grade interfaces with intentional aesthetics. Includes DFII scoring (go/no-go gate before coding), mandatory Design Thinking Phase (Purpose→Tone→Differentiation Anchor), Required Output Structure (Design Direction Summary, Design System Snapshot, Differentiation Callout), and Operator Checklist. Use when building or styling any web/mobile UI component, page, or dashboard.
shinprSkillshinpr/claude-code-workflows/skills/frontend-ai-guide/SKILL.md
Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates. Use when reviewing components, hooks, browser behavior, or frontend implementation completeness.
heyhank-appSkillheyhank-app/heyhank/.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. Generates creative, polished code that avoids generic AI aesthetics.
enbyaugustSkillenbyaugust/zacs-claude-skills/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. Generates creative, polished code that avoids generic AI aesthetics.
sabahattinkSkillsabahattink/antigravity-fullstack-hq/skills/frontend-design/SKILL.md
UI component design principles, visual hierarchy, spacing, typography for Next.js apps. Use when building or reviewing React/Next.js components, setting up design tokens, or establishing visual consistency.
HK-hubSkillHK-hub/AgentSkills/frontend-react/SKILL.md
Professional React development skill covering Next.js, React Server Components, Tailwind CSS, and the React ecosystem. Use this skill when building modern React applications, implementing Next.js features, creating UI components with shadcn/ui, or working with complex state management.
HK-hubSkillHK-hub/AgentSkills/frontend-skill/SKILL.md
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
DataCoveySkillDataCovey/nornweave/.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.
mshadmanrahmanSkillmshadmanrahman/claude-for-designers/.claude/skills/frontend-design/SKILL.md
Build an interface from the brief and the tokens rather than from a guess. Use only after grill-me, design-brief, information-architecture and design-tokens have run.
Fandry96SkillFandry96/k3-agentic-skills/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, dashboard...
VoDaiLoczSkillVoDaiLocz/kilo-kit-mcp/skills/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.
BlockSkillblock/agent-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. Generates creative, polished code that avoids generic AI aesthetics.
IncomeStreamSurferSkillIncomeStreamSurfer/claude-skills-collection/skills/frontend-design/SKILL.md
Generates distinctive, high-quality frontend designs avoiding generic AI aesthetics. Use when building landing pages, UI components, dashboards, web apps, or any frontend/web design task.
nattergabrielSkillnattergabriel/frontend-craft/skills/frontend-craft/SKILL.md
Design and build professional, distinctive web frontends, and avoid or remove generic AI-generated design ("slop"). Use this skill whenever creating or styling any web UI, including websites, landing pages, dashboards, web apps, React or Vue components, HTML/CSS pages, artifacts, prototypes, and email templates. Also use it when auditing, unslopping, reviewing, or restyling an existing frontend or codebase, when a design looks generic, templated, or AI-generated, or when the user asks to make something look better, more polished, or more professional, even if they never say the word design or slop. Covers design direction, typography, color, layout, spacing, motion, copy tone, accessibility, and a final anti-slop audit, for new builds and for retrofitting existing frontends.
felvieiraSkillfelvieira/claude-skills-fv/skills/77-frontend-slides/SKILL.md
Skill de geração de apresentações (decks) em HTML single-file, com palco fixo 1920×1080 que escala uniformemente (letterbox, nunca reflow). Antes de escrever o deck inteiro, gera 3 previews reais de uma única slide (preset seguro, template ousado, curinga) para o usuário escolher por imagem, não por descrição em prosa. Cobre 12 presets nomeados, exporta para PDF via Playwright e deploy no Vercel. Trigger em: "criar uma apresentação", "gera os slides", "deck de apresentação", "slides em HTML", "apresentação para pitch", "slide deck", "converte esse PPTX", "apresentação estilo Keynote", "deck single-file", "slides fixos 16:9", "apresentação sem usar PowerPoint", "exportar essa apresentação em PDF".
bybren-llcSkillbybren-llc/safe-agentic-workflow/.agents/skills/frontend-patterns/SKILL.md
Frontend patterns for modern web frameworks, component libraries, auth flows, and analytics. Use when building UI components, creating pages, implementing auth flows, adding analytics events, or working with component libraries. Do NOT use for API-only or backend-only changes.
bybren-llcSkillbybren-llc/safe-agentic-workflow/.claude/skills/frontend-patterns/SKILL.md
Frontend patterns for Next.js App Router, Clerk auth, shadcn/Radix UI, and PostHog analytics. Use when building UI components, creating pages, implementing auth flows, or adding analytics events. Ensures consistent UX patterns and accessibility standards.
alekoiiSkillalekoii/claude-skills/frontend-setup/SKILL.md
Interactive multi-level skill for scaffolding frontend projects from source. Use when user wants to: (1) Create a new frontend project (web, mobile, desktop, or cross-platform) (2) Set up a React, Vue, Svelte, Angular, Flutter, React Native, Electron, or Tauri project (3) Configure shadcn/ui with custom styling, colors, fonts, and components (4) Set up architecture patterns (Bulletproof React, Clean Architecture, Feature-based, etc.) (5) Add state management, data fetching, forms, validation, testing, or tooling
b1rdmaniaSkillb1rdmania/claude-brand-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. Generates creative, polished code that avoids generic AI aesthetics.
Plain text files in a repository that tell a coding agent how the project works: commands to run, conventions to follow and things to avoid. CLAUDE.md, AGENTS.md, cursor rules and skills are the common kinds.
CLAUDE.md is read by Claude Code. AGENTS.md is an open format that Codex, Cursor and other agents read. Many projects keep one and point the other at it.
A folder with a SKILL.md that describes one capability, such as filling PDFs or reviewing code. The agent loads it only when the task calls for it.
Your agents already can, over MCP, limited to the files you're allowed to read. Searching them from this page is coming.
