# Elite Frontend UX Layout

> Sub-skill of elite-frontend-ux: Layout (+3).

- Skill: `vamseeachanta/elite-frontend-ux-layout` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vamseeachanta/elite-frontend-ux-layout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vamseeachanta/elite-frontend-ux-layout/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: vamseeachanta (https://skillmd.com/u/vamseeachanta)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vamseeachanta/elite-frontend-ux-layout

---


# Layout (+3)

## Layout

```
┌─────────────────────────────────────────────────┐
│ Top Bar (56–64px): Logo, Search, User Menu      │
├──────────┬──────────────────────────────────────┤
│ Sidebar  │  Main Content (breadcrumbs if deep)  │
│ 240–280px│                                      │
│ collapsed│  Metric Cards → Charts → Tables      │
│ 64–80px  │                                      │
└──────────┴──────────────────────────────────────┘
```

| Nav scenario | Pattern |
|-------------|---------|
| 10+ sections | Collapsible sidebar |
| 3–6 sections | Top navigation |
| Secondary nav | Tabs (max 6) |
| Deep hierarchy | Breadcrumbs |


## Content Hierarchy

1. **Value-first metrics:** "You saved 4 hours" > raw numbers
2. **Actionable insights:** What should the user do next?
3. **Progressive disclosure:** Summary → detail on demand


## Empty States

```jsx
// GOOD: helpful, action-oriented
<EmptyState
  icon={<InboxIcon />}
  title="No messages yet"
  description="When you receive messages, they'll appear here."
  action={<Button>Compose message</Button>}
/>
// BAD: <p>No data</p>
```


## Toast Timing

- Default: 4–5 seconds; minimum (a11y): 6 seconds
- Formula: 500ms/word + 3s base; always include dismiss button

---