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):
Visual Consistency (Wapuulingo Style):
Interaction Patterns:
1---2name: web-design-guidelines-43description: 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".4---5
6# Web Interface Guidelines
7
8Review files for compliance with Web Interface Guidelines AND the Wapuulingo Style Guide.
9
10## How It Works
11
121. Fetch the latest guidelines from the source URL below
132. Read the specified files (or prompt user for files/pattern)
143. Check against all rules in the fetched guidelines
154. Check against the Wapuulingo Style Guide rules below
165. Output findings in the terse `file:line` format
17
18## Guidelines Source
19
20Fetch fresh guidelines before each review:
21
22```
23https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
24```
25
26Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
27
28---
29
30## Wapuulingo Style Guide
31
32The visual language is **bold, gamified, and high-contrast**, designed to make translation tasks feel like a rewarding game.
33
34### Color Palette
35
36| Element | CSS Variable | Hex Code | Usage |
37| :--- | :--- | :--- | :--- |
38| **Primary Navy** | `--color-navy` | `#003c56` | Main backgrounds, headers, and nav bars |
39| **Mascot Yellow** | `--color-yellow` | `#fecb00` | Primary CTAs, mascot body, and highlights |
40| **Success Green** | `--color-green` | `#4ab866` | Completion states, Submit buttons, and progress |
41| **Neutral White** | `--color-white` | `#ffffff` | Content cards, input fields, and body text on dark |
42| **Status Grey** | `--color-gray` | `#e0e0e0` | Inactive states or background for text fields |
43
44### Typography Rules
45
46- **Font:** Use the `--font-main` variable (Outfit or system fallbacks)
47- **Headlines:** Bold or Extra Bold for titles and big numbers
48- **Body:** Regular or Medium for labels and instructions
49- **Stats:** Large, prominent font sizes for motivation-driving numbers
50
51### UI Components
52
53#### Cards & Containers
54- **Radius:** Use `--radius-md` (16px) or `--radius-lg` (24px)
55- **Style:** Flat design. Avoid heavy drop shadows; use color contrast for depth
56- **Layout:** Vertical stacking with generous padding (20-24px)
57
58#### Buttons & Inputs
59- **Primary Button:** Full width, high-contrast background (Yellow or Green)
60- **Input Fields:** Subtle grey background with colored border (Green) when active
61- **Progress Bar:** Thin horizontal bar at screen top to indicate session completion
62
63### Illustration Style (Wapuu)
64- **Placement:** Hero (large center-piece on home), Feedback (small peeking versions)
65- **Expressions:** Always positive, enthusiastic, or focused
66
67### Voice & Tone
68- **Supportive:** "Great job! More approvals are on the way."
69- **Direct:** "Translate to: Portuguese (Brazil)."
70- **Gamified:** Use terminology like "XP," "Points Awarded," and "Approved"
71- **Concise:** Keep string labels short and actionable
72
73---
74
75## Usage
76
77When a user provides a file or pattern argument:
781. Fetch guidelines from the source URL above
792. Read the specified files
803. Apply all rules from the fetched Web Interface Guidelines
814. Apply all rules from the Wapuulingo Style Guide above
825. Output findings using the format specified in the guidelines
83
84If no files specified, ask the user which files to review.
85
86### Review Checklist
87
88When reviewing UI code, check for:
89
90**Accessibility (Web Interface Guidelines):**
91- [ ] Semantic HTML (button for actions, a/Link for navigation)
92- [ ] Focus-visible states on all interactive elements
93- [ ] prefers-reduced-motion support for animations
94- [ ] Proper ARIA labels where needed
95
96**Visual Consistency (Wapuulingo Style):**
97- [ ] Colors use CSS variables from the design system
98- [ ] Border radius uses design tokens (--radius-sm/md/lg)
99- [ ] Buttons follow the full-width, high-contrast pattern
100- [ ] Typography hierarchy is clear (headlines bold, body regular)
101- [ ] Cards have flat design with color contrast (not heavy shadows)
102
103**Interaction Patterns:**
104- [ ] Primary actions use Yellow or Green backgrounds
105- [ ] Input fields have Green border when focused
106- [ ] Progress indicators are visible during async operations
107- [ ] Gamified language in user-facing strings
diegosouzapw