Agent skill
elite-frontend-ux-layout
Sub-skill of elite-frontend-ux: Layout (+3).
Install this agent skill to your Project
npx add-skill https://github.com/vamseeachanta/workspace-hub/tree/main/.claude/skills/_archive/development/elite-frontend-ux/layout
SKILL.md
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
- Value-first metrics: "You saved 4 hours" > raw numbers
- Actionable insights: What should the user do next?
- Progressive disclosure: Summary → detail on demand
Empty States
// 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
vamseeachanta/workspace-hub
gsd-complete-milestone
Archive completed milestone and prepare for next version
vamseeachanta/workspace-hub
gsd-reapply-patches
Reapply local modifications after a GSD update
vamseeachanta/workspace-hub
gsd-verify-work
Validate built features through conversational UAT
vamseeachanta/workspace-hub
gsd-thread
Manage persistent context threads for cross-session work
vamseeachanta/workspace-hub
clinical-trial-protocol
Generate clinical trial protocols for medical devices or drugs through a modular, waypoint-based architecture with research-only and full protocol modes.
vamseeachanta/workspace-hub
single-cell-rna-qc
Performs quality control on single-cell RNA-seq data (.h5ad or .h5 files) using scverse best practices with MAD-based filtering and comprehensive visualizations.
Didn't find tool you were looking for?