frontend-mix-validate
Performs automated validation tasks on integrated apps to ensure code quality and build stability.
Install
mkdir -p .claude/skills/frontend-mix-validate && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17450" && unzip -o skill.zip -d .claude/skills/frontend-mix-validate && rm skill.zipInstalls to .claude/skills/frontend-mix-validate
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Run the full validation suite (install, type-check, lint, build, tests) on a freshly integrated app and fix anything broken. Run this skill in a Claude Code session driving Sonnet - validation is grind work, Sonnet is the right tool. Two-attempt cap per step; failures are recorded for the fix-validation escalation step, not papered over. Use after the frontend-mix-integrate session finishes.Key capabilities
- →Run package installation using `bun install`, `npm install`, or `pnpm install`
- →Perform type checking with `tsc --noEmit` or `bun run typecheck`
- →Execute linting commands like `bun run lint` or `eslint .`
- →Build the application using `bun run build` or framework equivalent
- →Run tests if a test script exists
How it works
This skill runs a full validation suite on an integrated app, including installation, type-checking, linting, building, and testing, with a two-attempt cap per step.
Inputs & outputs
When to use frontend-mix-validate
- →Validating new frontend integrations
- →Automating build and lint checks
- →Debugging integration failures
About this skill
Frontend-Mix · Validate
You are the validation step of a manual mixed-provider build. Sonnet handles this - it's grind work, not judgment. Two attempts per check, then record the failure. Never paper over real bugs.
What to do
-
Use the Read tool to open
$ARGUMENTSend-to-end. Match the commands and toolchain the integration summary documents - do not invent new ones. -
The filename in
$ARGUMENTScarries your run-name. Strip the directory and the-integration-summary.mdsuffix. You'll use it to name your output file. -
If
$ARGUMENTSis empty, ask the user for the integration summary path. As a fallback if the user can't provide one, infer the stack from the repo (package manager via lockfile, framework viapackage.json).
Steps (each capped at 2 attempts)
- Install:
bun install(ornpm install/pnpm installbased on lockfile). - Type check (
tsc --noEmit,bun run typecheck, etc). - Lint (
bun run lint,eslint ., etc). - Build:
bun run build(or framework equivalent). - Tests if a test script exists.
For each step:
- Attempt 1: run the command. If it passes, move on.
- Attempt 2: if it failed, try one targeted fix (read the error, edit the offending file, re-run). If it still fails, STOP retrying that step and record the failure.
Failure rules (no shortcuts)
- Do NOT paper over real bugs. A failing type check on
anyis a bug. - Do NOT delete tests to make them pass.
- Do NOT add
// @ts-ignore,// eslint-disable, weaken types, or skip steps. - If you find yourself wanting to do any of that, stop and record the failure.
Output - exactly ONE of these two files
Both go to .claude/artifacts/ with the <run-name> prefix. Create the directory if it doesn't exist.
Case A - All steps passed cleanly
Write .claude/artifacts/<run-name>-validation-summary.md containing:
- Each command run with its exit code
- One-line confirmation: "All checks passed."
Case B - One or more steps failed after 2 attempts
Write .claude/artifacts/<run-name>-validation-issues.md containing, for each failure:
- Step name (e.g. "type check")
- Exact command that failed
- Truncated error output (last 30 lines)
- File(s) most likely responsible (your best guess)
- One-sentence hypothesis for the root cause
Then STOP. The next session (fix-validation, run with Opus) reads this file and addresses each failure with judgment.
After validating
Tell the user the absolute path to whichever file you wrote, and the next step:
If you wrote <run-name>-validation-summary.md (clean):
Next: invoke /frontend-mix-smoke with the integration-summary path and the validation-summary path.
If you wrote <run-name>-validation-issues.md (failures recorded):
Next: switch back to Opus and invoke /frontend-mix-fix-validation with the validation-issues path and the plan path.
When not to use it
- →When the task is not to validate a freshly integrated app
- →When attempting to paper over real bugs by ignoring errors or deleting tests
- →When more than two attempts have been made for a step
Limitations
- →Two-attempt cap per step for fixes
- →Does not paper over real bugs or weaken types
- →Requires an integration summary path as input
How it compares
This skill provides a structured, automated validation process with strict failure rules and a two-attempt limit, ensuring thorough post-integration cleanup compared to manual checks.
Compared to similar skills
frontend-mix-validate side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-mix-validate (this skill) | 0 | 1mo | No flags | Intermediate |
| verification-loop | 0 | 3mo | Review | Intermediate |
| dependency-upgrade | 26 | 4mo | Review | Intermediate |
| validate-typescript | 5 | 9mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by coleam00
View all by coleam00 →You might also like
verification-loop
tom237ttkk
A comprehensive verification system for Codex work sessions.
dependency-upgrade
wshobson
Manage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing breaking changes in libraries.
validate-typescript
BerryKuipers
Run TypeScript compiler type-checking (tsc --noEmit) to validate type safety and catch type errors. Works with any TypeScript project. Returns structured output with error counts, categories (type/syntax/import errors), and affected files. Used for quality gates and pre-commit validation.
ts-testing
johnlindquist
Design, implement, and maintain high‑value TypeScript test suites using popular JS/TS testing libraries. Use this skill whenever the user is adding tests, debugging failing tests, or refactoring code that should be covered by tests.
react-best-practices
redpanda-data
Client-side React performance optimization patterns.
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.