Enforce frontend code review and implementation quality using a frontend checklist

Use a structured frontend checklist and MCP tools to help AI agents and human developers conduct accessibility, performance, SEO, security, and code quality audits when writing React, Next.js, HTML, and CSS frontend code.

GitHubthedaviddias74.6k

CursorClaude Codev0BoltFront-End Checklist MCP

Added 2026-11-01 · originally published 2026-10-31

Key points

Choose the correct UI pattern using UX Patterns and compare trade-offs among common UI patterns before deciding how to implement an interface.
Connect MCP-compatible AI agents to Front-End Checklist for frontend code reviews, structured rule lookups, and audits.
Prioritize using review_code to review pasted code, components, or files and report the highest-confidence issues.
Search for rules using search_rules before providing suggestions on accessibility, performance, SEO, security, or images.
Audit public https:// pages directly using audit_url.

Pitfalls

Writing frontend code blindly without verification, leading to issues that impact user experience, accessibility, performance, SEO, or security.

.cursorrules

- Always consult the Front-End Checklist rules when making recommendations for HTML, CSS, JavaScript, accessibility, performance, SEO, security, images, privacy, i18n, and testing.
- Use MCP-compatible tools or `review_code` to audit components and code before finalizing implementations.

Copy-ready prompt

Use the Front-End Checklist MCP to review this [React component / page / code] and report the highest-confidence findings first based on rules for HTML, CSS, JavaScript, accessibility, performance, SEO, security, images, privacy, i18n, and testing.

View original post

#AI Frontend Development#Code Review#Frontend Standards#MCP

Fixing generic AI-generated frontend design with open-source skills

GitHub trending charts show four skills specifically targeting generic, AI-looking frontends occupying top positions in the top 12. Integrating these tools and methods effectively resolves the lack of aesthetic appeal in AI-generated frontend pages.

Beautifying AI-Generated Frontends and Avoiding Common Pitfalls

AI-generated frontend interfaces often look cheap and lack polish. This card compiles practical advice from multiple designers, offering concrete improvement techniques and ready-to-use prompts covering everything from border-radius and color to typography and borders.

Design tips and standards for elevating AI frontend UI taste

Drawing on the insights of top designers, this guide helps you avoid cheap or tacky AI-generated interfaces by standardizing details like border radiuses, colors, typography, and borders. Effectively leveraging ready-made component libraries and prompts significantly enhances the UI quality in Vibe Coding.

Found this useful? Get daily updates on Telegram or X.

Join on Telegram Follow @CaiXiang23766

Summarized by AI from the original source - refer to the original post for details. Copyright belongs to the original author.

Key points

Pitfalls

Related techniques