Skip to content
rmnr
DocsTourSlicesBest PracticeAgentsInstall

Command Palette

Search for a command to run...

New

Slice · AI prompt

Dashboard Shell — one responsive shell + mobile dock

One responsive dashboard chrome over one nav SSOT. React/Next remains the default shadcn rail + topbar + mobile dock/tile-drawer distribution. Explicit Svelte 5/SvelteKit adds native DashboardShell, DashboardSidebar, MobileDock, and MobileMenuDrawer over the same framework-neutral active-path, dock-derivation, and active-title core; Svelte uses `$app/state`, `$derived`, keyed lists, snippets, and CSS breakpoints with no React/Lucide/Vaul/shadcn runtime dependency.

Resource detail View source
Copy this prompt into Claude / Codex / Cursor
dashboard-shell.prompt.mdmarkdown
# Install `dashboard-shell` — Dashboard Shell — one responsive shell + mobile dock

> One responsive dashboard chrome over one nav SSOT.

📚 Knowledge base : https://resource.rahmanef.com/llms.txt
📦 Slice detail   : https://resource.rahmanef.com/slices/dashboard-shell
🧠 JSON catalog   : https://resource.rahmanef.com/api/knowledge?slice=dashboard-shell
🔗 Source         : https://github.com/rahmanef63/resource-site/tree/main/frontend/slices/dashboard-shell

## 1. Install

```bash

# alias: npx rr add dashboard-shell
```

The CLI copies `frontend/slices/dashboard-shell/` into your project + augments `.env.example` + installs npm deps automatically. Run it from your project root.

## 2. What it ships

- npm: `lucide-react`, `vaul`
- shadcn primitives: `sidebar`, `drawer`, `button`, `separator`, `sheet`, `tooltip`

## 3. Wire it up

Run `npx rr add dashboard-shell` for the React/Next default or `npx rr add dashboard-shell --framework sveltekit` for native Svelte 5/SvelteKit. Both share one nav/core contract (`isActive`, `deriveDock`, `activeItem`, `activeTitle`, `flattenNav`). React uses shadcn Sidebar/Drawer + Lucide/Vaul; Svelte uses `$app/state`, runes/snippets, CSS breakpoints, and no React/shadcn runtime. The same `nav` drives desktop rail, mobile dock, and tile drawer.

## Rules of engagement

- shadcn-only UI primitives. No raw `<button>` / `<dialog>` / native date or file inputs.
- 200-line hard cap per source file (extract neighbours when over).
- All Convex queries hit an index (`.withIndex(...)`); never bare `.collect()`.
- Public mutations/queries declare `args:` validators + authz.
- Full ruleset: https://resource.rahmanef.com/best-practice

The agent will fetch /llms.txt for the full ruleset and use /api/knowledge for the JSON catalog.