From frontend-skills
Adds a quality:gate script with biome, tsgo, and related tests, plus a GitHub Actions workflow and Stop hook for type checking. Useful for local/CI quality gates and pre-push validation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:setup-quality-gateThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- `quality:gate` script -- lint + type check + related tests in <5s
quality:gate script -- lint + type check + related tests in <5sgit diff --exit-code)@claude review trigger/codex:review cross-model review{
"scripts": {
"lint": "biome check .",
"lint:fix": "biome check --write .",
"type:check": "tsgo",
"test": "vitest --run",
"test:related": "vitest --run --related",
"quality:gate": "biome check . && tsgo && vitest --run --related $(git diff --name-only HEAD)"
}
}
Create src/types/assets.d.ts from REFERENCE.md -- tsgo need for .svg/.css/.png imports.
Write .github/workflows/quality-gate.yml from REFERENCE.md. Run on PR + push to main.
Copy into .claude/hooks/, chmod +x:
scripts/typecheck-stop.sh -> Stopscripts/bundle-guard.sh -> PostToolUse (Edit|Write)scripts/test-perf-stop.sh -> Stopbun run quality:gate work.github/workflows/quality-gate.yml existsrc/types/assets.d.ts existnpx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsEnforces quality gates in TypeScript/Node.js projects: pre-commit linting/formatting with ESLint/Prettier/tsc, tests/coverage with Vitest, builds, CI checks, security audits, E2E with Playwright, and Lighthouse performance.
Detects project type (Node.js, Python, Rust, Go) and auto-configures quality gates, hooks, and project settings. Useful when onboarding a new codebase.
Guides creation of Claude Code writing hooks for code quality gates, static analysis, and workflow automation using structured TDD tasks on events like PreToolUse.