Menü
Use when implemented frontend work needs a visual, accessibility, responsiveness, performance, and interaction audit
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Use when Codex is asked to colonize, plan, build, continue, swarm, or seal an Aether colony and must mirror wrapper orchestration safely
Use when Codex is asked to initialize or set up an Aether colony and should refine intent before running init
Use when Codex is asked to run Aether Oracle or discuss flows and should refine scope before research or clarification
Use when acceptance criteria need unit, integration, or end-to-end tests generated from implementation context
Use when delivered functionality needs acceptance-criteria verification before a phase advances
Use when a phase involves LLMs, AI agents, RAG, ML inference, or prompt/tool integration design
| source | shipped |
| name | frontend-ui-audit |
| description | Use when implemented frontend work needs a visual, accessibility, responsiveness, performance, and interaction audit |
| type | colony |
| domains | ["ui","review","quality","frontend"] |
| agent_roles | ["watcher","auditor","includer","architect"] |
| workflow_triggers | ["continue"] |
| task_keywords | ["ui","frontend","visual","accessibility","responsive","interaction"] |
| priority | normal |
| version | 1.0 |
A 6-pillar visual audit of implemented frontend code. Rather than just checking "does it render," this evaluates the UI across six quality dimensions, producing a structured review with specific, actionable findings. The colony builds UIs that look right, work right, and feel right.
PILLAR 1 -- CONSISTENCY
- Visual consistency across components (spacing, colors, typography)
- Pattern consistency (same interaction patterns everywhere)
- Naming consistency (component names, prop names)
- State handling consistency (loading, error, empty, success)
PILLAR 2 -- ACCESSIBILITY
- Semantic HTML structure
- ARIA labels and roles where needed
- Keyboard navigation support
- Color contrast ratios
- Screen reader compatibility
- Focus management
PILLAR 3 -- RESPONSIVENESS
- Mobile layout (320px+)
- Tablet layout (768px+)
- Desktop layout (1024px+)
- Large screen (1440px+)
- Touch target sizes
- Content overflow handling
PILLAR 4 -- PERFORMANCE
- Bundle size impact
- Render performance (unnecessary re-renders)
- Image optimization
- Lazy loading where appropriate
- CSS optimization (unused styles, specificity issues)
PILLAR 5 -- AESTHETICS
- Visual hierarchy (most important things stand out)
- Whitespace usage (breathing room)
- Color palette coherence
- Typography scale and rhythm
- Micro-interactions (hover states, transitions)
PILLAR 6 -- INTERACTION
- Loading states (spinners, skeletons, progress)
- Error states (clear messaging, recovery path)
- Empty states (helpful guidance, not blank space)
- Success states (confirmation, next steps)
- Form validation (inline, clear, timely)
For each pillar:
1. Scan component files for the relevant patterns
2. Check against best practice standards
3. Identify specific violations or gaps
4. Score: PASS, WARN, or FAIL per check
5. Provide specific fix recommendations with file:line references
UI REVIEW -- Phase {N}: {phase_name}
PILLAR | Score | Issues
Consistency | PASS | 0 issues
Accessibility | WARN | 3 issues
Responsiveness | PASS | 0 issues
Performance | WARN | 2 issues
Aesthetics | PASS | 1 minor
Interaction | FAIL | 4 issues
Overall Score: {score}/100
Critical Issues:
Missing alt text on 3 images (accessibility)
No loading state on data fetch (interaction)
Form submit has no feedback (interaction)
Warnings:
Color contrast low on secondary text (accessibility)
Bundle includes unused icon library (performance)
Details: .aether/phases/phase-{N}/UI-REVIEW.md
Every issue includes:
- Severity: critical, warning, minor
- File and location
- What's wrong (in plain English)
- How to fix (specific code suggestion)
- Effort estimate
UI | Phase {N}: {score}/100
{pass} | {warn} | {fail} pillars
Critical: {count} | Warnings: {count}
Report: UI-REVIEW.md
Clean review:
"UI review: 85/100. 4 PASS, 2 WARN. 0 critical issues. Warnings: low contrast on footer links, missing focus ring on modal close button. Quick fixes."
Failed review:
"UI review: 42/100. Interaction FAILS: no loading states, no error states, no form validation. Accessibility FAILS: 5 missing ARIA labels. Recommend fixing before ship."