How do I install the Mobile Shadcn Conventions skill?

Run npx skillmds@latest add agenta-ai/mobile-shadcn-conventions in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Mobile Shadcn Conventions safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mobile Shadcn Conventions?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mobile Shadcn Conventions free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mobile Shadcn Conventions?

Agenta-AI (@agenta-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mobile Shadcn Conventions by agenta-ai

Name: Mobile Shadcn Conventions
Rating: 4.666666666666667 (3 reviews)
Author: Agenta-AI

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.

Agenta-AI Updated Sep 10, 2026

File contents

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 in components.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) to web/mobile/package.json — commit the manifest and web/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 in scripts/generate-shadcn-tokens.ts + the @theme inline map in globals.css first — Tailwind v4 silently generates nothing for unmapped tokens.

Theming — the token bridge

shadcn variables (--background, --primary, ...) are NOT hand-maintained. They are generated into src/styles/theme.generated.css from web/oss/src/styles/theme/palette.ts by scripts/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 run pnpm --filter @agenta/mobile generate:tokens and commit the regenerated CSS.
Never edit theme.generated.css directly; never introduce raw hex values in components — if a needed role is missing, extend the bridge.
Dark mode is the .dark class on <html> (@custom-variant dark in globals.css), set pre-paint by the _document.tsx init script from the shared agenta-theme localStorage 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 over components/ui/* primitives (cva variants where appropriate).
Use the cn util from @/lib/utils for 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 in src/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/chat hooks — never re-implement orchestration inside a rendered component.

---name: mobile-shadcn-conventionsdescription: 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.---# 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 in `components.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`) to `web/mobile/package.json` — commit the manifest and `web/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 in `scripts/generate-shadcn-tokens.ts` + the `@theme inline` map in `globals.css` first — Tailwind v4 silently generates nothing for unmapped tokens.## Theming — the token bridge- shadcn variables (`--background`, `--primary`, ...) are NOT hand-maintained. They are generated into `src/styles/theme.generated.css` from `web/oss/src/styles/theme/palette.ts` by `scripts/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 run `pnpm --filter @agenta/mobile generate:tokens` and commit the regenerated CSS.- Never edit `theme.generated.css` directly; never introduce raw hex values in components — if a needed role is missing, extend the bridge.- Dark mode is the `.dark` class on `<html>` (`@custom-variant dark` in `globals.css`), set pre-paint by the `_document.tsx` init script from the shared `agenta-theme` localStorage 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 over `components/ui/*` primitives (cva variants where appropriate).- Use the `cn` util from `@/lib/utils` for 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 in `src/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/chat` hooks — never re-implement orchestration inside a rendered component.

Frequently asked questions