What problem does it solve? Frontend codebases drift into inconsistent patterns when multiple contributors write components, hooks, and styles without a shared convention. This Skill gives the AI a concrete style contract so generated or reviewed frontend code follows the same formatting, organization, and accessibility rules every time. ## Core Features & Use Cases - Formatting and organization rules: Enforces 100-char line limits, prettier/eslint settings, single quotes, and a defined src/frontend directory structure for components, pages, lib, and styles. - Component and state conventions: One component per file, typed props, small components under 200 lines, no prop drilling beyond two levels, and proper server-state handling via data-fetching libraries. - Accessibility and anti-pattern checks: Requires accessible names, keyboard navigation, WCAG AA contrast, and flags anti-patterns like inline styles, useEffect for derived state, and direct DOM manipulation. - Use Case: When asking the AI to build a new search filter component, it will debounce input handlers, handle loading and error states, centralize API calls, and avoid scattered fetch calls automatically. ## Quick Start Review this React component against our frontend style conventions and fix any accessibility or state management issues.
