frontend-screen-design

Files (1)

• SKILL.md

SKILL.md (first lines)

# Frontend Screen Design

Use this skill to design or review screens.

## 1. Screen goal
- What problem does the screen solve?
- Who uses this screen?
- What is the primary action?
- What is the secondary action?

## 2. Visual hierarchy
- Is the title clear?
- Is the primary action visible?
- Does important information appear first?
- Is there visual clutter?

## 3. Layout
- Does it work well on mobile?
- Does it work well on desktop?
- Is spacing consistent?
- Are components aligned?

## 4. States
The screen must account for:
- Loading.
- Error.
- Empty.
- Success.
- Permission denied.
- Partial data.
- Invalid form.

## 5. Accessibility
- Does text have enough contrast?
- Do buttons have clear labels?
- Do inputs have labels?
- Does keyboard navigation make sense?
- Does feedback avoid relying on color alone?

## 6. Microcopy
- Are messages clear?
- Do errors say how to fix them?
- Does the text avoid ambiguity?

## Expected output
Respond with:
1. Screen goal.
2. Recommended visual structure.
3. Required states.
4. UX points.
5. Implementation suggestion compatible with the project.

From whosbea/workflow-claude-codex-etc, MIT.

More from whosbea/workflow-claude-codex-etc