How do I install the Shadcn Primitives Wrappers skill?

Run npx skillmds@latest add tomevault-io/shadcn-primitives-wrappers 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 Shadcn Primitives Wrappers safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Shadcn Primitives Wrappers?

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 Shadcn Primitives Wrappers free to use?

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

Who published Shadcn Primitives Wrappers?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Shadcn Primitives Wrappers by tomevault-io

Name: Shadcn Primitives Wrappers
Author: tomevault-io

Shadcn Primitives Wrappers

Establish a two-layer UI model (primitives vs product wrappers) for ShadCN components. Use when importing or modifying ShadCN components, deciding whether to adapt primitives or create wrappers, or when aligning typography/tokens with the design system. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

ShadCN Primitives + Product Wrappers

Intent

Keep ShadCN primitives stable and token-normalized in src/components/ui, and express product typography/semantics in wrappers in src/components/typography or src/components/elements.

Touch vs wrap

Touch the primitive when:

It uses non-system tokens (text-sm, rounded-md, gap-4, default ShadCN colors).
It is reused widely and needs consistent defaults.
Fixing it once prevents repeated call-site overrides.

Wrap the primitive when:

You need semantic intent (eyebrow, label, badge copy, product defaults).
Typography should be driven by Text or textVariants.
The component is a composed pattern (Badge + Text, Button + Icon + Label).

Workflow

Import the ShadCN component into src/components/ui.
Normalize tokens using tailwind-shadcn-adaptation (typography/spacing/radius) and class sorting.
Keep primitives agnostic: layout, shape, state, interaction only. No product semantics.
Add a wrapper in src/components/typography or src/components/elements:
- Compose the primitive with Text or textVariants.
- Use asChild/Slot patterns to avoid coupling.
- Provide opinionated defaults for product usage.

Cross-skill handoff

If you're adapting a new primitive, read tailwind-shadcn-adaptation first.
If you see repeated typography overrides in call sites, create a wrapper here.

Anti-patterns

Adding typography intent props to ui primitives.
Fixing typography in multiple call sites instead of a wrapper.
Mixing product semantics into src/components/ui.

Example

Badge normalized once in src/components/ui/badge.tsx.
EyebrowBadge in src/components/typography composes Badge + Text intent="eyebrow".

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: shadcn-primitives-wrappersdescription: Establish a two-layer UI model (primitives vs product wrappers) for ShadCN components. Use when importing or modifying ShadCN components, deciding whether to adapt primitives or create wrappers, or when aligning typography/tokens with the design system. Use when this capability is needed.---# ShadCN Primitives + Product Wrappers## IntentKeep ShadCN primitives stable and token-normalized in `src/components/ui`, and express product typography/semantics in wrappers in `src/components/typography` or `src/components/elements`.## Touch vs wrapTouch the primitive when:- It uses non-system tokens (`text-sm`, `rounded-md`, `gap-4`, default ShadCN colors).- It is reused widely and needs consistent defaults.- Fixing it once prevents repeated call-site overrides.Wrap the primitive when:- You need semantic intent (eyebrow, label, badge copy, product defaults).- Typography should be driven by `Text` or `textVariants`.- The component is a composed pattern (Badge + Text, Button + Icon + Label).## Workflow1. Import the ShadCN component into `src/components/ui`.2. Normalize tokens using `tailwind-shadcn-adaptation` (typography/spacing/radius) and class sorting.3. Keep primitives agnostic: layout, shape, state, interaction only. No product semantics.4. Add a wrapper in `src/components/typography` or `src/components/elements`: - Compose the primitive with `Text` or `textVariants`. - Use `asChild`/Slot patterns to avoid coupling. - Provide opinionated defaults for product usage.## Cross-skill handoff- If you're adapting a new primitive, read `tailwind-shadcn-adaptation` first.- If you see repeated typography overrides in call sites, create a wrapper here.## Anti-patterns- Adding typography intent props to `ui` primitives.- Fixing typography in multiple call sites instead of a wrapper.- Mixing product semantics into `src/components/ui`.## Example- `Badge` normalized once in `src/components/ui/badge.tsx`.- `EyebrowBadge` in `src/components/typography` composes `Badge` + `Text intent="eyebrow"`.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/vana-com) — claim your Tome and manage your conversions.

Frequently asked questions