# Discountedcookie 10x Mapmaster Shadcn Vue > shadcn-vue - Skill: `tomevault-io/discountedcookie-10x-mapmaster-shadcn-vue` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/discountedcookie-10x-mapmaster-shadcn-vue` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/discountedcookie-10x-mapmaster-shadcn-vue/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/discountedcookie-10x-mapmaster-shadcn-vue --- # shadcn-vue Context skill for working with shadcn-vue components. > **Announce:** "I'm loading shadcn-vue context for component work." ## Key Facts - Built on **Reka UI** primitives (not Radix like React version) - Uses **Tailwind CSS** for styling - Forms integrate with **VeeValidate** + **zod** - CLI: `npx shadcn-vue@latest add [component]` ## When Stuck Fetch docs with `webfetch` for the component you need: | Category | Components | Base URL | |----------|------------|----------| | **Form** | form, button, input, select, checkbox, switch | `https://www.shadcn-vue.com/docs/components/[name]` | | **Layout** | sidebar, tabs, accordion, navigation-menu | same pattern | | **Overlay** | dialog, sheet, popover, tooltip, dropdown-menu | same pattern | | **Feedback** | alert, sonner (toast), progress, badge, skeleton | same pattern | | **Display** | card, table, avatar | same pattern | **Full LLM reference:** `https://www.shadcn-vue.com/llms.txt` ## Component Patterns in This Project Check existing components in `src/components/ui/` before adding new ones. Common patterns used: - Toast notifications via Sonner - Forms with VeeValidate + zod schemas - Dialog for modals, Sheet for slide-overs ## Do NOT - Import from `@radix-vue` directly - use Reka UI via shadcn-vue - Create custom styles when a variant exists - Skip checking if component already exists in `src/components/ui/` --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/discountedcookie) — claim your Tome and manage your conversions.