web-design-guidelines

Installation
SKILL.md

Web interface design and review

Use the product brief or affected screen as the starting point. Preserve the user's branding, platform conventions, and intended interaction. Return an implemented design or evidence-backed review, according to the request.

Design or review

  • For a new visual system, theme, or inconsistent typography/color/spacing, read design system decisions. Apply only the parts needed for the requested surface.
  • For a screen or flow review, inspect the rendered states and relevant code. Identify concrete consequences such as a hidden primary action, lost focus, illegible status, or blocked small-screen task.
  • For a focused repair, address the demonstrated problem and verify it. Do not require a redesign, token hierarchy, or new component library for a small change.

Hierarchy and interaction

Make the next action clear, group related information, and follow the product's reading direction and form layout. There is no universal bottom-right action placement or fixed number of primary actions for every screen.

Separate destructive actions from routine ones. Use confirmation, undo, or another suitable recovery mechanism proportional to the action's consequences; avoid confirmation dialogs on every reversible operation.

Represent loading, empty, error, success, and stale states where the flow can encounter them. Preserve user input during recoverable failures. Show active search/filter state and a clear reset path.

Accessibility and responsiveness

Installs
3
First Seen
Jun 29, 2026
web-design-guidelines — shreyam1008/shre-skills