shell-ui

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

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "shell-ui" with this command: npx skills add 7spade/black-tortoise/7spade-black-tortoise-shell-ui

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.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

material-design-3

No summary provided by upstream source.

Repository SourceNeeds Review
-68
7spade
General

architecture-ddd

No summary provided by upstream source.

Repository SourceNeeds Review
-13
7spade
General

webapp-testing

No summary provided by upstream source.

Repository SourceNeeds Review
-12
7spade