frontend-design-patterns

Map frontend design patterns into actionable UI component guidelines.

6|3|Updated Feb 11, 2026

Search Tags:#accessibility #layout #storybook #responsive #design-system #design-tokens #component-patterns

Ready to run

npx skills add https://github.com/vinhnxv/rune-plugin --skill frontend-design-patterns-vinhnxv

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design-patterns
Source: https://github.com/vinhnxv/rune-plugin/tree/main/plugins/rune/skills/frontend-design-patterns
Command: npx skills add https://github.com/vinhnxv/rune-plugin --skill frontend-design-patterns-vinhnxv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Skill consolidates frontend design patterns and references into a single, framework-agnostic knowledge base to reduce design-to-code gaps and onboarding time.

Core Features & Use Cases

Framework-agnostic frontend design patterns and token references.
Accessibility, responsive patterns, and design-system compliance guidance.
REUSE > EXTEND > CREATE decision logic to guide component architecture and cross-reference Storybook documentation.

Quick Start

Provide a practical frontend component plan using the patterns and references in this skill for your current UI task.

Frequently Asked Questions about frontend-design-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I maintain consistent UI components across different frontend frameworks?▼

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.

What is the REUSE EXTEND CREATE pattern for component architecture?▼

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.

How do I implement accessible and responsive design tokens in a component library?▼

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.

Can I use these design patterns to translate design-to-code in Storybook?▼

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.

Do I need a specific framework to apply these frontend component patterns?▼

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.

What is the best way to reduce onboarding time for a new design system?▼

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.