Nothing to hand? Load the seeded with eleven classic violations, or the to see what a passing audit looks like — both replay a saved run for free.
Paste or drop the code
The instant lint flags mechanical violations for free while you type — missing alt, unlabeled icon buttons, outline removal, transition: all, blocked paste, positive tabindex — before you run anything.
The AI audits it
Six guideline groups scored out of 10: Accessibility, Focus & keyboard, Forms, Motion & interaction, Typography & content, Performance & layout. Every issue quotes the exact code with its line number, names the rule it breaks, and gives the fix. The AI must also confirm or dismiss each prescan finding — disagreements are shown, not hidden.
Work the list, then re-check
Tick issues off as you fix them, click any line reference to jump straight to that line in the pasted code, and re-run the instant lint for free to confirm what is now clean. Audits are kept on your account, so the next run is compared against the last one: score deltas, issues resolved, issues still open. Export as Markdown, a PR checklist or JSON.
Derived from the @vercel-labs/web-design-guidelines skill and the Web Interface Guidelines.
What can I paste in?
A component, page or template in plain HTML, JSX/TSX, Vue or Svelte, with an embedded style block if you have one, plus a separate stylesheet in the optional CSS box. You can also drop the files onto the code box — .html, .jsx, .tsx, .vue, .svelte and .css are read locally in your browser and nothing uploads until you press Audit it. A fragment is fine: the audit judges what you pasted and does not treat missing page scaffolding as a defect.
What does it check?
Six groups from the Web Interface Guidelines, each scored out of 10 for a total out of 60: Accessibility, Focus and keyboard, Forms, Motion and interaction, Typography and content, and Performance and layout. Every issue quotes the offending code verbatim, cites its line number, names the rule it breaks and gives the concrete fix.
Is there anything free?
Yes. The instant lint runs entirely in your browser and costs nothing: it flags missing alt text, unlabeled icon buttons, removed focus outlines, transition: all, blocked paste, positive tabindex, disabled zoom and more, as you type. Both bundled examples replay a saved run at no charge. Re-checking your edits against a finished audit is also free. Only the full AI audit uses credits.
Do the line numbers match my file?
Yes, including on very large pastes. When a paste exceeds the size limit the middle is removed rather than the end, and the removed span is replaced with the same number of blank lines, so every line after the cut keeps its original number. Click any line reference in the issue list to select that line in the code box.
How does it help on the second run?
Past audits are stored on your SkillSafe account, not just in one browser, so they survive a device change. When you audit the same component again the result carries a comparison against the previous run: the change in each group score, which issues are resolved, which are still open, and which are new. You can pin any past audit as the baseline instead.
What does it cost?
You pay only for what a run actually uses. Before you run, the app shows the amount reserved for the audit and compares it against your balance, so the button is disabled rather than failing after you submit. Nothing is charged for the instant lint, the example replays or the re-check.