:Paste this prompt into Claude Design when you want it to produce the initial scaffold of the Cytognosis logged-in web template (cytoskeleton/templates/app-web/). This template is the basis for Cytognosis dashboards, the asset hub, and the Cytoverse workbench. It is NOT the public website (useprompt_template_website.mdfor that).
Cytognosis context: full spec in cytognosis-branding/references/web.md.
Revised from: Documents/Cytognosis/Infra and design/03_claude_design_prompts/prompt_template_web.md
Changes: replacedcytognosis-template-masterwithcytognosis-branding, added profile switcher component requirement (data-profile attribute toggling), added density control component, added motion preference toggle, removed em dashes.
Produce the initial scaffold for the Cytognosis logged-in web template. The template is the base for product surfaces that run in a browser after sign-in: patient longitudinal dashboards, clinician review surfaces, researcher analysis tools, asset-hub web client. It is also the substrate that the desktop template (app-desktop) wraps via Tauri v2; anything built here is reused there.
Distinguish from the public website (app-website): that template is content-first, server-rendered (Astro), SEO-critical. This template is dashboard-first, client-rich, auth-gated. They share the Design System and the brand voice but not the runtime.
strict, exactOptionalPropertyTypes, noUncheckedIndexedAccess).src/components/ui/, customized to Cytognosis tokens.auth-shell-package; the auth provider is downstream-configurable.``
/ welcome / sign-in
/home post-sign-in landing
/settings account, privacy, consent
/settings/privacy
/settings/consent
/settings/display density, motion, font, profile preferences (NEW)
/crisis in-app crisis-safety surface (deep-linkable)
/voice voice surface (Web Speech + WASM-VAD)
Wrap each route with React.lazy + .
The app-web template requires a profile switcher that toggles the data-profile attribute on :
. hook that reads/writes data-profile on the root element and persists the choice in localStorage. activate based on the data-profile attribute.A density toggle that adjusts spacing, font size, and information density:
| Mode | Line height | Paragraph gap | Font size | Max width | Use case |
|---|---|---|---|---|---|
| Compact | 1.3 | 0.5em | 14px | 90ch | Power users, Lab/Research |
| Comfortable | 1.5 | 1em | 16px | 75ch | Default for Research |
| Spacious | 1.7 | 1.5em | 18px | 65ch | Companion/Clinical, ND users |
.A motion preference control that governs animation behavior:
| Setting | Behavior |
|---|---|
| System default | Follows prefers-reduced-motion media query |
| Full motion | All animations enabled regardless of system preference |
| Reduced motion | Minimal transitions only (opacity, color); no position or scale animations |
| No motion | Zero animations; instant state changes |
attribute on the root element. selectors to override all transition and animation properties..Light / dark / auto. Tokens support both modes. The switcher lives in Settings; default is auto (follow system).
Via auth-shell-package. Welcome screen to provider redirect or in-page form, then token (HTTP-only cookie default), then refresh transparent, then signed-out routing surfaces welcome.
Minimal PWA: icon set re-exported from Design System; service worker for offline shell; install prompt. Mobile-install primarily (desktop users get the dedicated app-desktop template, so do not aggressively offer install on desktop).
Small print stylesheet: no nav, single-column, design-system typography. Cytognosis users print reports.
Persistent location: top-right of the app shell. Cmd/Ctrl + / expands into a voice/chat side panel.
Every starter screen demonstrates at least one of the seven shared packages from cytoskeleton/templates/shared/:
(Tailwind preset + token bindings) (typed endpoint calls; mock layer for fixtures mode) (useAgent, useEvent, useCrdtDocument, useCrisisRail hooks) (VAD, barge-in, feature events) (login flow + HTTP-only cookies) (schema-enforced events + redaction defaults) (avatar, state indicators, turn-taking visuals)
app-web/
├── package.json
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.ts extends design-system preset
├── biome.json
├── index.html
├── public/
│ ├── manifest.webmanifest
│ ├── icons/ re-exported from design-system
│ └── service-worker.js generated by Vite plugin
├── src/
│ ├── main.tsx React 19 root
│ ├── App.tsx
│ ├── theme/
│ │ ├── tokens.css consumed Tailwind layer
│ │ └── theme-provider.tsx
│ ├── routing/
│ │ └── routes.tsx
│ ├── shared/ consumes the seven shared packages
│ ├── screens/ seven starter screens (see §2.1; plus empty + error)
│ ├── components/
│ │ ├── ui/ shadcn-derived, Cytognosis-tokenized
│ │ ├── ProfileSwitcher.tsx (NEW: data-profile toggling)
│ │ ├── DensityControl.tsx (NEW: compact/comfortable/spacious)
│ │ ├── MotionToggle.tsx (NEW: motion preference control)
│ │ └── (template-local components)
│ ├── hooks/ custom hooks (useXxx naming)
│ │ ├── useProfile.ts (NEW: profile state management)
│ │ ├── useDensity.ts (NEW: density preference management)
│ │ ├── useMotion.ts (NEW: motion preference management)
│ │ └── ...
│ ├── services/
│ │ ├── voice-service.ts
│ │ └── paralinguistic-service.ts
│ ├── state/ Zustand stores (minimal)
│ ├── lib/ small utilities; named by purpose, not "utils"
│ ├── queries/
│ │ └── keys.ts TanStack Query key factory
│ └── microcopy.json
├── tests/
│ ├── unit/
│ ├── integration/
│ └── accessibility/ axe-core on every screen
├── e2e/ Playwright: sign-in → home → voice
├── docs/
│ ├── README.md
│ ├── architecture.md
│ ├── accessibility.md
│ ├── privacy.md
│ ├── voice.md
│ ├── profiles.md (NEW: documents profile switching, density, motion)
│ └── deployment.md
└── .agents/skills/manifest.yaml dev-skill dependencies
`
4. Brand alignment
Profile defaults: Foundation for the welcome / signed-out routes; Research for logged-in routes ( data-profile="research" on ).
Consume Design System tokens via Tailwind preset; never inline #hex colors.
Logo wordmark in the app shell header; logo mark in the favicon.
Voice rules in every visible string; microcopy in microcopy.json.
Profile switcher, density control, and motion toggle use Design System tokens for their own UI.
5. Quality gates
Initial JS bundle (welcome screen): < 200 KB gzip.
Home screen JS bundle: < 350 KB gzip.
Lighthouse Performance, Accessibility, Best Practices, SEO: 95+ on every screen.
TTI: < 2 s on mid-tier laptop + 4G simulation.
FCP: < 1 s on the same.
Test coverage: 80% line minimum; components/ui/ 90%.
Playwright e2e covers sign-in, home, voice, profile-switch, density-toggle in < 30 s test runtime.
6. Hard rules
Function components with explicit prop types via interface or type.
Named exports for components and hooks (no default exports except App.tsx).
Hooks named useXxx and live in hooks/.
Avoid useEffect for derived state; prefer useMemo.
Suspense at route boundaries, not in leaf components.
No any. Use unknown and narrow.
TanStack Query keys typed via the keys.ts factory.
Profile switcher, density control, and motion toggle are accessible (keyboard navigable, screen-reader announced).
7. What to NOT produce
No CSS-in-JS (no styled-components, no Emotion). Tailwind + tokens.
No global state library beyond Zustand. Most state is server-state via TanStack Query.
No