Render Verify

Render Verify

Rendered output can fail despite valid specs. This skill is the final visual quality gate.

When to use

Use after any visual render:

• Flint chart PNG/SVG output
• Mermaid diagram render
• generated SVG or HTML figure
• screenshot or annotated image
• documentation page with embedded images

Shared Knowledge Gate

Before approving a consequential rendered visual, consult scout-knowledge-base for relevant prior decisions, failure modes, procedures, and gotchas. Read only records whose signals or preconditions match the visual, and treat them as context rather than authority. If unavailable, state that once and continue with the current verification evidence; do not create a local fallback while reviewing.

Verification checklist

Flint-specific checks

1. Confirm render_chart returned image content when user-visible output is required.
2. Confirm validate_chart reports valid: true for non-trivial specs.
3. Confirm theme_spec is one of the installed themes from list_themes.
4. Confirm chart dimensions are suitable for the target document or UI.
5. If a chart is missing in markdown, check relative image paths from the markdown file's folder.

HTML gallery and dashboard checks

For interactive pages or chart galleries with mixed renderers:

1. Open the page in the target browser, not just as source.
2. Check the browser console for errors.
3. Check for horizontal page overflow.
4. Check each chart body for internal scroll or clipped content unless scrolling is the design.
5. Switch between at least two visually different themes and confirm custom Canvas, SVG, D3, Chart.js, HTML tables, legends, and badges all change together.
6. Inspect label placement on bar, line, table, heatmap, gauge, and custom canvas cards. Overlapping labels are a render failure even when the page has no console errors.
7. Preserve interaction state that matters, such as scroll position after a theme change.

Useful browser-side probes:

Array.from(document.querySelectorAll('.chart-card')).map((card, index) => {
  const body = card.querySelector('.chart-body');
  const title = card.querySelector('h3')?.textContent?.replace(/\s+/g, ' ').trim();
  return {
    index,
    title,
    overflowX: body ? body.scrollWidth - body.clientWidth : 0,
    overflowY: body ? body.scrollHeight - body.clientHeight : 0
  };
}).filter(item => item.overflowX > 2 || item.overflowY > 2);

document.documentElement.scrollWidth - document.documentElement.clientWidth;

Documentation image checks

For markdown docs:

• keep image paths relative to the markdown file
• avoid absolute local paths in committed docs
• place generated assets under a stable folder such as docs/assets/<topic>/
• verify every ![alt](path) resolves
• use concise alt text that names the chart or figure

Failure response

If any check fails:

1. Name the failure specifically.
2. Fix the source spec, render command, image path, or layout.
3. Re-render if source changed.
4. Re-run the verification checklist.

Do not call a visual task complete when only the JSON spec exists and the user asked to see charts.