From majestic-engineer
Verifies UI changes after modifications via skeptical screenshot analysis: confirms goals achieved, WCAG accessibility, and design system compliance.
npx claudepluginhub majesticlabs-dev/majestic-marketplace --plugin majestic-engineerThis skill is limited to using the following tools:
**Audience:** Developers who have made UI modifications and need visual verification.
Validates UI changes via screenshot analysis, visual regression testing, design system compliance, and accessibility checks using tools like Playwright and Cypress.
Validates UI visuals for regression testing, design system compliance, and accessibility using tools like Chromatic, Percy, Applitools, Playwright, and Cypress.
Audits UI screenshots, Figma designs, or live sites for visual quality, design consistency, brand alignment, design system compliance, and issues like WCAG contrast failures pre-launch.
Share bugs, ideas, or general feedback.
Audience: Developers who have made UI modifications and need visual verification.
Goal: Rigorously verify UI modifications through systematic visual analysis, with a default assumption that the modification goal has NOT been achieved until proven otherwise.
Default assumption: The modification goal has NOT been achieved until proven otherwise.
DESIGN_SYSTEM_PATH = /majestic:config toolbox.build_task.design_system_path ''
If DESIGN_SYSTEM_PATH is not empty, read the design system file at that path.
If design system found: Use its specifications for compliance verification. If not found: Use generic design principles only.
Describe exactly what you observe in the visual evidence without making assumptions:
Compare each visual element against the stated modification goals:
Actively look for evidence that the modification failed rather than succeeded:
Verify visual accessibility compliance:
If design system was loaded in Step 0, verify against its specific specifications:
If NO design system loaded, use generic checks:
Before declaring success, confirm:
Structure your validation report as:
## Visual Validation Report
### Observed State
From the visual evidence, I observe...
[Factual description of what is visible]
### Goal Assessment
| Goal | Status | Evidence |
|------|--------|----------|
| [Goal 1] | pass/warning/fail | [Specific observation] |
### Accessibility Check
- Contrast: [Pass/Fail with ratios]
- Focus indicators: [Present/Missing]
- Responsive: [Tested breakpoints]
### Design System Compliance
**Design System:** `[path or "None loaded"]`
| Category | Status | Evidence |
|----------|--------|----------|
| Colors | pass/warning/fail | [e.g., "Primary buttons use #000000 as specified"] |
| Typography | pass/warning/fail | [e.g., "H1 uses text-4xl font-semibold"] |
| Spacing | pass/warning/fail | [e.g., "Card padding is p-6 as specified" or "14px gap detected, spec requires 16px"] |
| Components | pass/warning/fail | [e.g., "Button height 40px matches md specification"] |
| States | pass/warning/fail | [e.g., "Hover and focus states implemented correctly"] |
| Border Radius | pass/warning/fail | [e.g., "Buttons use rounded-lg as specified"] |
| Shadows | pass/warning/fail | [e.g., "Cards use shadow-md elevation"] |
**Compliance Summary:** [X/7 categories pass]
### Verdict
[ACHIEVED / PARTIALLY ACHIEVED / NOT ACHIEVED]
### Issues Found
1. [Issue with specific location and design system reference]
### Recommendations
1. [Specific fix needed with design system reference]
- Current: [what was observed]
- Expected: [what design system specifies]
- Fix: [specific change needed]
When using browser tools for visual validation:
browser_snapshot to get element referencesbrowser_screenshot to capture the target area