Build Next.js and Turborepo projects with ak:web-frameworks

Use ak:web-frameworks for Next.js App Router, React Server Components, SSR, static generation, ISR, data caching, Turborepo pipelines, and RemixIcon integration. It is implementation-capable guidance with two optional local utilities for scaffolding a project or preparing a monorepo migration.

Choose ak:web-frameworks for framework architecture

Use ak:web-frameworks when

• You need a Next.js route, layout, Server or Client Component boundary, loading or error state, data-fetching policy, metadata, image, font, or bundle change.
• You need to create or migrate a JavaScript or TypeScript monorepo and define Turborepo task dependencies, outputs, filters, concurrency, or caching.
• You need to add RemixIcon through a webfont, framework package, or individual SVG while preserving accessibility and bundle constraints.

Choose another workflow when

• The framework is incidental to UI state or component behavior. Use ak:frontend-development and consult this Skill for framework boundaries.
• Visual direction is the main outcome. Use ak:frontend-design.
• Deployment, provider configuration, CI credentials, or production operations are central. Use ak:devops; this Skill can prepare an artifact but does not grant deploy authority.
• You are using a framework outside Next.js and Turborepo. Use its current official documentation or another applicable Skill rather than generalizing these references.

Prepare the framework context

Before you start:

• Complete Onboarding, and confirm Engineer Kit is installed for the current runtime and scope.
• Identify Node.js and package-manager versions, lockfile, framework and React versions, router type, rendering and hosting constraints, workspace layout, build commands, and files allowed to change.
• Inspect current framework documentation for the pinned version. Next.js cache, request APIs, configuration formats, experimental features, and Turborepo schema have changed across releases; the bundled examples are point-in-time.
• For server rendering, identify the server runtime, secrets, database and API access, authentication boundary, cache freshness, invalidation, and data that must never reach the client bundle.
• For a monorepo, inventory every workspace pattern, package graph, task, output, environment input, generated artifact, persistent process, and remote-cache owner before changing the root configuration.

The optional utilities require Python 3.10 or later and use only the standard library at runtime. Framework installation, builds, tests, and dev servers separately require Node.js and the repository’s package manager. Remote Turborepo caching also requires an approved cache service, network access, and credentials such as the service’s team and token values.

Run the Skill

The declared argument shape is [framework] [feature]. It defines no default framework, framework version, package manager, hosting provider, or deployment mode.

/ak:web-frameworks nextjs "Add an App Router product page in the existing pinned Next.js version. Keep data on the server, define cache freshness and invalidation, add loading, error, and not-found states, run focused checks, and stop before dependency upgrades or deployment."

/ak:web-frameworks nextjs "Add an App Router product page in the existing pinned Next.js version. Keep data on the server, define cache freshness and invalidation, add loading, error, and not-found states, run focused checks, and stop before dependency upgrades or deployment."

$ak:web-frameworks nextjs "Add an App Router product page in the existing pinned Next.js version. Keep data on the server, define cache freshness and invalidation, add loading, error, and not-found states, run focused checks, and stop before dependency upgrades or deployment."

Understand the bundled utility modes

These are separate Python scripts, not ak:web-frameworks flags:

The Skill’s quick initializer example uses a --name option, but the executable parser requires the project name as a positional argument. Follow the executable definition above.

Observe an evidence-led framework workflow

1. The run resolves versions and architecture. It records the framework, router, rendering target, package manager, workspace graph, and deploy shape.
2. The run classifies each boundary. It keeps non-interactive work in Server Components, moves browser APIs and interaction to narrow Client Components, and keeps secrets and privileged data server-side.
3. The run defines data behavior. It names static, dynamic, streamed, or revalidated behavior, freshness limits, cache keys and environment inputs, mutation invalidation, error handling, and fallback states.
4. The run proposes a file and task diff. Routes, layouts, package edges, pipeline dependencies, outputs, cache behavior, and icon delivery are explicit.
5. The run implements and validates. It performs only approved writes, then runs focused type, lint, test, build, bundle, cache-dry-run, or accessibility checks supported by the project.
6. The run reports the delivery boundary. It records artifacts, cache or network activity, skipped checks, and provider actions still awaiting approval.

Keep writes, caches, and deployment separate

• npx create-next-app, npx create-turbo, package-manager install commands, and CDN or font usage access the network, download and execute package code, modify manifests and lockfiles, write dependency stores, and can run lifecycle scripts. Pin and review versions before allowing them.
• A Next.js build can execute server-side module code and data fetching, consume APIs, databases, CPU, memory, and disk, and embed public environment values in client assets. Use isolated build credentials and avoid unintended live writes.
• Server Actions, Route Handlers, direct database access, and cache revalidation can mutate external systems. Framework placement is not authorization for the underlying write.
• Turborepo tasks can run concurrently across many packages. --dry-run previews the task graph; it does not make a later task safe. Review persistent tasks, destructive clean scripts, database tasks, environment variables, and output declarations before execution.
• Local caches write build outputs and logs to disk. Remote caches upload and download artifacts and logs to a third party; do not include secrets or sensitive build products, and account for provider storage and transfer costs.
• Deployment platforms, image optimization, remote assets, analytics scripts, CI minutes, remote cache, bandwidth, and compute may incur charges. The Skill defines no provider, price, budget, or production permission.

Verify the result

A complete result should provide:

• Exact framework, React, Node.js, package-manager, router, workspace, and configuration versions used.
• Files and dependency declarations changed, with Server and Client Component, cache, revalidation, environment, and security reasoning.
• Focused type, lint, test, build, route, loading, error, accessibility, bundle, or cache evidence appropriate to the change.
• For Turborepo, the reviewed task graph, package filters, dependencies, inputs, outputs, persistent tasks, cache hits or misses, and remote-cache boundary.
• Every network call, external write, generated artifact, skipped check, unresolved version mismatch, and deploy step still awaiting approval.

Troubleshoot or continue

Review Projects, artifacts, and checkpoints before a scaffold or migration or continue with Engineer Kit.

Know the current limits

• The references contain point-in-time Next.js, Turborepo, Node.js, RemixIcon, hosting, and experimental-feature examples. They do not establish compatibility with a project’s pinned versions or current provider behavior.
• Utility tests use temporary local projects and report high line coverage, but they do not install Node dependencies, run a real Next.js or Turborepo build, validate framework security, exercise a remote cache, or deploy.
• The migrator’s package-manager choice is recorded in its report but does not tailor the generated configuration or install command. Its simple pnpm parser and existing-directory output inference require manual review.
• Runtime duration is not defined. Scaffolding is local and usually brief; installs, builds, static generation, tests, cache uploads, and deployments vary with the dependency graph, data access, cache state, artifact size, and network.
• Stable and beta contain identical Skill references, utilities, and tests for this release pair.