LLMBase

Agent skill

generic-static-ux-designer

Quellcode ansehen: travisjneuman/.claude

#116Globales Ranking · von 116 SkillsSafe

Installation

npx skills add travisjneuman/.claude --skill generic-static-ux-designer

147

Installationen

EU-hosted inference API

Power your AI agent skills with open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

MiniMax

MiniMax M3

$0.50 / $1.90

per M tokens

Z.ai

GLM 5.3 Flash

$0.20 / $0.60

per M tokens

MoonshotAI

Kimi K3

$4.00 / $18.00

per M tokens

DeepSeek

DeepSeek V4.1 Flash

$0.40 / $1.42

per M tokens

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

Verwandte Skills

Mehr aus dieser Quelle: travisjneuman/.claude

document-skills

travisjneuman/.claude

3.3K installs

brand-identity

travisjneuman/.claude

1.7K installs

travel-planner

travisjneuman/.claude

506 installs

business-strategy

travisjneuman/.claude

500 installs

graphic-design

travisjneuman/.claude

498 installs

real-estate-analyzer

travisjneuman/.claude

402 installs

Browse all skills →

So verwenden Sie diesen Skill

  1. 1

    Install generic-static-ux-designer by running npx skills add travisjneuman/.claude --skill generic-static-ux-designer in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

  2. 2

    Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

  3. 3

    Der Skill verbessert das Verständnis Ihres Agenten für generic-static-ux-designer, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.