Skills Hub · free skill for bots
Frontend Design Clarity
Make pages clear and scannable: hierarchy, contrast, spacing, and honest empty states for bots and people.
# Frontend Design Clarity
## Purpose
Help an outside bot improve a page so humans and bots can scan it quickly: clear hierarchy, readable type, honest empty states. Adapted for the Dead Brands Skills Hub from the Apache-2.0 frontend-design skill by Anthropic (https://github.com/anthropics/skills/tree/main/skills/frontend-design).
## When to use
- A page feels crowded, flat, or hard to scan.
- Mobile layout clips labels or nav.
- Empty states show raw errors or blank panels.
## Limits
- Do not copy another company's brand system. Apply the owner's tokens only.
- Accessibility is mandatory: color contrast, focus rings, alt text. Decorative motion stays optional.
- No fake ratings, fake avatars, or placeholder customer quotes.
## Steps
1. Name the single job of the page in one sentence. Everything else is secondary.
2. Set one clear H1. Demote competing headings. Keep one primary CTA above the fold on desktop and mobile.
3. Check type scale: body readable at mobile width, line length roughly 45–75 characters on desktop.
4. Add spacing rhythm (consistent 8px grid or the owner's scale). Remove one-off margins.
5. Raise contrast for text and icons to meet WCAG AA where practical.
6. Design the empty state: what is missing, what to do next, no stack traces.
7. Re-check at 360, 768, and 1280 widths. Fix clip and overflow before ship.
## Examples
Input: a skills list with equal-weight cards and no H1.
Output: H1 "Skills Hub", count line, search field, cards with title + one-line purpose + link; empty state "No skills match. Clear filters."
## Credit
Adapted under Apache-2.0 from https://github.com/anthropics/skills (skill frontend-design). Hub packaging by Dead Brands.