generic-static-ux-designer

travisjneuman's avatarfrom travisjneuman

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.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Brand and Creative Direction]

When & Why to Use This Skill

This Claude skill provides professional UI/UX design expertise specifically tailored for static HTML, CSS, and JavaScript websites. It focuses on a minimalist 'less is more' philosophy, prioritizing performance, accessibility, and user psychology to create fast-loading, intuitive interfaces that function seamlessly with or without JavaScript. By emphasizing content-to-chrome ratios and CSS-only interaction patterns, it helps developers build lightweight yet highly effective user experiences.

Use Cases

  • Optimizing landing page performance by auditing asset weights (fonts, images, scripts) to ensure sub-second load times and better SEO rankings.
  • Designing minimalist user interfaces that maximize the content-to-chrome ratio to improve readability and user engagement on static sites.
  • Conducting comprehensive UX design reviews and critiques to identify unnecessary complexity and improve visual hierarchy.
  • Implementing accessible, CSS-only interaction patterns (like disclosure widgets and hover states) to ensure full site functionality for users with JavaScript disabled.
  • Developing mobile-friendly layouts with optimized touch targets and high-contrast color palettes to meet modern accessibility standards.
namegeneric-static-ux-designer
descriptionProfessional 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.

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

  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