메뉴
Visual perception loop — detect errors, screenshot, score, and iteratively fix AI-generated UI components until ship-ready.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when a pull request needs review by a different AI model than the one that authored it, or when configuring cross-model code review pipelines in CI/CD.
Run Demerzel's autonomous driver — full cycle or individual phases across all repos
Capture meaningful session state (current cursor, in-flight work, live hypotheses, open questions, do-NOT-carry-forward, success criteria) to state/digests/latest.md so the next session — including one after auto-compaction — can re-enter without re-discovering context cold. Distinct from /learnings (which captures surprises). Validates against docs/contracts/digest-schema.json.
Autonomous research scheduler — selects the most under-researched department by coverage ratio, generates questions from completeness gaps, cross-model validates, auto-produces courses at T>=0.8, rate-limited to 6 cycles/day with kill switch
Personalized AI tutor — turns any topic into a customized, progress-tracked learning course. Use when the user wants to LEARN a concept, skill, language, tool, or domain. Creates a MISSION, curated RESOURCES, iterative lessons with self-checks, and learning-records that persist across sessions. NOT for interrogating the user about their own design (use brainstorming/IDSD for that).
Run one bounded supervised autonomous cycle on the Demerzel governance repo. Picks the smallest unchecked governance slice inside allow_edit, implements it, runs the oracle (`pwsh scripts/verify.ps1`), emits cycle evidence, and stops. Refuses to run unless dev-process-overseer reports loop-eligible and the preflight passes. Use when asked to "run one supervised loop", "advance governance autonomously", or "do one cycle and stop".
| name | demerzel-render-critic |
| description | Visual perception loop — detect errors, screenshot, score, and iteratively fix AI-generated UI components until ship-ready. |
AI writes code blind. This skill gives it eyes. Run the render critic to detect console errors, capture screenshots, score visual quality, and iteratively fix until the component is ship-ready.
/demerzel render-critic [component-path] — run the full perception loop on a component
Examples:
/demerzel render-critic src/components/Dashboard.tsx
/demerzel render-critic src/pages/demos/SpectralAnalyzer.tsx
npm run dev or equivalent)Step 1: Start dev server (if not running)
↓ verify Vite responds on localhost
Step 2: Open the target component page in browser
↓ navigate to route that renders the component
Step 3: Read Chrome DevTools console
↓ extract errors and warnings
Step 4: Classify errors (parallel)
├── Syntax errors → auto-fix (confidence 0.95)
├── Runtime errors → classify + fix (confidence 0.80)
├── Render errors → check mount lifecycle (confidence 0.70)
└── Layout errors → fix stylesheet (confidence 0.75)
Step 5: Apply fixes, re-render, re-check
↓ loop until error-free (max 5 iterations)
Step 6: Screenshot via Windows MCP
↓ capture browser viewport
Step 7: Score visual quality
├── Layout fidelity (35%)
├── Color contrast / WCAG (25%)
├── Responsiveness (20%)
└── Component completeness (20%)
Step 8: Governance gate (score >= 0.7)
↓ fail → Step 9 (suggest fixes)
↓ pass → Step 10 (ship check)
Step 9: Suggest visual fixes per dimension
↓ return to Step 5 with suggestions
Step 10: Ship-ready check
↓ score >= 0.9 for 2 consecutive renders → SHIP
Step 11: Compound
↓ harvest error patterns → Seldon
Verify Vite dev server is running. If not, start it:
Check: curl http://localhost:5173 (or configured port)
If down: npm run dev (background)
Wait: until server responds (max 30s)
Navigate the browser to the route that renders the target component. If the component is not routed, create a temporary demo page.
Use Chrome DevTools MCP to read all console output since page load:
Filter: level = "error" or level = "warning"
Extract: message, source file, line, column, stack trace
For each error, classify into one of 4 categories and propose a fix:
| Category | Confidence | Strategy |
|---|---|---|
| Syntax | 0.95 | Deterministic fix — missing brackets, typos |
| Runtime | 0.80 | Analyze stack trace, fix data flow |
| Render | 0.70 | Check lifecycle hooks, providers, boundaries |
| Layout | 0.75 | Fix CSS imports, module resolution |
Apply the highest-confidence fix first. Re-render via HMR. Re-read console. Repeat until clean or max 5 iterations reached.
Explain each fix: Before applying, state what the error is, why the fix works, and what confidence level justifies autonomous action.
Once error-free, capture the browser viewport using Windows MCP Screenshot tool. This is the serial bottleneck (~200ms per Amdahl's analysis).
Score the screenshot across 4 dimensions:
If overall score < 0.7, provide specific suggestions per failing dimension. Each suggestion maps to a concrete CSS or JSX change.
Score >= 0.9 for 2 consecutive renders → mark as SHIP. Single high score is not sufficient — prevents false positives from lucky renders.
Harvest error patterns and fix templates for Seldon knowledge base. Common errors become prevention rules; successful fixes become auto-fix templates.
state/render-critic/
consecutive-high.json — tracks consecutive >= 0.9 scores
ship-ready.json — latest ship verdict
error-patterns.json — harvested error → fix patterns