In short:
ak-ui-stylingchecks what the project already has (packages,components.json, Tailwind config, tokens), then changes only the part you ask for: a component, the theme, accessibility or layout. It also makes posters and brand materials in a canvas design style. It does not re-initialize an app that is already set up, and it hands off to no other skill.
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 your React app runs on shadcn/ui and Tailwind and you need to add a component, change the brand color, turn on dark mode, fix a form that is hard to use with a keyboard, or fix a page that breaks on phones. Also use it when you need a poster or brand material. You do not need it while the request is still vague, like "make the UI look nicer": the skill changes only what you name, so spell out the screen, the component and the kind of change first.
flowchart LR
A["UI work: component, theme, a11y, layout"] --> B["ak-ui-styling"]
P["Poster, brand material"] --> B
B --> C["Changes only the requested part of the code"]
B --> D["Design philosophy file + PDF or PNG"]
C --> E["Stops, hands off to no skill"]
D --> EFour concepts to know:
| Concept | Question | Example |
|---|---|---|
| Read the current setup | Which versions does the project use, and how is it configured? | There is a components.json, Tailwind is configured, brand colors live in CSS variables: the skill reuses all of that and does not reinstall from scratch |
| Kind of change | Is this adding a component, changing the theme, fixing accessibility, or converting one part? | "Add a delete confirmation dialog" adds just that dialog, without touching the theme or other pages |
| What must not break | Which design decisions and keyboard behavior must stay? | The focus ring when you press Tab, the Tab order in a form, the colors and corner radius already chosen |
| App UI or visual piece | Do you need a working screen, or a piece of visual art? | A launch poster: one Markdown file stating the design philosophy and one PDF or PNG, almost all image, very little text |
Sample prompt for adding a component to an app that already has shadcn/ui:
/ak-ui-styling Add a confirmation dialog before deleting a project on the <page name> page.
Outcome: clicking "Delete" opens the dialog, and the project is deleted only after clicking "Confirm".
Constraints: keep the current theme and button style, usable with a keyboard.
Done when: Esc closes the dialog and focus returns to the "Delete" button.This skill has no flags.
Below is the detailed version: the run flow, 6 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-ui-styling: style shadcn/ui and Tailwind apps, keep the design" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-ui-styling". 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-ui-styling
