Claude MarketplacesSubmit
noartem avatar

Shadcn Vue

noartem/laravel-vue-skills

This gets you up and running with shadcn-vue, the accessible component library built on Reka UI and Tailwind. The skill bundles everything you need: CLI commands for init and component installation, a 267-line error catalog covering the seven most common setup failures, complete dark mode implementation guides for Vue 3 and Nuxt, and copy-paste examples for all 50+ components. It includes MCP server configs for opencode, Codex, and Cursor. The standout piece is the conditional reference loading system that pulls in the right documentation based on what you're doing, whether that's fixing import errors, implementing data tables with TanStack, or wiring up CSS variable theming. One gotcha: you can't change your style choice after init without starting over.

skills.sh installs
750
GitHub stars
9
last updated
Jul 14, 2026
View on GitHub

Install

$ npx -y skills add noartem/laravel-vue-skills --skill shadcn-vue --agent claude-code

Installs into .claude/skills of the current project.

Files

shadcn-vue

A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.

IMPORTANT: Run all CLI commands using the project's package runner: npx shadcn-vue@latest, pnpm dlx shadcn-vue@latest, or bunx --bun shadcn-vue@latest — based on the project's packageManager. Examples below use npx shadcn-vue@latest but substitute the correct runner for the project.

Current Project Context

!`npx shadcn-vue@latest info --json`

The JSON above contains the project config and installed components. Use npx shadcn-vue@latest docs <component> to get documentation and example URLs for any component.

Principles

  1. Use existing components first. Use npx shadcn-vue@latest search to check registries before writing custom UI. Check community registries too.
  2. Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
  3. Use built-in variants before custom styles. variant="outline", size="sm", etc.
  4. Use semantic colors. bg-primary, text-muted-foreground — never raw values like bg-blue-500.

Critical Rules

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/noartem/laravel-vue-skills
Categories
Frontend Development, PHP & Laravel
First seen
Apr 16, 2026

Recommended

More Frontend Development
1sickn33 avatarfrontend-mobile-development-component-scaffoldsickn33/antigravity-awesome-skillsfrontend mobile development component scaffold442skills.sh installs
2secondsky avatarbun-react-ssrsecondsky/claude-skillsUse when building server-rendered React with Bun, including streaming SSR, hydration, renderToString, or custom SSR without a framework.330skills.sh installs
3jackspace avatarbase-ui-reactjackspace/claudeskillzbase ui react259skills.sh installs
4duyet avatarreact-nextjs-patternsduyet/claude-pluginsreact nextjs patterns231skills.sh installs
5akillness avatarui-component-patternsakillness/oh-my-skillsui component patterns171skills.sh installs
6vuejs-ai avatarvue-jsx-best-practicesvuejs-ai/skillsJSX syntax in Vue (e.g., class vs className, JSX plugin config).11.9Kskills.sh installs