Static Site UX Designer Skill

Static Site UX Designer

Professional UX expertise for minimalist static sites.

Extends: Generic UX Designer - Read base skill for design thinking process, user psychology, heuristic evaluation, and research methods.

Minimalist Design Philosophy

Less is More

Every element must earn its place:

Does this add value for the user?
Can I remove this and still communicate?
Is this decoration or function?

Content-to-Chrome Ratio

Maximize content, minimize interface:

BAD:  10% content, 90% navigation/chrome
GOOD: 80% content, 20% essential navigation

Limited Palette = High Impact

2-3 colors maximum
1 accent color for actions
Stark contrast over subtle gradients

Performance-Constrained UX

Every KB Matters

| Element | Impact | | -------------------- | ---------- | | Web font | +50-100KB | | Hero image | +200-500KB | | Animation library | +30-50KB | | JavaScript framework | +30-100KB |

Ask: Does this UX improvement justify the weight?

Speed is UX

< 1s load time is expected
< 100ms interaction response
Users leave after 3s wait

Static Page Flow Patterns

Simple Navigation

Home → About → Contact → Back to Home

No infinite scroll, no SPA patterns. Clear page boundaries.

Anchor Navigation

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>

<section id="section1">...</section>
<section id="section2">...</section>

CSS-Only Interaction Patterns

Accessible Disclosure

<details>
  <summary>More info</summary>
  <p>Additional content here.</p>
</details>

Hover States

.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

No-JavaScript Fallbacks

Always work without JS:

Navigation works with <a> tags
Forms submit normally
Content accessible without scripting

Accessibility in Minimalism

What Minimalism Allows

| Requirement | Minimalist Solution | | ---------------- | ------------------------ | | Focus indicators | Simple outline | | Skip links | Clean text link | | Alt text | Concise descriptions | | Contrast | High contrast by default |

Touch Targets

44x44px minimum
8px spacing between targets
Larger is better on mobile

Design Critique for Static Sites

Questions to Ask

Performance impact?
- How many KB does this add?
- Is it worth the load time?
Works without JS?
- Core function accessible?
- Progressive enhancement?
Adds clarity or noise?
- Does this help users?
- Can it be simpler?
Maintains aesthetic?
- Within color palette?
- Consistent with existing?

Red Flags

Adding web fonts without strong reason
Animation libraries for simple effects
Complex navigation for few pages
JavaScript where CSS suffices

Static UX Checklist

[ ] Core content visible without scrolling
[ ] Navigation intuitive (< 5 items)
[ ] Works without JavaScript
[ ] Touch targets 44px minimum
[ ] Color contrast 4.5:1+
[ ] Page weight < 50KB (excl. images)

Agent Skills: Static Site UX Designer

Install this agent skill to your local

Skill Files