DevelopmentMédio

Shadcn Vue

pornoartem·noartem· v1.0.0 · atualizado em 2026-04-10

Score

Utilize shadcn-vue for Vue/Nuxt projects, enhanced with Reka UI components and Tailwind CSS. This skill assists with accessible UI development, auto form generation, data tables, charts, dark mode implementation, MCP server setup, and troubleshooting component imports or Reka UI errors.

vuenuxtshadcn-vueui-componentstailwind-cssfrontend-developmentcomponent-library

Linguagens

TypeScriptJavaScriptVue

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdshadcn-vue/workflow

Initialize shadcn-vue: — Run `npx shadcn-vue@latest init` to set up the project.

Configure TypeScript: — Update `tsconfig.json` with path aliases.

Configure Vite: — Update `vite.config.ts` to include Tailwind CSS and path aliases.

Add components: — Use `npx shadcn-vue@latest add <component>` to install desired components.

Customize theme: — Modify CSS variables in `components.json` for theming.

Implement dark mode: — Follow the `dark-mode-setup.md` guide for implementation.

Test components: — Verify that the components are rendering correctly and functioning as expected.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

Depende deShadcn Vue

100%

Similar aAceternity UI Skill

60%

Similar aTailwind Best Practices

60%

Similar aAngular Core Mental Model

60%

Similar a ←Add Component from ShipSwift

40%

Árvore do Skill

Shadcn Vue

shadcn-vue

Fases Cognitivas5

1.SENSE

2.CONTEXTUALIZE

3.RECOMMEND

4.ACT

5.REFLECT

Triggers9

use shadcn-vue components in my Vue projectadd a button component using shadcn-vueinitialize shadcn-vue in my Nuxt applicationconfigure Tailwind CSS with shadcn-vueimplement dark mode with shadcn-vuefix shadcn-vue component import errorsset up shadcn-vue with Reka UIgenerate a data table using shadcn-vuecustomize the theme of shadcn-vue components

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download shadcn-vue

$ synaptic skills detail shadcn-vue

$ synaptic skills live shadcn-vue

Dependências

shadcn-vue vue nuxt vite tailwindcss @vitejs/plugin-vue @tailwindcss/vite clsx tailwind-merge

Links

GitHub Repository