Skip to content
LiveNew tools this week
Submit
AIMarketly
shell-ui logo

Shell UI

shell-ui

Shell module patterns for src/app/shell, covering global UI state, layout composition, navigation, theming with Material Design 3 tokens, and zone-less signal-first presentation boundaries; use when changing app chrome or global UI concerns.

NeverSight/skills_feed0installs214stars

SKILL.md

Full skill instructions

Shell UI

Intent

Own global application chrome and cross-cutting UI state (navigation, theme, notifications) without leaking business logic.

Responsibilities

  • Layout composition, global navigation, and app-level UI scaffolding.
  • Global UI state stores (theme, toasts/​snackbars, search UI state) when truly cross-cutting.

Boundaries

  • Shell does not own capability business logic.
  • Shell consumes application-facing signals; it does not call repositories directly.

UI Rules

  • Standalone components only.
  • Bind templates to signals only using Angular control flow.
  • Use Material 3 tokens; avoid hardcoded CSS values for color/​typography.

Navigation

  • Prefer router-driven composition and lazy loading.
  • Use functional guards/​resolvers with inject().

Accessibility

  • Ensure keyboard navigation, focus visibility, semantic landmarks, and skip links for global layout.