Dec quality testing
Skill jpoindexter/design-engineering-canon/skills/dec-quality-testing
Frontend quality and testing strategy — visual regression testing (snapshot diffing) and the Testing Trophy (favor integration tests over the classic pyramid for UI). Use when deciding what kind of tests to write for UI, setting up snapshot/visual diffing, or arguing test strategy for a component or app.From its SKILL.md
npx -y skills add jpoindexter/design-engineering-canon --skill dec-quality-testingAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.5 KB, 227 tokens by cl100k_base, as published. Nobody here has run it
Quality & Testing
How to test UI so the tests reflect what users actually experience.
- Visual Regression Testing: Snapshot diffing (Chromatic, Percy, Playwright snapshots) to catch unintended UI changes. Pixels are the source of truth for appearance — assert on them.
- Testing Trophy (Kent C. Dodds): For UI, favor integration tests over the classic pyramid. Shape (bottom → top): static (types/lint) → unit → integration (the bulk) → e2e. Test behavior users experience, not implementation details.
How to apply
- Default UI tests to the integration layer: render the component with its real collaborators, interact like a user, assert on visible outcomes.
- Avoid testing implementation details (internal state, private methods) — they break on refactors that don't change behavior.
- Add visual regression snapshots for components where appearance is the contract (design-system primitives, marketing pages).
- Keep e2e few and high-value (critical flows only); lean on static checks (types, lint) as the cheap first line.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.