Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
noartem avatar

Laravel Laravel Prompting Patterns

noartem/laravel-vue-skills

  • 34 installs
  • 10 repo stars
  • Updated June 13, 2026
  • noartem/laravel-vue-skills

Helps with ai & agent building tasks.

About

laravel-laravel-prompting-patterns is a Claude Code skill in the AI & Agent Building category.

  • laravel-laravel-prompting-patterns
  • AI & Agent Building
  • AI-coding skill

Laravel Laravel Prompting Patterns by the numbers

  • 34 all-time installs (skills.sh)
  • Ranked #8,822 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/noartem/laravel-vue-skills --skill laravel-laravel-prompting-patterns

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs34
repo stars★ 10
Last updatedJune 13, 2026
Repositorynoartem/laravel-vue-skills ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

shadcn-vue

---

Quick Start (3 Minutes)

For Vue Projects (Vite)

1. Initialize shadcn-vue
npx shadcn-vue@latest init

During initialization:

  • Style: New York or Default (cannot change later!)
  • Base color: Slate (recommended)
  • CSS variables: Yes (required for dark mode)
2. Configure TypeScript Path Aliases
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
3. Configure Vite
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite"; // Tailwind v4
import path from "path";

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});
4. Add Your First Component
npx shadcn-vue@latest add button

---

Quick Reference

NeedCommand or file
Initialize projectnpx shadcn-vue@latest init
Add componentnpx shadcn-vue@latest add button
Add multiple componentsnpx shadcn-vue@latest add button card dialog
Build registry JSONnpx shadcn-vue@latest build
Generate component docsnpx tsx scripts/generate-shadcn-components.ts
Enable CSS variablescomponents.json → tailwind.cssVariables: true
Add registry namespacecomponents.json → registries map
Opencode MCP initnpx shadcn-vue@latest mcp init --client opencode
Codex MCP config~/.codex/config.toml with mcp_servers.shadcn

---

Bundled Resources

Templates (templates/):

  • quick-setup.ts - Complete setup guide for Vue/Nuxt with examples (190 lines)

References (references/):

  • cli.md - CLI commands and options
  • mcp.md - MCP setup, client configs, prompts
  • theming.md - Theming and cssVariables
  • error-catalog.md - All 7 documented issues with solutions (267 lines)
  • component-examples.md - All 50+ component examples with code
  • dark-mode-setup.md - Complete dark mode implementation guide
  • data-tables.md - Data tables with TanStack Table

Component Documentation (components/):

  • references/components.md - Index of all shadcn-vue components
  • components/<component>.md - Individual component documentation with installation, usage, and examples

Official Documentation:

  • shadcn-vue Docs: https://shadcn-vue.com
  • Reka UI Docs: https://reka-ui.com
  • GitHub: https://github.com/radix-vue/shadcn-vue

---

When to Load References

Load these references based on the task:

1. Load `references/error-catalog.md` when:

  • User encounters "component not found" or import errors
  • Setup commands fail or configuration issues arise
  • Tailwind CSS variables or TypeScript paths broken
  • Trigger phrases: "not working", "error", "fails to", "broken"

2. Load `references/components.md` when:

  • User asks what components are available (names, categories, status)
  • User needs to add/use a component and wants the correct install/import paths
  • You need to confirm a component exists before recommending a custom build

3. Load `references/component-examples.md` when:

  • User asks "how do I implement [component]?"
  • Need copy-paste examples for specific components
  • Building forms, tables, navigation, or data display
  • Trigger phrases: "example", "how to use", "implement", "code sample"

4. Load `references/cli.md` when:

  • User asks how to run the CLI (init, add, update) or what prompts mean
  • Need the exact command/flags for installing one or more components
  • Troubleshooting CLI-related issues (registry, paths, overwrites)

5. Load `references/dark-mode-setup.md` when:

  • Implementing dark mode / theme switching
  • User mentions Vue 3 + Vite, Nuxt, or Astro setup
  • Need composable patterns for theme management
  • Trigger phrases: "dark mode", "theme", "light/dark", "color scheme"

6. Load `references/theming.md` when:

  • User wants to customize theme tokens via CSS variables (cssVariables, :root, .dark)
  • Need to wire Tailwind to CSS-variable-based colors and radii
  • Setting up/adjusting design tokens (colors, radius, typography) for shadcn-vue

7. Load `references/mcp.md` when:

  • Setting up MCP server for opencode, Codex, Cursor, VS Code
  • Configuring registries in components.json
  • Troubleshooting missing components or registry namespaces
  • Trigger phrases: "MCP", "opencode", "codex", "cursor", "registry"

8. Load `references/data-tables.md` when:

  • Building sortable/filterable/paginated tables
  • User mentions TanStack Table or DataTable
  • Trigger phrases: "data table", "table", "tanstack", "sorting", "pagination"

---

Critical Rules

Always Do

✅ Run `init` before adding components

  • Creates required configuration and utilities
  • Sets up path aliases

✅ Use CSS variables for theming (cssVariables: true)

  • Enables dark mode support
  • Flexible theme customization

✅ Configure TypeScript path aliases

  • Required for component imports
  • Must match components.json aliases

✅ Keep components.json in version control

  • Team members need same configuration
  • Documents project setup

Never Do

❌ Don't change `style` after initialization

  • Requires complete reinstall
  • Reinitialize in new directory instead

❌ Don't mix Radix Vue and Reka UI v2

  • Incompatible component APIs
  • Use one or the other

❌ Don't skip TypeScript configuration

  • Component imports will fail
  • IDE autocomplete won't work

❌ Don't use without Tailwind CSS

  • Components are styled with Tailwind
  • Won't render correctly

---

Common Mistakes

  • Running add before init and missing components.json.
  • Forgetting to enable the MCP server in the client UI/config.
  • Mis-typed registry namespaces (@namespace/component).
  • Using CSS variable classes without tailwind.cssVariables: true.

---

CLI Commands Reference

init Command

# Initialize in current directory
npx shadcn-vue@latest init

# Initialize in specific directory (monorepo)
npx shadcn-vue@latest init -c ./apps/web

add Command

# Add single component
npx shadcn-vue@latest add button

# Add multiple components
npx shadcn-vue@latest add button card dialog

# Add all components
npx shadcn-vue@latest add --all

diff Command

# Check for component updates
npx shadcn-vue@latest diff button

mcp Command

# Initialize MCP for specific client
npx shadcn-vue@latest mcp init --client opencode
npx shadcn-vue@latest mcp init --client codex
npx shadcn-vue@latest mcp init --client cursor
npx shadcn-vue@latest mcp init --client vscode

---

Configuration

shadcn-vue uses components.json to configure:

  • Component paths (@/components/ui)
  • Utils location (@/lib/utils)
  • Tailwind config paths
  • TypeScript paths

Full example: See templates/components.json or generate via npx shadcn-vue@latest init

---

Utils Library

The @/lib/utils.ts file provides the cn() helper for merging Tailwind classes:

  • Combines multiple className strings
  • Uses clsx + tailwind-merge for conflict resolution

Auto-generated by shadcn-vue init - no manual setup needed.

Related skills

mattpocockSetup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196kopen.feishu.cnLark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402kjuliusbrusseeCavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7klarksuiteLark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16kxixu-meRunning Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72runcomfy-comCodex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10
AI & Agent Buildingagents
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.