Awesome-omni-skill web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when auditing UX, checking accessibility, or reviewing designs for web best practices.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/design/web-design-guidelines-inselfcontroll" ~/.claude/skills/diegosouzapw-awesome-omni-skill-web-design-guidelines-bcc187 && rm -rf "$T"

manifest: skills/design/web-design-guidelines-inselfcontroll/SKILL.md

source content

Web Design & Interface Guidelines Skill

This skill provides a framework for reviewing and implementing high-quality web interfaces. It focuses on the intersection of aesthetics, usability, and technical performance.

Design Framework

1. Information Hierarchy

F-Pattern: Align critical information and navigation along the F-shaped scanning pattern.
Emphasis: Use font weight, scale, and color depth to guide the user's eye to the Primary Action.
Proximity: Group related elements closely to signal relationship (Law of Proximity).

2. Form Design & Interaction

Feedback: Provide inline validation as the user types (debounce). Use distinct "Success" and "Error" states.
Aids: Use appropriate input types (
```
tel
```
,
```
email
```
,
```
number
```
) and autocomplete attributes to assist the user.
Labels: Always use
```
<label>
```
tags. Never rely on placeholders alone for accessibility.

3. Interactive Feedback

Affordance: Buttons must look clickable. Links must be distinguishable from body text.
Stateful UI: Every interactive element must reflect its current state (Initial, Loading, Success, Error).
Transitions: Use subtle transforms (e.g.,
```
scale(0.98)
```
on click) to provide tactile feedback in a digital interface.

4. Accessibility (Universal Design)

Color: Do not use color as the only way to convey meaning.
Focus: Ensure a visible focus ring (
```
focus-visible
```
) for keyboard users.
Screen Readers: Use
```
aria-live
```
regions for dynamic updates like notification toasts or live data.

Interaction Protocol

Input: UI components or layout descriptions.
Output: Detailed design audit or refined UI code following these guidelines.

Tag: Start your response with

[DESIGN-GUIDELINES]

. Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

Usage

When a user provides a file or pattern argument:

Fetch guidelines from the source URL above
Read the specified files
Apply all rules from the fetched guidelines
Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.