Web Interface Guidelines

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

diegosouzapw/awesome-omni-skill·0installs62stars

SKILL.md

Full skill instructions

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines AND the Wapuulingo Style Guide.

How It Works

Fetch the latest guidelines from the source URL below
Read the specified files (or prompt user for files/pattern)
Check against all rules in the fetched guidelines
Check against the Wapuulingo Style Guide rules below
Output findings in the terse file:line format

Guidelines Source

Fetch fresh guidelines before each review:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

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

Wapuulingo Style Guide

The visual language is bold, gamified, and high-contrast, designed to make translation tasks feel like a rewarding game.

Color Palette

Element	CSS Variable	Hex Code	Usage
Primary Navy	`--color-navy`	`#003c56`	Main backgrounds, headers, and nav bars
Mascot Yellow	`--color-yellow`	`#fecb00`	Primary CTAs, mascot body, and highlights
Success Green	`--color-green`	`#4ab866`	Completion states, Submit buttons, and progress
Neutral White	`--color-white`	`#ffffff`	Content cards, input fields, and body text on dark
Status Grey	`--color-gray`	`#e0e0e0`	Inactive states or background for text fields

Typography Rules

Font: Use the --font-main variable (Outfit or system fallbacks)
Headlines: Bold or Extra Bold for titles and big numbers
Body: Regular or Medium for labels and instructions
Stats: Large, prominent font sizes for motivation-driving numbers

UI Components

Cards & Containers

Radius: Use --radius-md (16px) or --radius-lg (24px)
Style: Flat design. Avoid heavy drop shadows; use color contrast for depth
Layout: Vertical stacking with generous padding (20-24px)

Buttons & Inputs

Primary Button: Full width, high-contrast background (Yellow or Green)
Input Fields: Subtle grey background with colored border (Green) when active
Progress Bar: Thin horizontal bar at screen top to indicate session completion

Illustration Style (Wapuu)

Placement: Hero (large center-piece on home), Feedback (small peeking versions)
Expressions: Always positive, enthusiastic, or focused

Voice & Tone

Supportive: "Great job! More approvals are on the way."
Direct: "Translate to: Portuguese (Brazil)."
Gamified: Use terminology like "XP," "Points Awarded," and "Approved"
Concise: Keep string labels short and actionable

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 Web Interface Guidelines
Apply all rules from the Wapuulingo Style Guide above
Output findings using the format specified in the guidelines

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

Review Checklist

When reviewing UI code, check for:

Accessibility (Web Interface Guidelines):

Semantic HTML (button for actions, a/Link for navigation)
Focus-visible states on all interactive elements
prefers-reduced-motion support for animations
Proper ARIA labels where needed

Visual Consistency (Wapuulingo Style):

Colors use CSS variables from the design system
Border radius uses design tokens (--radius-sm/md/lg)
Buttons follow the full-width, high-contrast pattern
Typography hierarchy is clear (headlines bold, body regular)
Cards have flat design with color contrast (not heavy shadows)

Interaction Patterns:

Primary actions use Yellow or Green backgrounds
Input fields have Green border when focused
Progress indicators are visible during async operations
Gamified language in user-facing strings

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/diegosouzapw/awesome-omni-skill --skill web-design-guidelines-fellyph

View on GitHub

skills/design/web-design-guidelines-fellyph/SKILL.md

ui-ux-design-system
Expert in building premium, accessible UI/UX design systems for SaaS apps. Covers design tokens, component architecture with shadcn/ui and Radix, dark mode, glassmorphism, micro-animations, responsive layouts, and accessibility. Use when: ui, ux, design system, shadcn, radix, tailwind, dark mode,...
1 installs
frontend
Defines frontend standards for Next.js App Router, React 19, React Query, shadcn/ui. Use when building components, pages, hooks, or frontend state management.
1 installs
design-ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projec...
1 installs
sql-and-database
SQL writing and database engineering patterns, standards, and procedures. Use for designing database schemas, writing performant SQL queries, normalisation strategies, indexing, joins optimisation, locking mechanics, transactions, query debugging with EXPLAIN, and ORM integration. Applies to Post...
1 installs