メニュー
Design the non-happy-path UI in Next.js — loading, error, not-found, and empty states with Suspense, error boundaries, and user-facing feedback. Use when a page fetches data, can fail, or can be empty.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Design, build, verify, and publish a curated Claude Code pack — a reusable collection of rules, skills, hooks, loops, and review agents — to GitHub. Trigger this skill whenever the user wants to "create a Claude Code pack", "build a rules/hooks/skills collection", "make a guardrail pack", "package my hooks/skills/agents", "publish a Claude Code config to GitHub", or assemble enforced standards for a stack (e.g. Next.js + Supabase, Django, etc.). This skill is the methodology that produced github.com/m-binimran/dev-pack; reuse it instead of re-deriving the process. Run it BEFORE writing any pack files — it sequences research, clarification, building, verification, and safe publishing.
Audit a web page/component against WCAG 2.2 AA — semantics, keyboard, contrast, labels, focus, alt text. Use when reviewing UI for accessibility or before shipping a page.
Implement web animations with the right engine (Motion, GSAP, Anime.js, React Spring, tailwindcss-motion) and a mandatory prefers-reduced-motion fallback at 60fps. Use when adding any motion to a site.
Design Next.js route handlers and server actions with input validation, correct status codes, error handling, and rate limiting. Use when building an API endpoint, server action, or webhook receiver.
Get Next.js App Router caching right — static vs dynamic rendering, fetch cache, revalidatePath/revalidateTag, and ISR. Use when data is stale, a page won't update, or you're tuning performance vs freshness.
Build a production React component on shadcn/ui + Tailwind — variants, compound pattern, accessible states, and a clean prop API. Use when creating a new UI component or refactoring a messy one.
| name | error-states |
| description | Design the non-happy-path UI in Next.js — loading, error, not-found, and empty states with Suspense, error boundaries, and user-facing feedback. Use when a page fetches data, can fail, or can be empty. |
Most apps ship the happy path and forget the other three. A surface isn't done until loading, empty, and error are all handled.
loading.tsx or <Suspense fallback>. Use skeletons that match the final layout (no CLS),
not a bare spinner where possible.error.tsx (client error boundary) with a human message + a retry (reset()); log the real
error server-side. Never show a raw stack trace to users.not-found.tsx + notFound() for missing resources (real 404, not a 200 with "nothing here").aria-live for errors).state-architect).