From vibeworks-library
Quality gate definitions, scoring rubrics, and acceptance criteria for the Agentic UI Designer system.
npx claudepluginhub Claude-Code-Community-Ireland/claude-code-resources --plugin vibeworks-libraryThis skill uses the workspace's default tool permissions.
This skill defines the quality gates, scoring criteria, and acceptance standards that all designs must meet.
Audits visual design quality for red flags in typography, color, layout; classifies severity and suggests fixes. Use for design QA, visual reviews, or bug checks.
Evaluates UI/UX designs assessing visual hierarchy, information architecture, cognitive load, AI slop, anti-patterns with scoring, persona testing, and feedback. Use for design reviews.
Evaluates UI visual design and aesthetics via screenshots, analyzing typography, color palettes, spacing, hierarchy, consistency, branding, and modern trends for professional polish.
Share bugs, ideas, or general feedback.
This skill defines the quality gates, scoring criteria, and acceptance standards that all designs must meet.
All gates must pass for design completion:
| Gate | Threshold | Weight | Mandatory |
|---|---|---|---|
| Minimum Iterations | >= 5 | - | Yes |
| Maximum Iterations | <= 20 | - | Yes |
| Overall Score | >= 9.5/10 (95%) | - | Yes |
| WCAG AA Compliance | 100% | - | Yes |
| Vibe-Code Probability | < 1% | - | Yes |
| Critical Issues | 0 | - | Yes |
| Spatial Score | >= 9.0/10 | 25% | Yes |
| Color Score | >= 9.0/10 | 25% | Yes |
| Typography Score | >= 9.0/10 | 25% | Yes |
| Originality Score | >= 9.5/10 | 25% | Yes |
| Score | Description |
|---|---|
| 9-10 | Perfect grid adherence, masterful spacing relationships, balanced composition |
| 7-8 | Consistent grid usage, good spacing, minor alignment issues |
| 5-6 | Some grid violations, inconsistent spacing, noticeable balance issues |
| 3-4 | Frequent off-grid values, poor spacing relationships, unbalanced |
| 1-2 | No grid system, chaotic spacing, severely unbalanced |
Key Checkpoints:
| Score | Description |
|---|---|
| 9-10 | WCAG AAA, harmonious palette, strong emotional alignment, unique |
| 7-8 | WCAG AA, cohesive colors, appropriate mood, some customization |
| 5-6 | Minor contrast issues, acceptable harmony, generic choices |
| 3-4 | WCAG failures, clashing colors, wrong emotional tone |
| 1-2 | Multiple accessibility failures, no coherent palette |
Key Checkpoints:
| Score | Description |
|---|---|
| 9-10 | Perfect hierarchy, excellent readability, intentional pairing, flawless implementation |
| 7-8 | Clear hierarchy, good readability, appropriate fonts, minor issues |
| 5-6 | Adequate hierarchy, acceptable readability, basic font choices |
| 3-4 | Unclear hierarchy, readability issues, poor font choices |
| 1-2 | No hierarchy, unreadable, inappropriate fonts |
Key Checkpoints:
| Score | Description |
|---|---|
| 9-10 | Highly unique, no generic patterns, strong brand personality |
| 7-8 | Mostly original, minimal generic patterns, some personality |
| 5-6 | Some customization, recognizable generic patterns |
| 3-4 | Mostly generic, obvious AI patterns, no personality |
| 1-2 | Pure vibe-code, all defaults, completely generic |
Key Checkpoints:
| Criterion | Description | Check |
|---|---|---|
| 1.1.1 | Non-text content has alt text | Images, icons |
| 1.3.1 | Info and relationships in markup | Semantic HTML |
| 1.3.2 | Meaningful sequence | DOM order matches visual |
| 1.4.1 | Color not sole indicator | Don't rely on color alone |
| 2.1.1 | Keyboard accessible | All functionality via keyboard |
| 2.1.2 | No keyboard trap | Can tab away from all elements |
| 2.4.1 | Bypass blocks | Skip links present |
| 2.4.2 | Page titled | Descriptive title |
| 2.4.4 | Link purpose clear | From link text or context |
| 3.1.1 | Language of page | lang attribute on html |
| 4.1.1 | Valid markup | No parsing errors |
| 4.1.2 | Name, role, value | ARIA where needed |
| Criterion | Description | Check |
|---|---|---|
| 1.4.3 | Contrast minimum | 4.5:1 normal, 3:1 large |
| 1.4.4 | Resize text | Works at 200% zoom |
| 1.4.5 | Images of text | Avoid, use real text |
| 2.4.6 | Headings descriptive | Clear, meaningful |
| 2.4.7 | Focus visible | Clear focus indicators |
| 3.2.3 | Consistent navigation | Same order throughout |
| 3.2.4 | Consistent identification | Same function = same name |
| Criterion | Description | Check |
|---|---|---|
| 1.4.6 | Enhanced contrast | 7:1 normal, 4.5:1 large |
| 1.4.8 | Visual presentation | Line length, spacing |
| 2.4.9 | Link purpose alone | Clear from link text only |
Overall Score = (Spatial × 0.25) + (Color × 0.25) +
(Typography × 0.25) + (Originality × 0.25)
Pass Criteria:
- Minimum iterations >= 5
- Overall >= 9.5 (95%)
- All dimensions >= 9.0
- Originality >= 9.5
- Vibe-code probability < 1%
- Critical issues = 0
- WCAG AA = 100%
Detection: No improvement for 2+ iterations Action: Switch to Pivot strategy, try different approach
Detection: Same issues appear after "fixing" Action: Address root cause, not symptoms
Detection: Scores decreasing Action: Revert to previous best, analyze what broke
Detection: One dimension consistently low Action: Focused iteration on weak dimension