deterministic-expecteds

Renders byte-stable expected screenshots using pinned clocks, faked inputs, and pixel-exact comparison.

Updated Jun 12, 2026
One-click install
npx skills add https://github.com/missingbulb/GoogleCalendarEventCreator --skill deterministic-expecteds-missingbulb
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: deterministic-expecteds
Source: https://github.com/missingbulb/GoogleCalendarEventCreator/tree/main/.claudinite/shared/packs/executable-requirements/skills/deterministic-expecteds
Command: npx skills add https://github.com/missingbulb/GoogleCalendarEventCreator --skill deterministic-expecteds-missingbulb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Rendered expected snapshots in executable requirements drift when clocks, fonts, network data, or animations vary between runs, making them impossible to own and review. This Skill defines the rules and per-stack recipes that make a rendered expected byte-stable forever. ## Core Features & Use Cases - Determinism rules: Pin a shared reference clock, fake network/randomness/locale/viewport inputs, load real fonts, and use fixed-duration pumps instead of waiting for settled states. - Per-stack rendering recipes: jsdom + satori + resvg + pixelmatch for DOM products, and Flutter golden files with a scripted fake world for Flutter apps. - Pixel-exact comparison: Enforces zero tolerated diff ratio so any visual change is a reviewed, intentional update. - Use Case: When writing a requirements case under dev/requirements, use this Skill to build the render harness and fake world so the expected screenshot is reproducible on every machine and CI run. ## Quick Start Use the deterministic-expecteds skill to set up the render harness and fake world for my new requirements case so its expected screenshot is byte-stable.

Frequently Asked Questions about deterministic-expecteds

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make rendered test snapshots deterministic?

Pin one shared reference clock for all date formatting, fake every nondeterministic input such as network, randomness, locale, and viewport, and load real fonts in the render harness. Use fixed-duration pumps rather than waiting for UI to settle.

How to render DOM snapshots without a real browser?

Feed fake case data to the real render function in a jsdom document seeded from the real HTML, fold CSS in as inline styles, rasterize with satori and resvg, then compare with pixelmatch at zero tolerated diff. This is deterministic and dependency-light.

Does Flutter support golden file snapshot testing?

Yes, Flutter widget tests support golden files via matchesGoldenFile, pumping the real app shell against a scripted fake world. Use --update-goldens to refresh, and load fonts from the FontManifest including icon fonts.

Why does text render as boxes in test snapshots?

Test environments default to a glyph-less stub font, so text renders as boxes. Load the product's bundled font families and icon font in the harness, and pin the family explicitly on styles that do not inherit it, such as button text.

Should snapshot comparison allow a small pixel tolerance?

No, comparison should be pixel-exact with zero tolerated diff ratio. A tolerance invites unreviewed drift; if a platform renders unstably, fix the determinism through fonts, clock, and fakes rather than loosening the threshold.