Ctrl K

Quick Ref / Command

Engineer Kit

/ak:frontend-development

Modern React and TypeScript UI

Modern React and TypeScript frontend implementation with Suspense, lazy loading, TanStack Query/Router, MUI v7, performance, and file organization patterns.

Classify Work

Load Topic Guide

Plan Structure

Build Component

Rule 01

Suspense-based data fetching is the primary pattern.

Rule 02

Feature code lives under features; components is for truly reusable pieces.

Rule 03

MUI v7 uses Grid size, sx, and typed theme-aware styles.

Rule 04

Strict TypeScript, type imports, and explicit boundaries prevent drift.

Rule 05

Performance hooks must serve actual data-flow needs, not ritual optimization.

Execution Map

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

Start

Input, scope, route

1 Classify Work Decide whether the request is a component, page, feature, data-fetching path, route, styling task, performance pass, or TypeScript cleanup.
2 Load Topic Guide Read the relevant resource: component patterns, data fetching, file organization, styling, routing, loading/error states, performance, TypeScript, common patterns, or examples.
3 Plan Structure For features, create features/name with api, components, hooks, helpers, types, route, lazy components, Suspense boundaries, and public index exports.

Work

Agent / skill execution

4 Build Component Use React.FC<Props>, typed props, named const plus default export, aliases, and lazy loading for heavy components.
5 Fetch with Suspense Use useSuspenseQuery, cache-first strategy, feature API service files, and route paths without an unnecessary /api prefix.
6 Style with MUI v7 Use sx with SxProps<Theme>, inline styles under 100 lines, separate .styles.ts above 100 lines, and Grid size syntax.

Verify

Gate, review, validation

7 Handle States Wrap content in SuspenseLoader, use useMuiSnackbar for feedback, and avoid layout-shifting loading branches.
8 Optimize Carefully Apply useMemo, useCallback, React.memo, debounced search, and effect cleanup only where data flow or child props justify it.
9 Verify Contract Confirm route, rendering, loading/error behavior, types, imports, file organization, and observable user interaction.

Syntax, arguments, subcommands

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

Syntax

/ak:frontend-development [component or feature]

Arguments

[component or feature] Required

Component or feature

Natural-language React/TypeScript implementation request. Include the user-visible outcome, existing component or data contracts, required states, responsive and accessibility boundaries, allowed files or dependencies, and focused verification target; the Skill defines no default stack, flags, or named modes.

/ak:frontend-development "Add an order-status filter to the existing React page. Reuse its query keys, router, design tokens, and loading boundary; cover empty, error, keyboard, and mobile states; do not install packages or publish."

Modes / Routes

component

Component

Research:: component-patterns.md
Review:: Props/lazy/export checks
Validate:: Rendered state

feature

Feature

Research:: file-organization.md
Review:: Domain boundaries
Validate:: Route + public API

data fetching

Data

Research:: data-fetching.md
Review:: Suspense/cache/API service
Validate:: useSuspenseQuery behavior

styling

MUI styling

Research:: styling-guide.md
Review:: sx/Grid/style threshold
Validate:: Visual state

performance

Performance

Research:: performance.md
Review:: Memoization justified
Validate:: Observable improvement

Sample Prompt

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

New feature slice Recommended

/ak:frontend-development "Build an account-settings feature with route, typed API service, feature components, hooks, helpers, types, lazy loading, and Suspense boundaries."

Use when:: Use when creating a React/TypeScript feature that needs domain folders, route wiring, and a public feature API.
Expected:: Sets up the features/{name} structure from the Skill checklist, adds the route, lazy-loads heavy UI, wraps loading with SuspenseLoader, and exports the feature boundary.

Suspense data component

/ak:frontend-development "Create an orders table that fetches with TanStack Query, uses the existing apiClient service layer, and handles loading and errors without early spinner returns."

Use when:: Use when a component fetches server data and must replace isLoading branches with Suspense-based behavior.
Expected:: Implements useSuspenseQuery with typed query keys and a feature API service, keeps layout stable through SuspenseLoader, and routes user feedback through useMuiSnackbar.

TanStack route

/ak:frontend-development "Add a /reports route that lazy-loads the Reports page, uses createFileRoute, and returns breadcrumb data from the loader."

Use when:: Use when setting up folder-based TanStack Router pages in an existing React app.
Expected:: Creates the route file in the Skill’s routes/{name}/index.tsx pattern, lazy-loads the feature page, and keeps loader metadata such as breadcrumbs explicit.

MUI styling pass

/ak:frontend-development "Refactor the dashboard cards to MUI v7 sx styles, typed SxProps<Theme>, and Grid size syntax without changing product behavior."

Use when:: Use when the work is implementation inside a MUI v7 stack rather than visual concept selection.
Expected:: Uses the Skill’s styling guide: sx as the primary method, SxProps<Theme> for type-safe theme access, separate .styles.ts only past the size threshold, and Grid size props.

Handled Scope

React.FC components, lazy loading, SuspenseLoader, and component export patterns
TanStack Query useSuspenseQuery and API service layers
TanStack Router folder-based routes and loaders
MUI v7 sx styling, Grid syntax, theme types, and style-file thresholds
TypeScript strictness, forms with Zod, DataGrid wrappers, dialogs, auth, mutations, and cache invalidation