How do I install the Config Shared Web Vue skill?

Run npx skillmds@latest add eskcti/config-shared-web-vue 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 Config Shared Web Vue safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Config Shared Web Vue?

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 Config Shared Web Vue free to use?

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

Who published Config Shared Web Vue?

EskCti (@eskcti) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Config Shared Web Vue by eskcti — Agent Skill

Name: Config Shared Web Vue
Author: EskCti

Config Shared Web Vue

Bootstrap do shell web admin Vue 3 com Tailwind CSS v4 — sidebar colapsável, topbar, rodapé, dashboard vazio e rotas de referência. Usar após config-project-vue quando o pedido envolver layout profissional, menu lateral ou shell reutilizável no frontend Vue.

EskCti Updated Sep 21, 2026

File contents

Config Shared Web (Vue)

Overview

Executa bootstrap idempotente do shell administrativo no frontend Vue (apps/web-vue por padrão):

Tailwind CSS v4 + tokens de tema (@tailwindcss/vite)
AdminShell: sidebar esquerda colapsável, topbar, área principal, rodapé
SidebarMenu parametrizável
Dashboard vazio + página Examples
router/shell.routes.ts para merge com rotas existentes

Consultar ../skills-standards.md §4.1 (Tailwind como padrão).

Workflow

Garantir que config-project-vue já rodou (apps/web-vue/package.json existe).
Executar:

node .agents/skills/config-shared-web-vue/scripts/init-shared-web-vue.mjs \
  --frontend-path apps/web-vue \
  --theme fuchsia \
  --mode dark

Integrar rotas — mesclar shellRoutes de src/router/shell.routes.ts em router/index.ts.
Importar CSS no main.ts: import './assets/main.css'.
Adicionar plugin Tailwind no vite.config.ts:

import tailwindcss from '@tailwindcss/vite'
// plugins: [vue(), tailwindcss()]

Aplicar classe de modo no index.html: <html class="dark">.

Commands

node .agents/skills/config-shared-web-vue/scripts/init-shared-web-vue.mjs
node .agents/skills/config-shared-web-vue/scripts/init-shared-web-vue.mjs --dry-run
node .agents/skills/config-shared-web-vue/scripts/init-shared-web-vue.mjs --skip-install

O que o script garante

Artefato	Descrição
`src/assets/main.css`	Tailwind v4 + tokens CSS
`layouts/AdminShell.vue`	Shell completo com header + sidebar + footer
`components/SidebarMenu.vue`	Menu lateral com seções
`composables/useShell.ts`	Estado sidebar desktop/mobile
`views/DashboardView.vue`	Dashboard vazio
`router/shell.routes.ts`	Rotas prontas para merge

Integração de rotas

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import { shellRoutes } from './shell.routes'

export default createRouter({
  history: createWebHistory(),
  routes: [
    // rotas públicas (login) aqui
    ...shellRoutes,
  ],
})

References

references/integrate-shell.md — merge de rotas e customização do menu
../config-project-vue/references/tailwind-setup.md
../config-shared-web/SKILL.md — referência equivalente Next.js

Global Standards

Consultar ../skills-standards.md para padrões globais.

---name: config-shared-web-vuedescription: Bootstrap do shell web admin Vue 3 com Tailwind CSS v4 — sidebar colapsável, topbar, rodapé, dashboard vazio e rotas de referência. Usar após config-project-vue quando o pedido envolver layout profissional, menu lateral ou shell reutilizável no frontend Vue.---# Config Shared Web (Vue)## OverviewExecuta bootstrap idempotente do **shell administrativo** no frontend Vue (`apps/web-vue` por padrão):- Tailwind CSS v4 + tokens de tema (`@tailwindcss/vite`)- **AdminShell**: sidebar esquerda colapsável, topbar, área principal, **rodapé**- **SidebarMenu** parametrizável- Dashboard vazio + página Examples- `router/shell.routes.ts` para merge com rotas existentes> Consultar `../skills-standards.md` §4.1 (Tailwind como padrão).## Workflow1. Garantir que `config-project-vue` já rodou (`apps/web-vue/package.json` existe).2. Executar:```bashnode .agents/skills/config-shared-web-vue/scripts/init-shared-web-vue.mjs \ --frontend-path apps/web-vue \ --theme fuchsia \ --mode dark```3. Integrar rotas — mesclar `shellRoutes` de `src/router/shell.routes.ts` em `router/index.ts`.4. Importar CSS no `main.ts`: `import './assets/main.css'`.5. Adicionar plugin Tailwind no `vite.config.ts`:```typescriptimport tailwindcss from '@tailwindcss/vite'// plugins: [vue(), tailwindcss()]```6. Aplicar classe de modo no `index.html`: `<html class="dark">`.## Commands```bashnode .agents/skills/config-shared-web-vue/scripts/init-shared-web-vue.mjsnode .agents/skills/config-shared-web-vue/scripts/init-shared-web-vue.mjs --dry-runnode .agents/skills/config-shared-web-vue/scripts/init-shared-web-vue.mjs --skip-install```## O que o script garante| Artefato | Descrição ||----------|-----------|| `src/assets/main.css` | Tailwind v4 + tokens CSS || `layouts/AdminShell.vue` | Shell completo com header + sidebar + footer || `components/SidebarMenu.vue` | Menu lateral com seções || `composables/useShell.ts` | Estado sidebar desktop/mobile || `views/DashboardView.vue` | Dashboard vazio || `router/shell.routes.ts` | Rotas prontas para merge |## Integração de rotas```typescript// router/index.tsimport { createRouter, createWebHistory } from 'vue-router'import { shellRoutes } from './shell.routes'export default createRouter({ history: createWebHistory(), routes: [ // rotas públicas (login) aqui ...shellRoutes, ],})```## References- `references/integrate-shell.md` — merge de rotas e customização do menu- `../config-project-vue/references/tailwind-setup.md`- `../config-shared-web/SKILL.md` — referência equivalente Next.js## Global Standards- Consultar `../skills-standards.md` para padrões globais.

Frequently asked questions