nextjs-static-shells

Static-first Next.js 16 architecture patterns: cached shells with dynamic slots, provider islands, 'use cache' boundaries, and link preloading strategy. Use when building or refactoring Next.js routes to maximize static rendering, implementing 'use cache' with dynamic personalization, splitting entry vs static renderers, scoping client providers, or tuning prefetch behavior. Triggers on 'static shell', 'use cache pattern', 'dynamic slots', 'provider island', 'prefetch strategy', 'static first', 'cache boundary', 'route goes dynamic unexpectedly', or any Next.js architecture work involving mixed static/dynamic rendering.

1.24x

Quality

88%

Does it follow best practices?

Impact

98%

1.24x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

100%

49%

Product Detail Page with Personalized Recommendations

Static shell with dynamic slots

Criteria

Without context

With context

Entry/Static split

16%

100%

Dynamic slot as ReactNode

100%

Suspense around slot

50%

100%

No request APIs in cache boundary

58%

100%

Request reads in entry

100%

cacheComponents config

100%

Async params awaited in entry

100%

Static data fetch in cached component

30%

100%

No API layer for server data

100%

Client component not async

100%

Blog Platform Caching and Content Invalidation

Cache profiles and invalidation

Criteria

Without context

With context

cacheLife used

100%

cacheTag applied

100%

revalidateTag or updateTag used

100%

No unstable_cache

100%

'use cache' directive present

100%

cacheTag import source

100%

cacheLife import source

100%

Server Action for mutation

100%

No manual key arrays

100%

cacheComponents config

100%

Multiple cache profiles

100%

95%

User Dashboard with Search, Interactive Widget, and Navigation

RSC boundaries, provider islands, prefetch

Criteria

Without context

With context

useSearchParams in Suspense

100%

Feature-scoped provider

100%

Serializable props

100%

prefetch=false on volatile links

100%

Default prefetch on static links

100%

Async params typing

100%

No async client components

100%

Server fetches data for client

100%

Provider initial state from server

40%

50%

Non-serializable types converted

100%

Repository: joelhooks/joelclaw
Commit: 825972c

Evaluated: 30 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Product Detail Page with Personalized Recommendations Blog Platform Caching and Content Invalidation User Dashboard with Search, Interactive Widget, and Navigation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.