From frontend
Validates edited files by linting .svelte/.ts/.js with eslint/oxlint/tsgo/svelte-check/knip, testing stories, linting markdown/tests/YAML. Auto-invokes after every edit.
npx claudepluginhub fubits1/svelte-skills --plugin frontendThis skill uses the workspace's default tool permissions.
Run the correct validation for every file you edited OR have been prompted to review. No exceptions.
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.
Run the correct validation for every file you edited OR have been prompted to review. No exceptions.
Before and during validation, apply the rules from these skills:
frontend:code-style — applies to ALL files (variable naming, braces, data attributes)svelte-5:code-style-svelte — applies to .svelte and .svelte.ts/.svelte.js filesany. Type it properly. If the type doesn't
exist, create a local type or import the right one.eslint-disable without a FIXME or TODO. Every
disable must explain what needs to be fixed and why it can't
be fixed now. Bare disables are cheating.After EVERY file edit. Not at the end of a batch — after EACH edit. If you edited 3 files, you validate 3 times (or group by tool).
| File type | Command | Notes |
|---|---|---|
.svelte, .ts, .js | pnpm lint:file <path> [path2...] | Runs eslint + oxlint + tsgo + svelte-check + knip |
.stories.svelte | pnpm lint:file <path> AND pnpm test:story <Pattern> | Both. Lint AND test. |
.test.ts, .spec.ts | pnpm lint:tests | Lints all test files |
.md | npx markdownlint-cli <path> | Fix all errors before done |
.yml/.yaml (CI) | Simulate with CI=true GITHUB_ACTIONS=true locally | Never guess at CI behavior |
vite.config.ts | npx tsgo -p tsconfig.node.json --noEmit | Separate tsconfig — pnpm check won't catch it |
frontend:playwright + frontend:pixel-perfectAny edit that touches styles — .css, .scss, or <style> blocks
in .svelte files — requires visual regression verification via
the frontend:playwright and frontend:pixel-perfect skills. Lint alone cannot
catch visual regressions. Measure BEFORE, apply change, measure
AFTER, report a diff table with zero tolerance.
For component + story pairs, follow this exact sequence:
pnpm test:story <Pattern> — see the failurepnpm lint:file <component> <story>
— must exit 0 BEFORE running tests. Lint catches type errors
that would crash at runtime. Testing unlinted code wastes time.
Fix ALL errors, not just yours.mcp__svelte__svelte-autofixer) on .svelte, .svelte.ts, and .svelte.js files that
use Svelte 5 patterns ($state, $derived, $props, $effect,
$bindable, snippet, {@render}). Catches slot→children,
stores→runes, and other migration issues. Skip for pure
Svelte 4 files (export let, $:, ).pnpm test:story <Pattern> — only test
after lint is clean. If lint found type issues, the test on
unfixed code was meaningless.Do NOT move to the next file until all steps pass.
If you modify a shared component (context wrapper, utility component, store, type file, or anything imported by multiple consumers), you MUST verify no regressions across ALL consumers:
pnpm test:storybook — all storybook testspnpm test — all unit/browser testsA change to a shared wrapper, type, or store can silently break every consumer — not just the story you're working on.
If invoked with <args>, validate those files.
If invoked without arguments, check what you edited in this conversation:
# edited a component
pnpm lint:file src/lib/components/MyComponent.svelte
# edited a story + its wrapper
pnpm lint:file src/lib/components/stories/MyComponent.stories.svelte src/lib/components/stories/MyComponentWrapper.svelte
pnpm test:story MyComponent
# edited markdown docs
npx markdownlint-cli docs/STORYBOOK.md docs/STORYBOOK-DECORATOR.md