agentleFS
Sign inStart free
sukirman1901sukirman1901/frontend-expert/skills/app-shell/SKILL.md

app-shell

Skill9 starsChanged 2 months agoMITView on GitHub

App shell, navigation, layouts, breadcrumbs, deep links, 404/empty routes. Use when building dashboard shells, side nav, top nav, multi-page flows, "routing", "layout app", "404", or information architecture for web apps. Requires modern chrome: logo, topbar theme icon, avatar→account menu, custom filter selects — not a bare settings page or native OS selects.

3 other projects use a version of this.

Adopted by

Most recently taken up by

The file

We split this skill into the rules it gives an agent

1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 3 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Prefer auto-collapse near tablet / narrow desktop.

    line 34

“Common” is measured: kept by at least 6 in 10 of the 3 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

App Shell & Routing

Overview

Define where the user is and how they move. Shell (chrome) stays stable; page content swaps. Match modern SaaS dashboard chrome — not a blank header with only text brand.

When to use

  • New app layout, dashboard shell, marketing+app split
  • Nav IA, breadcrumbs, nested routes, 404/unauthorized
  • Settings / admin pages (still need full shell)

Workflow

  1. Shell chrome (MUST for product/dashboard UI)
    • Logo — real mark (SVG/img), not a letter in a box alone
    • Brand name visible next to logo (can truncate on tiny widths)
    • Utilities — at least 1–2 of: search, notifications, help (icon buttons OK)
    • Theme — if light/dark exists, put it in topbar utilities as an icon toggle (moon/sun). Do not park a labeled “Dark mode” button in the sidebar footer
    • Profile — avatar-only control in the topbar at all breakpoints; name/email live in an account dropdown on click — never display:none the whole account control on mobile; do not spill name/email into the header chrome by default
    • Anatomy: brand · (optional primary nav) · utilities (theme/help/bell) · avatar menu
  2. Sidebar
    • Desktop: persistent rail; support collapse → icon-only (≥768)
    • Prefer auto-collapse near tablet / narrow desktop; remember preference when useful
    • Mobile: overlay drawer + backdrop (not push-down accordion under the header) — see responsive
    • Sidebar is for nav, not theme/account chrome
  3. IA — primary nav ≤7 items; nest the rest; active state clear
  4. Routing — URLs reflect location; filters in query when shareable
  5. Fallbacks — 404, empty route, unauthorized → clear CTA
  6. Motion — load motion for shell/drawer/section enter (light defaults)

Checklist

  • Logo mark + brand (not letter-only placeholder as the final chrome)
  • Theme toggle in topbar utilities (if theming) — not sidebar footer
  • Avatar-only profile → account dropdown (name/email inside menu)
  • Utility cluster present (or explicit waiver: minimal tool)
  • Sidebar collapse (desktop) + drawer+backdrop (mobile)
  • Main landmark; active nav indication
  • 404 / empty route handled when multi-route
  • Icons via Reicon (or project lib) on nav items

Anti-patterns (fail / High)

  • Header = brand text only, no logo/utilities/profile
  • Theme as a full-width labeled button under the sidebar nav
  • Name + email always visible in the topbar (use avatar + menu instead)
  • Hiding profile entirely below a breakpoint
  • Mobile nav that pushes content down while burger stays visible as a second competing control
  • Sidebar that never collapses on mid-width dashboards

Depth

references/app-shell.md.
Drawer rules: references/responsive.md.
Optional local sandbox: test/ (gitignored; not shipped).

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free