/dashboard-cockpit

description: Repeatable pass upgrading an Angular admin dashboard into a compact black-and-cyan developer-cockpit PWA
argument-hint: [dashboard path or feature]

<!-- <SUBAGENT-STOP>: skip this skill when running inside a subagent. Meta-skills must not leak into spawned subagent contexts. Source: obra/superpowers `using-superpowers` skill. --> <SUBAGENT-STOP/>

Upgrade an Angular admin dashboard into a polished compact **black-and-cyan dev-cockpit PWA**. Repeatable — rerun to push density + polish one step further. Doctrine via cross-link, never duplicated: [[angular]] · [[frontend-stack]] · [[cinematic-ui-patterns]] · [[text-contrast]] · [[agent-selection]] · [[e2e-testing]] · [[verification-loop]].

**Purpose** — turn a working Angular admin into a dense, gorgeous, fully-i18n, PWA-packaged developer cockpit with zero full page reloads. **When to use** — any Angular dashboard that needs polish, feature-module structure, i18n, PWA, or SPA-navigation hardening; rerun each pass. **Inputs** — `$ARGUMENTS` (dashboard path or feature); the live project; installed Angular version + package manager + build target. **Outputs** — feature-module routes + Spartan UI cockpit + cyan theme tokens + @angular/localize i18n + PWA kit + docs + destructive Playwright E2E. **Verification** — project's real gates (`lint`/`typecheck`/`test`/`build`/`e2e`) green; full-reload detection passes; deploy + prod-E2E per [[verification-loop]]. **Can update ~/.agentskills or ~/.claude?** NO — project work only; global config only via `/self-improve`.

Mission

• Angular 22 feature-module architecture · lazy-loaded features · **Spartan UI (shadcn-for-Angular) primary UI** · **`@angular/localize`** full i18n · **PWA** packaging.
• Ionic/Capacitor ONLY where they genuinely help (mobile drawer ergonomics / native shells already in repo).
• Compact black/cyan dev-cockpit styling · strong a11y + perf · destructive Playwright E2E.

NON-NEGOTIABLE — no full page reloads inside the dashboard

• Audit + remove: `window.location.href`, raw internal `<a href>`, `location.assign`, reload-triggering forms, hard redirects, router-bypassing menu links.
• Replace with `routerLink` / `Router.navigate` / guards / resolvers / child routes / lazy feature routes.
• Shell (sidebar · topbar · command palette · theme · language · session) **persists** across every navigation — never re-mounts.

Architecture — inspect first

• Detect installed Angular version + package manager (`pnpm`/`npm`) + build (esbuild/Vite) before writing.
• Standalone components · feature-module boundary per domain · one lazy route file per feature · strict TS · signals + RxJS per [[angular]] · typed reactive forms · functional interceptors/guards · `@defer` · modern control flow (`@if`/`@for`/`@switch`) · SSR/hydration-safe.

src/app/
├── core/            # singletons: auth, session, theme, lang, http interceptors, guards
├── shared/          # design-system primitives, Spartan UI wrappers, pipes, a11y
└── dashboard/
    ├── dashboard-shell.component.ts   # persistent sidebar+topbar+palette
    ├── dashboard.routes.ts
    └── features/<feature>/<feature>.routes.ts + *.component.ts + *.spec.ts

export const dashboardRoutes: Routes = [
  {
    path: '',
    component: DashboardShellComponent, // mounts ONCE, never destroyed on child nav
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'overview' },
      { path: 'overview', loadComponent: () => import('./features/overview/overview.component').then(m => m.OverviewComponent), data: { titleKey: 'nav.overview', icon: 'gauge' } },
      { path: 'users', loadChildren: () => import('./features/users/users.routes').then(m => m.USERS_ROUTES), data: { titleKey: 'nav.users', icon: 'users' } },
      { path: 'audit', loadChildren: () => import('./features/audit/audit.routes').then(m => m.AUDIT_ROUTES), data: { titleKey: 'nav.audit', icon: 'list' } },
      { path: '**', loadComponent: () => import('./features/not-found/not-found.component').then(m => m.NotFoundComponent) }, // deep-link + refresh safe
    ],
  },
];

Spartan UI — primary UI, never default-demo look

Menubar · Sheet (sidebar) · Toolbar · Breadcrumb · Tabs · Card · Table · Accordion · Resizable · Dialog · Sonner (toast) · AlertDialog · Tooltip · Badge · Select · Combobox · Command · Calendar · Switch · Progress · Skeleton · ContextMenu · Popover — Spartan (brain + helm) primitives, all heavily themed to the cockpit tokens below. NO PrimeNG (per `rules/angular.md`).

Black/cyan dev-cockpit theme

Compact dense panels · terminal/devtools inspiration · sharp borders · subtle glow · no bloated whitespace. Cyan-on-black legibility per [[text-contrast]].

:root {
  --app-bg: #03070a;
  --app-surface: #071014;
  --app-surface-2: #0b171d;
  --app-border: rgba(0, 229, 255, .22);
  --app-border-strong: rgba(0, 229, 255, .44);
  --app-cyan: #00e5ff;
  --app-cyan-soft: rgba(0, 229, 255, .16);
  --app-text: #e8fbff;
  --app-muted: #7aa7b3;
  --app-danger: #ff4d6d;
  --app-warning: #ffd166;
  --app-success: #4dffb5;
  --app-radius: 12px;
  --app-radius-sm: 8px;
  --app-shadow-glow: 0 0 24px rgba(0, 229, 255, .14);
}

@angular/localize — zero hardcoded user-facing strings (per `rules/angular.md`)

• Mark every user-facing string with `i18n` (templates) / `$localize` (TS): route labels · sidebar · buttons · table headings · forms · validation · empty/error/toast.
• Extract to `messages.<locale>.xlf`; build ONE bundle per locale. Language switch = navigate to the locale build (`/en/`, `/es/`) — compile-time i18n has no in-app no-reload toggle (accepted tradeoff: build-time key safety + per-locale SEO URLs). Within a locale the cockpit stays no-reload SPA.
• English fully populated + 2nd-locale scaffold. (In-app toggle without reload needs a runtime lib — out of current policy; raise with Brian if required.)

PWA

• `manifest.webmanifest` — name · short_name · theme_color (`#03070a`) · background_color · icons +