OpenChecklist
Open-source design checklists for websites, web apps, mobile, design-system components and flows — for people in the browser and for AI agents over MCP.
Live site: https://syedhusain-max.github.io/openchecklist/
Inspired by checklist.design. All checklist content in this repo is original and MIT-licensed.
What's better
| checklist.design | OpenChecklist |
|---|
| Live preview of every checklist — working example UI, each item pinned to its element, desktop/tablet/phone, light/dark | — | ✓ (229/229 items) |
| Item priority (must / should / nice) + filters | — | ✓ |
| WCAG 2.2 references linked per item | — | ✓ |
| "Not applicable" state + per-item notes | — | ✓ (N/A excluded from progress) |
| Projects combining many checklists, tracked separately | — | ✓ |
| Starter kits (Landing page, SaaS, Mobile MVP, Design system, E-commerce) | — | ✓ |
| Export Markdown / CSV / JSON, shareable state links | — | ✓ |
| "Copy AI review prompt" for any LLM | — | ✓ |
| MCP server (Claude, Cursor, Windsurf, VS Code…) | — | ✓ |
Command palette (⌘K, /), keyboard checking (j k x n) | — | ✓ |
| Dark mode, 44px touch targets, real checkbox semantics | — | ✓ |
| Open data + schema + validator for contributions | — | ✓ |
| No backend: static site, works offline once loaded | — | ✓ |
Quick start
npm start # http://localhost:4321 (serves web/, syncs data)
npm test # validates data + runs MCP server tests
The web app is plain HTML/CSS/JS in web/ — no build step. Deploy web/ to GitHub Pages, Netlify or any static host (run npm run sync first so web/checklists.json is current).
MCP server
git clone https://github.com/syedhusain-max/openchecklist.git
cd openchecklist/mcp && npm install
Claude Code
claude mcp add openchecklist -- node /absolute/path/to/openchecklist/mcp/index.js
Claude Desktop / Cursor / Windsurf / VS Code — add to the client's MCP config:
{
"mcpServers": {
"openchecklist": { "command": "node", "args": ["/absolute/path/to/openchecklist/mcp/index.js"] }
}
}
| Tool | Purpose |
|---|
list_checklists | List checklists, optionally by category |
search_checklists | Search titles, items, tags, WCAG criteria |
get_checklist | One checklist as Markdown or JSON, filtered by minimum priority |
list_kits | Starter kits |
build_project_checklist | Plain-English brief → merged project checklist (accessibility always included) |
review_design | Structured PASS/FAIL/N/A rubric for reviewing a screen |
generate_design_brief | Acceptance criteria for building one page/component/flow |
Also: resources at checklist://{category}/{slug} and prompts design-review, build-with-checklist.
Set OPENCHECKLIST_DATA=/path/to/checklists.json to point the server at your own fork's data.
Repo layout
data/checklists.json single source of truth (categories, checklists, kits)
data/schema.json JSON Schema for editors
scripts/validate.mjs data validator (npm run validate)
scripts/serve.mjs local static server
web/ the site (index.html, styles.css, app.js)
web/previews.js live preview template per checklist (data-check anchors)
web/preview-engine.js shadow-DOM renderer: device scaling, highlights, X-ray
web/preview-styles.js the preview design system
mcp/ MCP server (index.js, lib.js, tests)
Live previews
Every checklist renders a working example UI built from a small preview design system. Each element that satisfies an item carries data-check="<item-id>". Hovering an item, pressing p, or clicking 👁 Preview highlights that element. Show all checks numbers every anchored element, and Expand opens a full-screen inspector. Mobile checklists render in a phone frame. Everything else can switch between desktop (1200px), tablet (768px) and phone (390px) widths, which the preview CSS responds to through container queries. npm run validate fails if any item lacks an anchor.
Contributing
See CONTRIBUTING.md. Adding a checklist is one JSON object and a pull request.
License
MIT
