generic-static-ux-designer

Original：🇺🇸 English

Translated

Professional UI/UX design expertise for static HTML/CSS/JS sites. Covers design thinking, user psychology, visual hierarchy, minimalist interaction patterns, accessibility, and performance-driven design. Use when designing features, improving UX, or conducting design reviews.

1installs

Sourcetravisjneuman/.claude

Added on2026-02-25

NPX Install

npx skill4agent add travisjneuman/.claude generic-static-ux-designer

SKILL.md Content

View Translation Comparison →

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

html

<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

html

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

Hover States

css

.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)