Code Quality Workflow Skill

Code Quality Workflow

Mandatory code quality workflow ensuring all code meets standards before commits. This workflow runs automated type checking, formatting, linting, and testing.

When to Apply

Use this workflow:

After making ANY code changes
Before committing code
When fixing errors or issues
During code review preparation

⚠️ CRITICAL: Mandatory Steps

After making ANY code changes, you MUST:

Format code: cd embedded-components; yarn format
Run build: cd embedded-components; yarn build — required for substantive .ts/.tsx edits including tests/mocks (errors may not appear in Vitest alone).
Run tests: cd embedded-components; yarn test
Fix any errors that appear
Re-run until all pass

Large changes (new components, refactors, many files): run yarn typecheck immediately before yarn build when you want an explicit extra gate:
yarn format; yarn typecheck; yarn build; yarn test.

Quick Reference

The Test Command

cd embedded-components
yarn test

This runs in sequence:

typecheck - TypeScript type checking
format:check - Prettier formatting verification
lint - ESLint linting
test:unit - Vitest unit tests

Quick Fix Commands

cd embedded-components

# Auto-fix formatting
yarn format

# Auto-fix linting
yarn lint:fix

# Check types only
yarn typecheck

# Full package build — run after substantive edits (including tests)
yarn build

# Run tests only
yarn test:unit

# Full test suite
yarn test

Typical sequence: yarn format → yarn build → yarn test. For large changes: yarn format, yarn typecheck, yarn build, yarn test.

Never Commit Code With

❌ TypeScript errors
❌ Build failures — run yarn build after edits (including tests)
❌ Formatting errors (Prettier)
❌ Linting errors
❌ Failing tests

Coverage Requirements

✅ Minimum 80% line coverage
✅ All new code must have tests
✅ Tests must be colocated with implementation
✅ Use MSW for API mocking

How to Use

For detailed instructions, examples, and troubleshooting:

Full guide: AGENTS.md - Complete workflow documentation
Related skills:
- test-and-fix-workflow - Systematic debugging workflow
- component-testing - Testing patterns and examples

References

See embedded-components/package.json for all scripts
See AGENTS.md for complete workflow documentation
See embedded-components/CONTRIBUTING.md for contribution guidelines

Agent Skills: Code Quality Workflow

Install this agent skill to your local

Skill Files