mcpField
G
generic-static-ux-designer

generic-static-ux-designer

github.com/travisjneumanDesign & UI106147 installsUpdated 1d ago
Repository

About generic-static-ux-designer

A UX design skill for minimalist static websites, extending Generic UX Designer with guidance on performance, accessibility, and low-complexity interactions. It is intended for designers shaping clear, lightweight page experiences.

Key features

  1. 01Minimalist layout principles
  2. 02Performance-aware design choices
  3. 03Static page flow patterns
  4. 04CSS-only interaction guidance
  5. 05No-JavaScript fallbacks
  6. 06Accessibility and touch-target checks

Use cases

  1. 01Reviewing a static site's page structure
  2. 02Reducing unnecessary interface elements
  3. 03Designing interactions without JavaScript
  4. 04Checking accessibility in a minimalist layout

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/travisjneuman/.claude --skill generic-static-ux-designer

After installing, type/generic-static-ux-designerin Claude Code to confirm it loaded.

Details

From the project README

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
ElementImpact
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
RequirementMinimalist Solution
Focus indicatorsSimple outline
Skip linksClean text link
Alt textConcise descriptions
ContrastHigh contrast by default
Touch Targets
  • 44x44px minimum
  • 8px spacing between targets
  • Larger is better on mobile

Design Critique for Static Sites

Questions to Ask

  1. Performance impact?

    • How many KB does this add?
    • Is it worth the load time?

  2. Works without JS?

    • Core function accessible?
    • Progressive enhancement?

  3. Adds clarity or noise?

    • Does this help users?
    • Can it be simpler?

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

See Also

Comments

Markdown supported