How do I install the Config Shared Web Leptos skill?

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

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

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

Config Shared Web Leptos by eskcti — Agent Skill

Name: Config Shared Web Leptos
Author: EskCti

Config Shared Web Leptos

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

EskCti Updated Sep 21, 2026

File contents

Config Shared Web (Leptos)

Overview

Executa bootstrap idempotente do shell administrativo no crate Leptos (crates/web-leptos 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
Rotas integradas em app.rs

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

Workflow

Garantir que config-project-leptos já rodou (crates/web-leptos/Cargo.toml existe).
Executar:

node config-shared-web-leptos/scripts/init-shared-web-leptos.mjs \
  --frontend-path crates/web-leptos \
  --theme fuchsia \
  --mode dark

Integrar rotas — o script atualiza app.rs para usar AdminShell como layout.
Validar: cargo leptos watch e navegar para / e /examples.

Commands

node config-shared-web-leptos/scripts/init-shared-web-leptos.mjs
node config-shared-web-leptos/scripts/init-shared-web-leptos.mjs --dry-run

O que o script garante

Artefato	Descrição
`style/main.css`	Tailwind v4 + tokens CSS (merge se existir)
`layouts/admin_shell.rs`	Shell completo com header + sidebar + footer
`components/sidebar_menu.rs`	Menu lateral com seções
`components/app_footer.rs`	Rodapé
`pages/dashboard.rs`	Dashboard vazio
`pages/examples.rs`	Página de referência
`shared/shell_navigation.rs`	Itens do menu

Integração de rotas

// app.rs — após bootstrap
use crate::layouts::admin_shell::AdminShell;
use crate::pages::{dashboard::DashboardPage, examples::ExamplesPage};

view! {
    <Router>
        <AdminShell>
            <Routes fallback=|| view! { <p>"Não encontrado"</p> }>
                <Route path=path!("/") view=DashboardPage/>
                <Route path=path!("/examples") view=ExamplesPage/>
            </Routes>
        </AdminShell>
    </Router>
}

References

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

Global Standards

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

---name: config-shared-web-leptosdescription: Bootstrap do shell web admin Leptos SSR com Tailwind CSS v4 — sidebar colapsável, topbar, rodapé, dashboard vazio e rotas de referência. Usar após config-project-leptos quando o pedido envolver layout profissional, menu lateral ou shell reutilizável no frontend Leptos.---# Config Shared Web (Leptos)## OverviewExecuta bootstrap idempotente do **shell administrativo** no crate Leptos (`crates/web-leptos` 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- Rotas integradas em `app.rs`> Consultar `../skills-standards.md` §4.1 (Tailwind como padrão).## Workflow1. Garantir que `config-project-leptos` já rodou (`crates/web-leptos/Cargo.toml` existe).2. Executar:```bashnode config-shared-web-leptos/scripts/init-shared-web-leptos.mjs \ --frontend-path crates/web-leptos \ --theme fuchsia \ --mode dark```3. Integrar rotas — o script atualiza `app.rs` para usar `AdminShell` como layout.4. Validar: `cargo leptos watch` e navegar para `/` e `/examples`.## Commands```bashnode config-shared-web-leptos/scripts/init-shared-web-leptos.mjsnode config-shared-web-leptos/scripts/init-shared-web-leptos.mjs --dry-run```## O que o script garante| Artefato | Descrição ||----------|-----------|| `style/main.css` | Tailwind v4 + tokens CSS (merge se existir) || `layouts/admin_shell.rs` | Shell completo com header + sidebar + footer || `components/sidebar_menu.rs` | Menu lateral com seções || `components/app_footer.rs` | Rodapé || `pages/dashboard.rs` | Dashboard vazio || `pages/examples.rs` | Página de referência || `shared/shell_navigation.rs` | Itens do menu |## Integração de rotas```rust// app.rs — após bootstrapuse crate::layouts::admin_shell::AdminShell;use crate::pages::{dashboard::DashboardPage, examples::ExamplesPage};view! { <Router> <AdminShell> <Routes fallback=|| view! { <p>"Não encontrado"</p> }> <Route path=path!("/") view=DashboardPage/> <Route path=path!("/examples") view=ExamplesPage/> </Routes> </AdminShell> </Router>}```## References- `references/integrate-shell.md` — customização do menu e rotas- `../config-project-leptos/references/tailwind-setup.md`- `../config-shared-web-vue/SKILL.md` — referência equivalente Vue## Global Standards- Consultar `../skills-standards.md` para padrões globais.

Frequently asked questions