Improving frontend coverage
SkillDev toolsImproving-frontend-coverage is a skill for AI agents that raises a frontend project's test coverage. It runs the unit test suite with coverage reporting, finds large or core files with low coverage, and writes focused tests for them. Each new test is verified to pass, and coverage is re-measured until it gains roughly 0.2%.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a frontend project with a unit test suite that can report coverage.
Then ask your AI: use the Improving frontend coverage skill
What your AI can do with it
- Runs the frontend unit test suite with coverage reporting
- Analyzes coverage reports to find large or core files with low coverage
- Writes React Testing Library-style tests for conditionals, events, errors, edge cases, and
- Verifies each new test passes before moving on
- Re-measures coverage until it gains roughly 0.2%
- Simplifies and reviews the changes it makes
Getting started
- Have a frontend project with a unit test suite that can report coverage.
- Add the improving-frontend-coverage skill to your agent's available skills.
- Ask the agent to improve frontend test coverage, or invoke the skill when you want coverage raised systematically.
- Review the new tests and coverage changes the agent produces.
What this skill tells your AI
The instructions your AI receives, as published by streamlit/streamlit in .claude/skills/improving-frontend-coverage/SKILL.md and read by ahel’s review.
Increase frontend unit test coverage by ~0.2% through meaningful tests that add real value.
Be fully autonomous — Do NOT stop or pause to ask for confirmation. Keep iterating (analyze → implement → verify) until the 0.2% coverage target is reached. If you encounter ambiguities about what to test, make a reasonable choice and proceed.
Workflow
Step 1: Run tests with coverage
COVERAGE_JSON=1 make frontend-tests # ~5 min
Reports generated in frontend/coverage/:
coverage-summary.json- Per-file percentages (lines, branches, functions)coverage-final.json- Line-level data with uncovered line numbers (hit count 0 ins,f,bmaps)
Step 2: Analyze and prioritize
Read coverage-summary.json to find files with:
- Large size + below-average coverage (high impact)
- Core components in
lib/src/components/ - Utility functions in
utils/src/
Skip: >97% coverage, auto-generated, .d.ts, test files.
Step 3: Implement tests (in subagent)
Launch a subagent to implement tests for each prioritized file. Provide the subagent with:
- The target file path and its uncovered lines from
coverage-final.json - Instructions to read the source, existing tests, and write new tests
- The test selection guidelines below
The subagent should:
- Read source and existing tests to understand gaps
- Write tests for: conditional rendering, event handlers, error states, edge cases, accessibility
- Follow RTL best practices: query by role/label, test behavior not implementation
- Run the new tests to verify they pass:
cd frontend && yarn test path/to/Component.test.tsx
Step 4: Verify and iterate
cd frontend && yarn test path/to/Component.test.tsx # Run new tests
COVERAGE_JSON=1 make frontend-tests # Measure progress
Repeat steps 2-4 until coverage improves by ≥0.2%, then run make check.
Step 5: Simplify, review, and address feedback
Once all tests pass and coverage target is met:
- Run the
simplifying-local-changessubagent to clean up and simplify the code changes. Wait for completion. - Run the
reviewing-local-changessubagent to review the changes. Wait for completion and read the review output. - Address the review feedback: for each recommendation, implement it if valid and improves code quality; skip with brief reasoning if not applicable or would over-engineer.
- Run /checking-changes to verify everything still passes after changes.
Test selection
DO test: Conditional rendering, user interactions, prop variations, error handling, accessibility, edge cases (null, empty, max values).
DON'T test: Pass-through props, styling, library internals, implementation details, already well-covered code.
Coverage exclusions: Use /* istanbul ignore next */ sparingly for code that genuinely doesn't need testing. Always include a reason (e.g., /* istanbul ignore next -- defensive */):
- Browser-specific branches that can't run in jsdom (
/* istanbul ignore next -- browser-only */) - Defensive fallbacks that should never execute (
/* istanbul ignore next -- defensive */) - Framework-required boilerplate (
/* istanbul ignore next -- exhaustive */)
Notes
- Quality > coverage numbers - skip tests that don't catch real bugs
- Test files: co-located as
<Component>.test.tsx - Use
/checking-changesafter implementing tests
Signals
- GitHub stars
- 46k
- Forks
- 4k
- Last commit
- Sep 2026
Questions
- How much coverage does it add per run?
- It works until coverage gains roughly 0.2%, then simplifies and reviews the changes.
- What kinds of tests does it write?
- Focused React Testing Library-style tests covering conditionals, events, errors, edge cases, and accessibility.
- How does it choose which files to test?
- It analyzes the coverage report and targets large or core files with low coverage.
- Does it check that new tests actually work?
- Yes. It verifies each new test passes and re-measures coverage after adding tests.
Advanced
- Item type
- skill
- Key
improving-frontend-coverage- Source
- github.com/streamlit/streamlit