frontend-design-patterns

Maintain consistent UI components by applying framework-agnostic frontend design patterns and token-based styling. This approach enforces layout patterns, accessibility compliance, and responsive layout implementation across React, Vue, Svelte, and other component frameworks to reduce design-to-code gaps.

The REUSE EXTEND CREATE pattern is a decision logic framework that guides component architecture by prioritizing reuse of existing patterns first, extending them second, and creating new ones last. It helps map design patterns into actionable guidelines for building accessible UI components.

Implement accessible and responsive design tokens by enforcing token-based styling and layout patterns within your component architecture. This skill provides framework-agnostic references to ensure accessibility compliance and design-system consistency across your UI components.

Yes, you can use these design patterns to translate design-to-code by cross-referencing Storybook documentation. The skill consolidates frontend design patterns and token references to guide component architecture and ensure design-system compliance during implementation.

No, you do not need a specific framework. These frontend component patterns are framework-agnostic and apply across React, Vue, Svelte, and other component frameworks to guide token usage, accessibility compliance, and responsive layout implementation.

The best way to reduce onboarding time is to consolidate frontend design patterns and references into a single, framework-agnostic knowledge base. This reduces design-to-code gaps by enforcing token-based styling and REUSE EXTEND CREATE decision logic for component architecture.