saviorhidc/claude-web-design-skills

An opinionated skill pack for Claude Code that encodes conventions and checks for building Next.js frontends. It’s intended for developers who use Claude Code to generate UIs and want distinctive design, safer defaults, and repeatable review patterns — especially teams using Next.js (App Router), Tailwind, Framer Motion, shadcn/ui, Supabase, and Vercel. Key features: - Skills that steer Claude’s output: frontend-design (aesthetic rules), frontend-security (16‑point OWASP-style checklist with implementation guidance), frontend-prompting (SPADE spec + 4-round iteration), actionable tips, performance guidance, Vercel deploy patterns, and a Puppeteer-based screenshot workflow. - Agents that run automated reviews: security-reviewer, deployment-readiness-reviewer, accessibility-reviewer, design-system-reviewer. - Installation: plugin, manual copy, or per-skill symlinks; skills are Markdown and act like system prompts—read SKILL.md before installing. - Compatibility notes and minimal runtime deps (only screenshot workflow requires Puppeteer).

AI-related keywords found in this repo's description, topics, or README summary — grouped by category. Each badge links to the corresponding ranking detail page.