How do I install the Config Shared Web Angular skill?

Run npx skillmds@latest add eskcti/config-shared-web-angular 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 Angular 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 Angular?

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 Angular 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 Angular?

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

Config Shared Web Angular by eskcti

Name: Config Shared Web Angular
Author: EskCti

Config Shared Web Angular

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

EskCti Updated Sep 21, 2026

File contents

Config Shared Web (Angular)

Overview

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

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

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

Workflow

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

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

Integrar rotas — mesclar shellRoutes de src/app/app.routes.shell.ts em app.routes.ts.
Aplicar classe de modo no index.html:

<body class="dark">

Garantir angular.json → styles: ["src/styles.scss"].

Commands

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

O que o script garante

Artefato	Descrição
`src/styles.scss`	Tailwind v4 + tokens CSS
`postcss.config.json`	Plugin `@tailwindcss/postcss`
`layout/admin-shell/`	Shell completo com header + sidebar + footer
`layout/sidebar-menu/`	Menu lateral com seções
`shared/services/shell.service.ts`	Estado sidebar desktop/mobile
`features/dashboard/`	Dashboard vazio
`app.routes.shell.ts`	Rotas prontas para merge

Integração de rotas

// app.routes.ts
import { Routes } from '@angular/router';
import { shellRoutes } from './app.routes.shell';

export const routes: Routes = [
  // rotas públicas (login) aqui
  ...shellRoutes,
];

References

references/integrate-shell.md — merge de rotas e customização do menu
../config-project-angular/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-angulardescription: Bootstrap do shell web admin Angular 17+ com Tailwind CSS v4 — sidebar colapsável, topbar, rodapé, dashboard vazio e rotas de referência. Usar após config-project-angular quando o pedido envolver layout profissional, menu lateral ou shell reutilizável no frontend Angular.---# Config Shared Web (Angular)## OverviewExecuta bootstrap idempotente do **shell administrativo** no frontend Angular (`apps/web-angular` por padrão):- Tailwind CSS v4 + tokens de tema- **AdminShell**: sidebar esquerda colapsável, topbar, área principal, **rodapé**- **SidebarMenu** parametrizável- Dashboard vazio + página Examples- `app.routes.shell.ts` para merge com rotas existentes> Consultar `../skills-standards.md` §4.1 (Tailwind como padrão).## Workflow1. Garantir que `config-project-angular` já rodou (`apps/web-angular/package.json` existe).2. Executar:```bashnode .agents/skills/config-shared-web-angular/scripts/init-shared-web-angular.mjs \ --frontend-path apps/web-angular \ --theme fuchsia \ --mode dark```3. Integrar rotas — mesclar `shellRoutes` de `src/app/app.routes.shell.ts` em `app.routes.ts`.4. Aplicar classe de modo no `index.html`:```html<body class="dark">```5. Garantir `angular.json` → `styles`: `["src/styles.scss"]`.## Commands```bashnode .agents/skills/config-shared-web-angular/scripts/init-shared-web-angular.mjsnode .agents/skills/config-shared-web-angular/scripts/init-shared-web-angular.mjs --dry-runnode .agents/skills/config-shared-web-angular/scripts/init-shared-web-angular.mjs --skip-install```## O que o script garante| Artefato | Descrição ||----------|-----------|| `src/styles.scss` | Tailwind v4 + tokens CSS || `postcss.config.json` | Plugin `@tailwindcss/postcss` || `layout/admin-shell/` | Shell completo com header + sidebar + footer || `layout/sidebar-menu/` | Menu lateral com seções || `shared/services/shell.service.ts` | Estado sidebar desktop/mobile || `features/dashboard/` | Dashboard vazio || `app.routes.shell.ts` | Rotas prontas para merge |## Integração de rotas```typescript// app.routes.tsimport { Routes } from '@angular/router';import { shellRoutes } from './app.routes.shell';export const routes: Routes = [ // rotas públicas (login) aqui ...shellRoutes,];```## References- `references/integrate-shell.md` — merge de rotas e customização do menu- `../config-project-angular/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