frontend-best-practices

To enforce React UI consistency, apply a centralized design system that governs typography classes, color tokens, phase palettes, and component patterns to prevent visual drift across CSS and components.

A phase palette defines consistent UI states for component development. You need it during development and QA to validate component implementations and ensure visual states remain uniform across the application.

Structure a new React component by applying PPN typography classes, color tokens, and phase palette rules, following the Quick Start guidelines and frontmatter metadata to validate the component against the design system.

Yes, you can use these frontend best practices without external dependencies, as the Skill operates independently to enforce design system rules across your React components and CSS utilities.

The best way to prevent CSS drift is to use a single source of truth that provides centralized design-system rules, enforcing typography classes, color tokens, and reusable component patterns across all development workflows.

React component validation fails during QA when implementations do not follow the frontmatter metadata and Quick Start guidelines, meaning typography classes, color tokens, or phase palette rules are applied incorrectly.