OpenSkillIndex← back to search
claude-code

Learn-skills.dev 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.

install
source · Clone the upstream repo
git clone https://github.com/NeverSight/learn-skills.dev
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/NeverSight/learn-skills.dev "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/skills-md/7spade/black-tortoise/shell-ui" ~/.claude/skills/neversight-learn-skills-dev-shell-ui && rm -rf "$T"
manifest: data/skills-md/7spade/black-tortoise/shell-ui/SKILL.md
source content

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.