web-frontend
fmind/dot/skills/web-frontend/SKILL.md
Design and build simple browser UIs with HTML, CSS, JavaScript, and Tailwind.
Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
fmind/dot/skills/web-frontend/SKILL.md
Design and build simple browser UIs with HTML, CSS, JavaScript, and Tailwind.
tranhieutt/software_development_department/.claude/skills/team-frontend/SKILL.md
name: team-frontend type: workflow description: "Orchestrates the frontend team of ux-designer, ux-researcher, frontend-developer, and accessibility-specialist to design, implement, and validate a UI feature from research
databricks/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.
Often used withfile-readingbrief-to-tasksacademy-guide
wei/socialify/.github/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.
186 projects use a version of this
Often used withfile-readingbrief-to-tasksacademy-guide
mrgoonie/claudekit-skills/.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, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Often used withfile-readingbrief-to-tasksacademy-guide
GoogleCloudPlatform/devrel-demos/codelabs/bwg002-devrel-2/.agents/skills/start-frontend/SKILL.md
Manages local server ports and starts the Pitch Generator web server (port 8080) and optional standalone Visual Director A2A service (port 8801) as background daemon processes. Use when asked to run, start, restart, or test the Pitch Generator app or Visual Director service in a browser.
Arize-ai/phoenix/.agents/skills/phoenix-frontend/SKILL.md
Frontend development guidelines for the Phoenix AI observability platform. Use when writing, reviewing, or modifying React components, TypeScript code, styles, or UI features in the js/app/ directory. Triggers on any frontend task — new components, UI changes, styling, accessibility fixes, form handling, or component refactoring. Also use when the user asks about frontend conventions or component patterns for this project. For design system rules (error display, layout, dialogs, tokens), use the phoenix-design skill.
reactive/data-client/.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.
Rising33 mentions in 2 weeks
186 projects use a version of this
Often used withfile-readingbrief-to-tasksacademy-guide
Start9Labs/start-os/.claude/skills/start9-frontend/SKILL.md
Start9 house style for every Angular + Taiga UI web frontend (StartOS ui/setup-wizard, StartWRT, StartTunnel, brochure-marketplace, start9-store, ops-server, support-server). Use BEFORE writing or reviewing any frontend code in these apps — components, templates, styles/CSS, forms, dialogs/toasts, routing, state, DI, i18n — and when bootstrapping a new Start9 web UI or upgrading Angular/Taiga. Includes doctrine, recipes, an antipattern catalog distilled from the fleet's refactor history, and a verified Taiga 5 API reference.
sungurerdim/dev-skills/ds-frontend/SKILL.md
Frontend design quality — design-system audit, token enforcement, component states, accessibility, responsive layout, theming. Use when building or reviewing UI for design consistency, a11y, or responsiveness.
stareezy-1/frontend-architecture-skill/skills/frontend-seo/SKILL.md
A portable, framework-agnostic SEO system for any React or React Native-for-web frontend. Centralizes site metadata in one constants module, derives canonical URLs from a single base, builds per-route metadata (title, description, canonical, Open Graph, Twitter/X cards), generates sitemap.xml, robots.txt, and an RSS feed from real content, and emits typed JSON-LD structured data (Person, WebSite, BlogPosting, CreativeWork, BreadcrumbList, FAQPage). Pure, testable builder functions with a thin framework adapter on top. Use this skill when adding SEO to a site, wiring metadata into routes, generating sitemaps/robots/feeds, adding schema.org structured data, fixing canonical URLs or duplicate-content issues, or reviewing SEO coverage. Pairs with the frontend-architecture skill (SEO lives in a service module) and works with Next.js App Router, Remix, Astro, React + Vite, and Expo Router for web.
xu-xiang/everything-claude-code-zh/.agents/skills/frontend-slides/SKILL.md
从零开始创建令人惊叹、动画丰富的 HTML 演示文稿,或通过转换 PowerPoint 文件生成。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面、或为演讲/路演创建幻灯片的场景。帮助非设计师用户通过视觉探索而非抽象选择来发现他们的审美偏好。
Often used witheverything-claude-codeeverything-claude-code-conventionsnextjs-turbopack
xu-xiang/everything-claude-code-zh/.cursor/skills/frontend-slides/SKILL.md
从零开始或通过转换 PowerPoint 文件创建令人惊叹、动画丰富的 HTML 演示文稿(Presentations)。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面或为演讲/路演创建幻灯片(Slides)的场景。通过视觉探索而非抽象选择,帮助非设计师发掘其审美偏好。
Often used witheverything-claude-codeeverything-claude-code-conventionsnextjs-turbopack
quran/quran.com-frontend-next/.agents/skills/frontend-design/SKILL.md
name: frontend-design description: 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
Often used withfile-readingbrief-to-tasksacademy-guide
quran/quran.com-frontend-next/.claude/skills/frontend-design/SKILL.md
../../../.agents/skills/frontend-design/SKILL.md
Often used withfile-readingbrief-to-tasksacademy-guide
BidingCC/BuildingAI/skills/frontend-design/SKILL.md
name: frontend-design description: 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
Often used withfile-readingbrief-to-tasksacademy-guide
buildermethods/design-os/.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, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Often used withfile-readingbrief-to-tasksacademy-guide
OpenAEV-Platform/openaev/.claude/skills/review-frontend/SKILL.md
Frontend review checklist for OpenAEV React/TypeScript code: component patterns, Filigran Design System adoption, forms, MUI usage, permissions, i18n, state management, dead code. Use when reviewing PRs or auditing frontend features.
Steady8 mentions in 2 weeks
2 projects use a version of this
classroomio/classroomio/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.
Often used withfile-readingbrief-to-tasksacademy-guide
revokslab/ShipFree/.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.
Often used withfile-readingbrief-to-tasksacademy-guide
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.