$ show thedaviddias/Front-End-Checklist
The Front-End Checklist is a comprehensive, open-source platform for front-end quality assurance, targeting both human developers and AI agents. It delivers a curated corpus of 386+ best-practice rules across 11 categories (HTML, CSS, JavaScript, Performance, Accessibility, SEO, Security, Images, Testing, Privacy, i18n) via a Next.js web application, a Model Context Protocol (MCP) server, and a standalone CLI. The architecture is a pnpm monorepo with shared packages for authentication (Better Auth + Prisma), design system (Radix UI), analytics (OpenPanel), state management (Zustand), search (FlexSearch), storage (IndexedDB), and validation. The MCP server exposes 11 tools (audit_url, review_code, search_rules, etc.) for AI-assisted code review and URL auditing, while the CLI provides offline audit capabilities. The web app offers rule browsing, user checklists with progress tracking, guides, and public profiles. The system is production-deployed on Vercel with PostgreSQL, Sentry error tracking, and Upstash rate limiting.
The LLM identified 6 files worth highlighting for reuse:
Core heuristic code review engine with 100+ checks for HTML, CSS, and JavaScript. Uses node-html-parser for AST-based structural analysis (form labels, heading order, duplicate IDs) and regex-based pattern matching for rule-specific heuristics. Self-contained module that could be extracted into a standalone library for static analysis of frontend code.
Converts custom MDX components (CodeExample, Warning, Tip, etc.) into standard Markdown or plain text using a configurable transform table. Each transform is a regex pattern with a replacement function, making it easy to extend for new components. Reusable for any MDX content pipeline that needs to strip custom components for LLM consumption or search indexing.
Singleton wrapper around IndexedDB with automatic caching, key validation, and fallback to localStorage. Provides get/set/delete/clear operations with metadata (version, timestamp) and a namespace prefix ('fec_'). Well-structured and could be extracted as a standalone browser storage utility.
Validates import statements across a codebase for allowed/denied patterns, barrel file detection, and component subdirectory rules. Uses configurable allow/deny lists and reports violations with file paths and line numbers. Reusable as a custom ESLint rule or standalone validation script for enforcing import conventions.
Parses YAML frontmatter from MDX rule files, supporting single-line, multi-line (|, >), and inline list formats. Normalizes fields (categories, priorities, npm packages) and returns structured rule objects. Reusable for any project that needs to load and parse frontmatter from a directory of content files.
Implements a simple fuzzy match algorithm for 'did you mean' suggestions. Computes similarity scores between an input string and a list of candidates, returning the best match above a configurable threshold. Lightweight and dependency-free, suitable for search autocomplete or typo correction in any application.