saviorhidc/claude-web-design-skills

このリポジトリは、Claude（Claude Code）向けに著者が自分のNext.js開発で使う慣習をまとめた「スキルパック」です。目的はAI生成フロントエンドの「凡庸な美学」と「脆弱なバックエンド」を防ぎ、設計・セキュリティ・デプロイの安全で再現可能な規約を提供することです。主にNext.js/Tailwind/Framer Motion/Stroked componentsを使うフロントエンド開発者や、Claudeをプロンプト駆動で活用するチーム向けです。 主な機能は、デザイン指針を与える frontend-design、OWASP風の16項目セキュリティチェックを含む frontend-security、要求を具体化するSPADEプロンプトフレームワークを含む frontend-prompting、パフォーマンスやVercelデプロイ手順、Puppeteerによるスクリーンショットワークフローなどのスキル群です。さらにコード差分を自動審査する security-reviewer やアクセシビリティ／デザインシステムのレビューメタエージェントも同梱します。 導入はプラグイン方式を推奨し、手動コピーやシンボリックリンクの方法も記載。重要な注意点として、各スキルはシステムプロンプト相当の振る舞いをするため、導入前にSKILL.mdやagents/security-reviewer.mdを必ず確認し、タグ固定で運用することが勧められています。対応スタックはNext.js App Router、Tailwind、shadcn/ui、Supabase、Vercelなどが想定されています。

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.