Ref Sp JS Next Template

React + Next App

Purpose

Provide app-level defaults for planning and reviewing a whole React and Next.js application without duplicating the lower-level framework guidance that belongs in ref-sp-js-react, ref-sp-js-next, and ref-sp-js-typescript.

When to use this skill

• Scaffolding a new React and Next.js app.
• Reviewing whether an existing React and Next app has a coherent baseline stack and folder structure.
• Deciding whether a requirement deserves a full app or can stay a simpler standalone browser tool.
• Choosing app-level defaults such as package manager, TypeScript baseline, and top-level structure.

Scope Boundaries

• Use this skill for whole-app setup, baseline stack decisions, and top-level app structure.
• Use ref-sp-js-react for component internals, hooks, local UI state, and general React dependency choices.
• Use ref-sp-js-next for App Router structure, client and server boundaries, framework integrations, and Next-specific library choices.
• Use ref-sp-js-typescript for strict type modeling, runtime boundaries, and tsconfig design.
• Use ref-sp-js-web-standalone-template when the requirement can stay a no-build browser app instead of becoming a full React and Next project.

Defaults

• Prefer Next.js App Router plus strict TypeScript as the baseline for a whole React and Next app.
• Prefer Yarn for dependency management and script execution in Node-based React and Next apps.
• Keep the top-level app structure small and feature-first.
• Prefer one coherent UI system across the app instead of mixing multiple styling and component stacks.
• Decide early whether the app can stay static-friendly or genuinely needs server-dependent features.

Task Framing

Core Rules

App baseline

• Make the package manager explicit and keep the Node-based workflow on Yarn consistently.
• Keep the initial app baseline minimal instead of front-loading many optional libraries.
• Let ref-sp-js-react and ref-sp-js-next own the detailed framework rules instead of copying them into this skill.

Top-level structure

• Keep the route tree, feature code, shared UI, and app-shell code in predictable separate areas.
• Designate one composition root — the root layout and its providers — as the place to wire app-wide singletons and context providers; keep ordinary feature modules import-inert so importing them does no work. See ref-sp-js-react and ref-sp-js-next for the per-request and use client specifics.
• Keep app-level ownership boundaries obvious before worrying about lower-level route or component refinements.
• Avoid leaving prototypes, migration scripts, or maintenance helpers inside the main app tree.

Decision rules

• If the requirement is a local browser app that can stay framework-free, prefer ref-sp-js-web-standalone-template instead of escalating to a full app.
• If the question turns into component internals, hook design, or React dependency choices, load ref-sp-js-react.
• If the question turns into App Router, use client, metadata, or Next-specific integrations, load ref-sp-js-next.

Validation

• The app baseline clearly names Next.js, TypeScript, and Yarn.
• The top-level layout separates routes, feature code, shared UI, and maintenance surfaces intentionally.
• The chosen app model is justified instead of using full app infrastructure by habit.
• Lower-level React, Next.js, and TypeScript guidance is sourced from the dedicated reference skills instead of being duplicated here.

References

• Read ref-sp-js-react for component, hook, and React dependency guidance.
• Read ref-sp-js-next for App Router, rendering-boundary, and Next-specific integration guidance.
• Read ref-sp-js-typescript for strict TypeScript and runtime-boundary guidance.
• Read ref-sp-js-web-standalone-template when the feature may not need a full React and Next app.
• Read ./references/checklist.md for a quick whole-app review pass.
• Read ./references/app-stack.md when choosing the app baseline and top-level structure.
• Read ./assets/trigger-eval-queries.example.json when testing trigger quality for app-level React and Next prompts.
• Review ./evals/evals.json when validating output quality for app-level planning guidance.