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.
Scanned 9/4/2026
Install to Claude Code
Skills Directorynpx -y skills add NeverSight/skills_feed --skill shell-ui --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Shell Ui?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/neversight-shell-ui)More formats (shields.io, HTML) on the badges page.
---
name: shell-ui
description: 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.
---
# 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.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
