frontend-design

Production-ready frontend design requires paired typography, defined color tokens, and intentional spacing. This Skill enforces typography pairing, CSS color systems, motion guidelines, and accessibility standards to create cohesive interfaces that avoid generic aesthetics while maintaining responsive behavior and dark-mode support across web components and applications.

Accessibility in frontend design means enforcing sufficient contrast ratios, responsive layouts, and performance optimization. Motion implementation follows micro-interaction guidelines paired with spacing strategies. This Skill combines both into a unified approach that maintains usability across devices while ensuring visual hierarchy through intentional movement and spatial composition.

Yes. This Skill suppresses AI-like and generic design patterns by enforcing distinctive production-grade aesthetics grounded in typography pairing, deliberate color systems, and intentional whitespace. It applies to landing pages, portfolios, and applications where strong visual identity and human-centered design decisions are required.

Responsive frontend design requires CSS color systems with token-based theming for seamless dark-mode switching. This Skill enforces spatial composition, typography scaling, and motion guidelines that adapt across breakpoints. Define your color palette as reusable tokens, then apply responsive type scales and layout rules that maintain visual consistency in both modes.

Frontend accessibility requires contrast compliance, semantic HTML, keyboard navigation, and performance. This Skill enforces contrast ratios, responsive design principles, and speed optimization as core constraints. Combined with typography and color system guidelines, these standards ensure components remain usable across assistive technologies and devices.

Design tokens—typography pairs, color systems, and spacing scales—are foundational for cohesive frontend interfaces. This Skill uses CSS-based color systems and typography guidelines to eliminate ad-hoc styling. Tokens ensure consistency across pages and applications while making dark-mode support, accessibility compliance, and responsive behavior straightforward to implement.