Dev.to WebDev 🛠 Dev 👁 0 📖 2 min read

I Built a 400-Item Front-End Checklist (and Taught My AI Assistant to Use It)

Most launch bugs aren't exotic. They're the basics — a missing meta description, a blocking script, a form without labels — missed because nobody had a list. So I built one, and made it free: the Front-End Checklist. Tr

Most launch bugs aren't exotic. They're the basics — a missing meta description,
a blocking script, a form without labels — missed because nobody had a list.

So I built one, and made it free: the Front-End Checklist.
Try it: https://checklist.shinningtechservices.com/

The bugs that ship are boring

I've spent years shipping front-end work across banking, healthcare, and
government. The pattern never changes: the bugs that slip through to production
are almost never clever edge cases. They're the checklist items nobody checked —
the alt text, the tap target, the meta tag, the label on the form field.

A list doesn't make you a better developer. It makes the boring stuff
impossible to forget. That's the whole idea.

What the checklist covers

400 items across 13 sections — accessibility, performance, SEO, security,
privacy, testing, and more. Every item has a priority, documentation links,
and suggested tools, so it's a work plan, not just a wall of text.

The audit engine

Paste any public URL and the audit runs up to 246 automatic checks. You get a
score, and failures sorted High, Medium, Low, each with the evidence behind it.

Some results are flagged "verify" — heuristics, not certainties. A machine can
tell you a label is missing; it can't tell you whether the label makes sense.
The score is a starting point for a human, not a verdict.

From audit to work plan

One click ticks every passing item straight into your checklist, so the audit
becomes the work plan. Export the report as Markdown or PDF, or share a link.

Checklist progress saves on your device. No account needed.

The agent skill and MCP server

There's a free agent skill for Claude Code, Cursor, and GitHub Copilot, and an
MCP server on npm:

npm i -g frontend-checklist-mcp

Your AI assistant can audit a page, explain each failure, fix the code, and
re-audit. Audit → explain → fix → re-audit, in one loop. Free API, no key.

What it can't do (honest limits)

Single page only. No JavaScript execution. No Core Web Vitals, and no
real-device or screen-reader testing. It catches the checkable basics; the
rest still needs a human and a real browser.

One note: audit runs are logged (URL, score, time) for analytics.

What's next

The checks still missing, a CLI, CI plans — and contributions. It's open
source (MIT) at Github

It audited my own agency site at 88% — the remaining failures are mine to fix,
and they're on my list. I'd genuinely like to know what it misses. What
checks would you add, and which ones shouldn't be automatic?

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.