Mern Styleguide

Purpose

Enforce design quality and brand differentiation. Complements security, NFR, and coding standards skills.

For brand identity (colors, fonts, design direction, anti-patterns), see /shared-brand.

MERN-specific anti-patterns

• Default shadcn examples shipped unchanged
• Template SaaS layouts with no variation

Requirements

Responsive

• Mobile, tablet, desktop, large desktop
• Layouts adapt intentionally, not merely shrink
• Navigation patterns may change by breakpoint

Accessibility

• WCAG 2.1 AA minimum
• Keyboard navigation with visible focus states
• Respect prefers-reduced-motion

Browser support

• Chrome, Safari (including iOS), Firefox, Edge (latest)
• Mobile Safari mandatory; no Chromium-only behavior

Reference

For semantic tokens, breakpoints, and detailed patterns, see reference/mern-styleguide-reference.md

Converted and distributed by TomeVault — claim your Tome and manage your conversions.