iterative-frontend-dev
Iterative Frontend Development with Meticulous
Use this skill when implementing a multi-step frontend change. After each step, run a quick local visual check using Meticulous to catch regressions and unintended side effects early. After all steps are complete, run a full cloud test run to validate across all recorded sessions.
Prerequisites
- Local dev server running (e.g.
npm run devorpnpm dev), serving the app at a known URL such ashttp://localhost:3000 - API token configured:
~/.meticulous/config.jsonorMETICULOUS_API_TOKENenvironment variable - Meticulous CLI available:
npx @alwaysmeticulous/cliormeticulousif installed globally
Per-step loop
Repeat the following for each step of your change.
Step 1 — Implement the step's changes
Make your code changes for this step.
More from alwaysmeticulous/skills
meticulous-cli
Overview of the Meticulous CLI tool and its global options. Use when asking about the meticulous CLI in general, available commands, or global flags that apply to all commands.
28test-with-meticulous
Run after implementing any frontend change to verify its visual impact. Triggers a Meticulous test run, then inspects screenshot diffs to classify each visual change as intended or unintended. Use this before marking a frontend task as complete.
26meticulous-simulate-and-diff
Run a Meticulous session simulation against a live URL and analyze the visual output — either by inspecting screenshots directly (quick-check mode) or by comparing pixel and HTML diffs against a base replay. Use when checking whether a code change has introduced visual regressions for a specific session.
23meticulous-cli-schema
Meticulous CLI schema command for outputting the full CLI command structure as JSON. Use when you need to programmatically inspect available commands and their options, or when building tooling that drives the Meticulous CLI.
20meticulous-cli-download
Meticulous CLI download commands for fetching recorded sessions, replays, and test runs to the local data directory. Covers `meticulous download session`, `meticulous download replay`, and `meticulous download test-run`.
20meticulous-cli-auth
Meticulous CLI authentication commands. Use when logging in, checking who is authenticated, or logging out of the Meticulous CLI. Covers `meticulous auth whoami` and `meticulous auth logout`.
20