mobile-shadcn-conventions
How the Agenta mobile app (web/mobile) installs and extends shadcn/ui registry components, themes them via the palette token bridge, and uses Vercel AI Elements. Use when adding UI components under web/mobile, changing theme colors, editing components.json or globals.css, or building chat UI with AI Elements.
Install
npx skillscat add agenta-ai/agenta/mobile-shadcn-conventions Install via the SkillsCat registry.
SKILL.md
Mobile shadcn conventions
web/mobile uses shadcn/ui on Tailwind v4 with CSS variables. No antd, ever.
Installing registry components
- Always install via the CLI from
web/mobile/:pnpm dlx shadcn@latest add <component>(e.g.button,sheet,dialog,command,skeleton,input). - Components land in
src/components/ui/(aliases incomponents.json). They
are owned code: you may adapt them, but keep diffs minimal and expressed in
semantic tokens so upstream refreshes stay cheap. - The CLI adds any peer deps (e.g.
@radix-ui/react-slot) toweb/mobile/package.json— commit the manifest andweb/pnpm-lock.yaml
changes together with the component. - Never copy component source from the shadcn website by hand; the CLI resolves
the Tailwind v4 variant correctly. - Installing a shadcn component that references a NEW token (e.g.
bg-sidebar,chart-*) requires extending VARS inscripts/generate-shadcn-tokens.ts+
the@theme inlinemap inglobals.cssfirst — Tailwind v4 silently
generates nothing for unmapped tokens.
Theming — the token bridge
- shadcn variables (
--background,--primary, ...) are NOT hand-maintained.
They are generated intosrc/styles/theme.generated.cssfromweb/oss/src/styles/theme/palette.tsbyscripts/generate-shadcn-tokens.ts. - To change a color: edit
palette.ts(if the design-system value is wrong) or
the ROLE MAP in the script (if the mapping is wrong), then runpnpm --filter @agenta/mobile generate:tokensand commit the regenerated CSS. - Never edit
theme.generated.cssdirectly; never introduce raw hex values in
components — if a needed role is missing, extend the bridge. - Dark mode is the
.darkclass on<html>(@custom-variant darkinglobals.css), set pre-paint by the_document.tsxinit script from the
sharedagenta-themelocalStorage key. Both themes must be checked for every
new surface.
Extending components
- Wrap, don't fork: feature-specific variants live in
src/features/*as thin
wrappers overcomponents/ui/*primitives (cva variants where appropriate). - Use the
cnutil from@/lib/utilsfor all class merging.
Vercel AI Elements (chat render layer, WP3b+)
- AI Elements are shadcn registry components; install them the same way
(pnpm dlx shadcn@latest add <ai-elements registry item>), landing insrc/components/ui//src/components/ai-elements/per the registry config. - They are the base of the chat skin (Conversation, Message, Response,
Reasoning, Tool, PromptInput); behavior comes from@agenta/chathooks —
never re-implement orchestration inside a rendered component.
Categories
Install
npx skillscat add agenta-ai/agenta/mobile-shadcn-conventions Install via the SkillsCat registry.
Repository Stars
The star count shown is for the parent repository (Agenta-AI/agenta), not this specific skill.
.agents/skills/mobile-shadcn-conventions