skills.rest
masakinihirota
masakinihirotaCOMMUNITY
Explore all skills by this author →
𝕏@masakinihirotaGitHub

client-component-boundary-guard

Validates Client and Server component boundaries in Next.js App Router projects.

Updated Jul 21, 2026
Search Tags:#typescript#react#next.js#build errors#server components#app router#use client
One-click install
npx skills add https://github.com/masakinihirota/2026src-ni --skill client-component-boundary-guard-masakinihirota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: client-component-boundary-guard
Source: https://github.com/masakinihirota/2026src-ni/tree/main/.agents/skills/client-component-boundary-guard
Command: npx skills add https://github.com/masakinihirota/2026src-ni --skill client-component-boundary-guard-masakinihirota

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When adding React Hooks like useState to view components in a Next.js App Router project, forgetting the "use client" directive or exporting Hook-containing views through barrel files causes build failures such as "Ecmascript file had an error" with confusing Turbopack import traces. This Skill prevents those Client/Server boundary errors before they break your build. ## Core Features & Use Cases - Boundary Rule Enforcement: Ensures every tsx file using React Hooks starts with "use client" placed before any imports. - Barrel Export Inspection: Checks that index.ts barrel exports do not let Server Components unexpectedly reach Hook-containing views. - Build Verification: Confirms the fix by running pnpm build and checking the import trace for correct Client/Server boundaries. - Use Case: You add useState to a view.tsx file and the build fails with an import trace showing page.tsx -> index.ts -> view.tsx. This Skill walks you through adding the directive, fixing the barrel export, and verifying with a clean build. ## Quick Start Check my Next.js view components for missing "use client" directives and fix any Client/Server boundary errors so pnpm build passes.

Frequently Asked Questions about client-component-boundary-guard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix the "use client" missing error in Next.js App Router?▼

Add the "use client" directive as the very first line of any tsx file that uses React Hooks like useState, placed before all import statements. Then run pnpm build to confirm the Client/Server boundary error is resolved.

Why does Next.js build fail with Ecmascript file had an error?▼

This error typically occurs when a Server Component reaches a file using React Hooks without a "use client" directive. Check the Turbopack import trace, often page.tsx -> index.ts -> view.tsx, to find where the boundary is crossed.

Can barrel exports cause Client Component errors in Next.js?▼

Yes. Exporting a Hook-containing view through an index.ts barrel file can let Server Components unexpectedly import it, breaking the Client/Server boundary. Review barrel exports so Server-side import paths do not reach Hook-containing views.

Where should the "use client" directive be placed in a file?▼

The "use client" directive must be the first line of the file, before any import statements. Placing it after imports invalidates the directive and the file will be treated as a Server Component.

Does a Container with "use client" cover its child view components?▼

Not always. If the view file itself uses Hooks and is imported through paths that bypass the Client boundary, it still needs its own directive. Verify each Hook-containing file individually and confirm with pnpm build.

Related Skills

Explore More Software Engineering Skills→
lety-ailety-ai

nextjs-feature

Scaffold domain-organized frontend feature modules for Next.js 15 App Router TypeScript projects.

Official
Intermediate
achmfachmf

sentry-nextjs-sdk

Configure the Sentry SDK for Next.js error monitoring and tracing.

Community
Advanced
monam2monam2

Lint & TypeCheck

Run ESLint and TypeScript checks to identify code quality issues.

Community
Intermediate
Chris-MaskeyChris-Maskey

react-use-client-boundary

Diagnose React use client directive placement and client boundary misconfigurations in Next.js.

Community
Intermediate