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/agenta
최근 소스 활동: 2026년 8월 5일 23:04
감지된 SKILL.md 언어: 영어
스타: 4,719
포크: 664

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

검색으로 돌아가기 설치로 돌아가기

name	mobile-shadcn-conventions
description	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.