ClaudeSuperPower
SubmitLog in

web-ui-best-practices

Skill

Signs of taste in web UI. Use when building or reviewing any user-facing web interface — dashboards, SaaS apps, marketing sites, internal tools. Covers interaction speed, navigation depth, visual restraint, copy quality, and the small details that separate polished products from rough ones.

0Analytics

Install

git clone https://github.com/jamditis/claude-skills-journalism.git ~/.claude/skills/web-ui-best-practices

What is web-ui-best-practices?

Signs of taste in web UI. Use when building or reviewing any user-facing web interface — dashboards, SaaS apps, marketing sites, internal tools. Covers interaction speed, navigation depth, visual restraint, copy quality, and the small details that separate polished products from rough ones.

What this can do

Capabilities declared in this component's own frontmatter — not inferred.

Inherit all session tools

Declares no tool restrictions — inherits every session tool

~73 tokens of context used while enabled, before you invoke anything

Documentation

README · ~9 min read

Web UI best practices

Principles for building web interfaces that feel fast, intentional, and respectful of the user's time. Every rule here is a smell test — violating one is fine if you have a reason, violating several means the UI needs work.

Speed

Every interaction completes in under 100ms. If it can't, fake it.

  • Optimistic UI updates — show the result before the server confirms
  • Debounce inputs, but never debounce perceived response
  • Prefetch likely next routes on hover or viewport entry
  • Use will-change and transform for animations, never top/left
  • Measure with performance.now(), not gut feel

Reviews

Log in to leave a review.

No reviews yet — be the first.

Explore related

Other things in this space — across every part of the ecosystem, not just skills.

Subagents

All subagents →

code-architect

Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences

32.8K stars

plugin-validator

Use this agent when the user asks to "validate my plugin", "check plugin structure", "verify plugin is correct", "validate plugin.json", "check plugin files", or mentions plugin validation. Also trigger proactively after user creates or modifies plugin components. Examples: <example> Context: User f

32.8K stars

scan-inventory

Restricted read-only repository cartographer dispatched by the Claude Security scan workflow to partition the tree into components and account for every top-level directory; not for direct invocation or vulnerability research.

32.8K stars