VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Engineer Kit

/ak:web-frameworks

Modern React web apps

Build modern React web apps with Next.js App Router, RSC, SSR/SSG/ISR, Turborepo monorepos, shared packages, caching, and RemixIcon UI polish.

01

Choose shape

02

Initialize stack

03

Lay out routes

04

Split packages

Rule 01

Use Next.js for SSR, SSG, RSC, routing, metadata, and built-in optimization.

Rule 02

Use Turborepo when multiple apps or packages must share code and cached pipelines.

Rule 03

Default to Server Components; introduce Client Components only for client-side behavior.

Rule 04

Keep stable production releases separate from canary framework drift.

Rule 05

Use RemixIcon accessibly: aria labels, currentColor, and consistent 24x24 alignment.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Choose shape Decide between a single Next.js app and a Turborepo monorepo based on shared apps, packages, and team needs.
  2. 2 Initialize stack Create the project with create-next-app or create-turbo, then add RemixIcon where the UI needs professional iconography.
02

Work

Agent / skill execution

  1. 3 Lay out routes Use App Router layouts, pages, loading states, error states, and metadata for the application structure.
  2. 4 Split packages For monorepos, separate apps from ui, config, types, and API-client packages with clear workspace dependencies.
03

Verify

Gate, review, validation

  1. 5 Design data flow Select Server Components by default, use Client Components only when needed, and define fetch caching/revalidation behavior.
  2. 6 Optimize assets Apply Next.js image, font, script, bundle, SEO, and performance optimization patterns.
04

Close

Report, handoff, artifact

  1. 7 Configure pipeline For Turborepo, define task dependencies, outputs, persistent dev tasks, filters, and remote caching.
  2. 8 Ship safely Keep production apps on patched stable Next.js releases and wire CI/CD for build, test, lint, and deployment.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:web-frameworks [framework] [feature]

Arguments

[framework]

Framework or stack focus

Optional focus such as Next.js, Turborepo, RemixIcon, App Router, RSC, SSR, ISR, or caching. It does not set a default 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"
[feature]

Feature or architecture request

Natural-language work request covering routes, layouts, Server or Client Component boundaries, data-fetching policy, cache freshness, monorepo packages, Turborepo tasks, or RemixIcon integration.

/ak:web-frameworks Turborepo monorepo for web, admin, docs, and shared UI packages

Special Operations

Single application

Best for e-commerce, marketing, SaaS, docs, blogs, and content platforms that do not need shared packages.

Monorepo

Best for microfrontends, multi-tenant products, internal tools, and design systems with shared libraries.

Caching strategy

Use force-cache, revalidate, or no-store deliberately based on freshness and performance needs.

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Start a Next app Recommended 
/ak:web-frameworks Next.js SaaS dashboard with App Router, Server Components, and RemixIcon
Use when:
You are building a standalone modern React application.
Expected:
Guides the single-app setup with create-next-app, App Router layouts/pages, Server Component defaults, loading/error states, metadata, optimization, and RemixIcon usage.
Design a monorepo 
/ak:web-frameworks Turborepo monorepo for web, admin, docs, and shared UI packages
Use when:
Multiple apps need shared UI, config, types, or API-client packages.
Expected:
Maps the apps/packages structure, shared component library, workspace dependencies, turbo task dependencies, outputs, persistent dev tasks, filters, remote cache, and CI/CD pipeline.
Tune data caching 
/ak:web-frameworks Next.js data fetching strategy with ISR, force-cache, revalidate, and no-store
Use when:
A Next.js app needs deliberate freshness and performance behavior.
Expected:
Explains fetch caching choices, ISR/revalidation patterns, static params, notFound handling, loading and error states, and when to avoid caching with no-store.
Integrate icons 
/ak:web-frameworks RemixIcon integration for navigation, buttons, and shared UI components
Use when:
The UI needs consistent line/fill iconography across components.
Expected:
Shows webfont and React component integration, package placement for shared UI, line versus fill usage, 24x24 alignment, currentColor theming, and aria-label accessibility.

Handled Scope

  • Choose shape
  • Initialize stack
  • Lay out routes
  • Split packages
  • Design data flow
  • Optimize assets

Next