From frontend
Enforces validation discipline for code changes: browser verification via Playwright screenshots, multiple runs for flaky tests, pnpm validate (vitest, lint, typecheck, svelte-check). Auto-invokes on changes, tests, task done.
npx claudepluginhub fubits1/svelte-skills --plugin frontendThis skill uses the workspace's default tool permissions.
- **Browser FIRST.** Before running any CLI validation, verify your changes work in the browser via Playwright. Navigate to affected pages, confirm the feature works, take screenshots. Broken code that passes lint is still broken. Browser is the source of truth.
Suggests manual /compact at logical task boundaries in long Claude Code sessions and multi-phase tasks to avoid arbitrary auto-compaction losses.
Share bugs, ideas, or general feedback.
frontend:playwright skill for all rules on screenshots, critical examination, browser_evaluate measurements, and visual debugging. NEVER ask the user to check their browser — that is YOUR job.node_modules/.vite and node_modules/.cache/storybook, then run. ALL three must pass. One green run is meaningless.Test Files N passed (N) ≠ verification. Always cross-check the test count against the expected total. A run that "passes 85/85" but only executes 147 of 192 tests has silently skipped 24% of the suite.pnpm validate (vitest + lint + typecheck + svelte-check). Must exit 0. Exception: pure CSS-only changes don't need a build — verify visually via Playwright instead and lint / vitest / svelte-check.pnpm test:unit (vitest) after every change. pnpm test also launches e2e tests which need a dev server — use pnpm test:unit for quick feedback.pnpm dev, not pnpm build.frontend:playwright skill).pnpm test does NOT verify MSW handlers, fixtures, or Storybook rendering.pnpm validate exists in package.json, run it as the final verification step. It combines vitest + lint + typecheck + svelte-check.pnpm lint:file <file> — run this on every edited file. It runs eslint + oxlint + tsgo (filtered to that file) + svelte-autofixer in one command. pnpm check alone does NOT catch TS2448/TS2454 (block-scoped variable used before declaration). tsgo --noEmit does. This script covers both..svelte, .svelte.ts, .svelte.js files: ALWAYS run the Svelte autofixer (mcp__svelte__svelte-autofixer) after editing to validate Svelte 5 correctness. (pnpm lint:file already includes this.)CI=true GITHUB_ACTIONS=true to catch tools that auto-detect CI and change behavior (e.g. oxlint switches to --format=github). NEVER push a CI "fix" without local CI simulation first.pnpx node-actionlint <file> after editing any .yml workflow file. Exit code 0 or it's not valid.pnpm validate:build as the final verification — runs validation and build tasks concurrently. See SETUP.md for how to configure this script. One command, everything checked.pnpm test:e2e. If you modified vitest tests, run pnpm test:unit. pnpm validate only runs vitest — it does NOT run Playwright e2e. Changed tests must actually execute and pass.pnpm lint:tests. One command, runs all 5 linters (oxlint, tsgo, eslint, knip, svelte-check) on test files concurrently. Must exit 0. Do NOT run individual linters — you WILL forget one.tee /tmp/test-output.log. If output is already in context, READ IT — never rerun. NEVER run the same expensive command twice in a row just to grep differently.pnpm validate:build exit 0? CI workflows edited → pnpx node-actionlint?git diff to see what actually changed. Subagents can claim "done, no changes needed" while having silently modified files, or claim "fixed" while having broken something. Never tell the user "I didn't change that" without checking git first.