frontend-quality-guardrails
Frontend Quality Guardrails
Overview
Use this skill as a frontend quality gate for UI implementation and review. It covers long text, overflow, wrapping, truncation, alignment, spacing, responsive behavior, component states, accessibility, internationalization, visual polish, project-level code review, browser screenshot verification, and common UI style pitfalls.
Treat every UI as hostile to perfect content. Assume labels, names, URLs, IDs, prices, translated strings, user input, errors, table cells, badges, breadcrumbs, tabs, and button text can be longer than the mockup.
Prefer small, local CSS/layout fixes over broad rewrites. Preserve the existing design system, component API, tokens, spacing scale, and framework conventions unless the user asks for a redesign.
When to Use
Use this skill when building, modifying, or reviewing frontend UI where layout quality matters, especially:
- Long text, URLs, IDs, translated strings, form errors, labels, table cells, cards, tabs, breadcrumbs, or badges may overflow.
- The task touches HTML, CSS, React, Vue, Svelte, Next.js, Tailwind, shadcn/ui, Ant Design, forms, tables, dashboards, modals, drawers, navigation, or responsive layouts.
- The user asks to polish UI, fix overflow, improve alignment, review frontend code, validate browser screenshots, or avoid frontend style pitfalls.