菜单
Add or fix error boundaries, loading states, and API error handling. Use when adding error.tsx, loading.tsx, global-error.tsx, or not-found.tsx to a route, fixing SWR error propagation, or handling API route failures.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Implement or audit WCAG 2.1 AA accessibility. Use when adding skip navigation, fixing heading hierarchy, setting up aria-live regions, handling reduced motion, adding screen reader text, or auditing a component for a11y compliance.
Add or change MDX articles and blog behavior. Use when working with blog posts, MDX content, article frontmatter, related articles, reading time, article series, or blog routes and layouts.
Work on Open Source / GitHub pages and API. Use when modifying GitHub profile, repositories, readme, last activities, open-source routes, or GitHub-related hooks and components.
Change SEO, metadata, or analytics. Use when working with JSON-LD, Open Graph, sitemap, robots, breadcrumbs, page metadata, or Google Tag Manager.
Work on Spotify API, API routes, or Spotify UI. Use when modifying Spotify playback, playlists, profile, top artists/tracks, token refresh, normalization, or Spotify-related hooks and components.
Change Terminal UI or behavior. Use when working with the Terminal component, command registry, terminal commands, terminal hooks, or terminal cookie state.
| name | error-handling |
| description | Add or fix error boundaries, loading states, and API error handling. Use when adding error.tsx, loading.tsx, global-error.tsx, or not-found.tsx to a route, fixing SWR error propagation, or handling API route failures. |
Guidance for error boundaries, loading skeletons, and API error conventions in this Next.js site.
By default, each route segment should have both error.tsx and loading.tsx where it makes sense.
'use client' component.error: Error & { digest?: string } and reset: () => void.error.digest (Error ID), a Try again button (onClick={reset}), and a Go home link.Button from @/components/ui/button, Link from next/link.RefreshCw (retry) and Home (home link) from lucide-react.'use client';
import { Home, RefreshCw } from 'lucide-react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
export default function MyError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
return (
<div className="flex min-h-[60vh] flex-col items-center justify-center px-4 text-center">
<p className="text-5xl font-bold text-destructive sm:text-6xl">Oops</p>
<h1 className="mt-4 text-2xl font-semibold tracking-tight sm:text-3xl">Something went wrong</h1>
<p className="mt-2 max-w-md text-sm text-muted-foreground">...</p>
{error.digest && <p className="mt-2 text-xs text-muted-foreground/60">Error ID: {error.digest}</p>}
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<Button variant="default" onClick={reset}><RefreshCw className="h-4 w-4" />Try again</Button>
<Button variant="outline" asChild><Link href="/"><Home className="h-4 w-4" />Go home</Link></Button>
</div>
</div>
);
}
'use client').animate-pulse and bg-primary/10 for skeleton shapes that match the actual page layout.export default function MyLoading() {
return (
<div className="container mx-auto px-4 py-8">
<div className="h-8 w-48 animate-pulse rounded-md bg-primary/10" />
<div className="mt-4 h-4 w-64 animate-pulse rounded-md bg-primary/10" />
</div>
);
}
<html> and <body>. Use inline styles only — no component imports (the layout may be broken). 'use client' required.'use client' (uses useRouter). Shows navigation options: Go home, Go back (router.back()), Browse articles. Uses Button + Link.isError:
const res = await fetch('/api/...');
if (!res.ok) throw new Error('Failed to fetch');
return res.json();
isError from hooks to components.AlertCircle from lucide-react.BadResponse) when the route must always succeed (e.g., currently-listening — the player should render even when Spotify is unavailable).| File | Purpose |
|---|---|
| app/error.tsx | Root route error boundary |
| app/global-error.tsx | Root layout fallback (inline styles, own html/body) |
| app/not-found.tsx | Custom 404 |
| app/blog/error.tsx | Blog list error |
| app/blog/loading.tsx | Blog list skeleton |
| app/blog/[slug]/loading.tsx | Article page skeleton |
| app/open-source/error.tsx | Open source error |
| app/open-source/loading.tsx | Open source skeleton |
app/your-route/error.tsx as a 'use client' component following the pattern above. Customize the description text.app/your-route/loading.tsx as a server component with skeleton shapes matching the page layout (animate-pulse bg-primary/10).[slug]), add error.tsx and loading.tsx to each segment directory that can fail independently.!res.ok and the component renders an AlertCircle error state when isError is true.