In short:
ak-frontend-developmentwrites React/TypeScript components, pages and features with the router, data library, styling and aliases your project already uses. When it is done, it checks build, types and interactions and reports what it could not check; no skill follows it. It does not install MUI or TanStack Router just because its examples use them.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when you need to add or change a React component, page or feature written in TypeScript, including a slow page that needs tuning. You do not need it when the work does not touch React UI code.
flowchart LR
A["React component, page or feature"] --> B["ak-frontend-development"]
B --> C["Code on the existing stack"]
C --> D["Build, types, interactions checked"]
C --> E["List of what could not be checked"]Before writing, it answers these questions:
| Concept | Question | Example |
|---|---|---|
| The project's stack | Which router, data library, component library and styling does the project use, and at which versions? | A Next.js project on shadcn gets new components in shadcn, with no MUI or TanStack Router pulled in. |
| Examples are only examples | When do the bundled MUI v7, TanStack Query and TanStack Router patterns apply? | If the project already uses useSuspenseQuery and the MUI v7 Grid, it writes <Grid size={{ xs: 12, md: 6 }}> and wraps loading in Suspense. Otherwise it skips them. |
| The minimum for every component | What must UI code keep, whatever the library? | Typed props, buttons that are real button elements, effects that clean up, loading, error and empty states, and a layout that works on small screens. |
| Done means checked | What evidence shows the component works? | The component opens in the real router, build and typecheck pass, clicks and typing work. Anything not tried goes in the report. |
A passing build is not the finish line: it also runs the component in the real router, and notes anything it could not try so you can check it before merging.
Sample prompt for a project that does not use MUI:
/ak-frontend-development Add a change-password form to the settings page of <app name>.
Constraints: use the existing components and form validation, do not add a new UI library.This skill has no flags.
Below is the detailed version: the run flow, 4 situations with prompts, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-frontend-development: React/TypeScript that follows your project's stack" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-frontend-development". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-frontend-development
