Activate when building Next.js (App Router or Pages Router) web frontends — landing pages, marketing pages, product UI, dashboards, portfolios. Trigger phrases include "build a Next.js page", "design a Next.js landing page", "create the UI in Next", "build the marketing site", "App Router", "server components", or when the user pastes a screenshot for a Next.js project. Always check for `screenshots/` in the repo root. Always reference `questionnaire.md` in this skill folder — walk the user through it if unanswered. Use `frontend-react` for non-Next React (Vite, CRA, Remix). Do NOT trigger for Flutter (use `frontend-flutter`), React Native (use `frontend-react-native`), backend, or existing design systems that must be preserved.
Use this skill only when the user explicitly asks for a frontend scan, visual scan, screenshot audit, Playwright scan, or comprehensive UI audit. It starts the local server, captures desktop/mobile screenshots, checks responsiveness and AI slop, and writes a report.
Use when a builder needs to build or extend a React or TypeScript frontend for a standard Gear/Vara Sails app, using Sails-JS, generated clients, React hooks, and low-level Gear-JS only where it adds value. Do not use for Rust-only contract work, raw gstd service design, or non-Vara frontends.
177mo agoReviewMountCreate a free account to mount
visant-killer sub-skill: frontend decision system where every interface choice names the business variable it moves; the required deliverable is the route classification table. Use on "redesign this screen", "critique this UI", "visual hierarchy", "redesenhar tela", "criticar interface", "hierarquia visual", "cortar excesso", "empty state".
Review frontend code under `web/` or `packages/dify-ui/` when the user explicitly requests a review or audit. Supports PRs, branches, pending changes, files, and pasted diffs. Do not use for implementation-only requests, diagnosis without review intent, or backend-only code.
160k4d agoReviewMountCreate a free account to mount
Run a comprehensive frontend code audit of the Nuxt 3 admin interface. Checks Pinia-Colada query/mutation patterns, TypeScript strictness, component architecture, SDK freshness, i18n coverage, and Tailwind usage. Use when user says 'audit the frontend', 'check frontend code quality', 'find unused components', 'composable health check', 'pinia-colada audit', 'typescript errors', or 'frontend code review'. Do NOT use for backend API audits (use scaffold-api-endpoint) or bot UI issues (use bot-framework). Reports issues with file locations and severity levels.
Debug the Nuxt 3 admin UI using Playwright MCP for visual inspection, console error analysis, and network request tracing. Use when user says 'UI is broken', 'page not loading', 'frontend bug', 'console errors', 'API call failing in UI', 'component not rendering', 'blank page', 'verify my UI changes', or 'check the admin interface'. Do NOT use for static code quality audits (use audit-frontend), backend agent debugging (use debug-agent), or bot platform issues (use bot-framework).
Frontend development for React 19, Next.js 15, TypeScript, and Tailwind CSS v4 / Pengembangan frontend dengan React 19, Next.js 15, TypeScript, dan Tailwind CSS v4.
Build or modify frontend interfaces using repository-native components while preserving accessibility, responsive behavior, state handling, and visual verification. Use for UI features, design implementation, forms, client-side defects, and frontend refactors; do not use for backend-only or infrastructure-only work.
153mo agoReviewMountCreate a free account to mount
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.
name: frontend-design
type: workflow
description: "Designs frontend UI architecture including component hierarchy, state management strategy, design tokens, and accessibility requirements. Use when starting frontend design or when the user
How to test GAIA's frontend — three tiers (vitest units, Testing Library components, Playwright e2e), the red-green-throwaway pattern for pre-merge sweeps, and the gotchas that bit us during the 2026 react-doctor sweep.
3248d agoReviewMountCreate a free account to mount
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.
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.
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.
Use this skill when the user asks to design/build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Home Assistant frontend Lit context and hass migration guidance. Use when adding or changing component state access, replacing hass reads, consuming entity or registry contexts, or reviewing rerender behavior.
5.8k6d agoReviewMountCreate a free account to mount
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.
DevdannnnySkill
