skills.rest
yldgio
yldgioCOMMUNITY
Explore all skills by this author →
Website𝕏@yldgioGitHub

Frontend Design

Generate production-grade frontend interfaces with accessibility and responsive design guidelines.

8|2|Updated Jun 25, 2025
Search Tags:#design#ui#performance#accessibility#frontend#responsive#ux
One-click install
npx skills add https://github.com/yldgio/vibe-vscode --skill frontend-design-yldgio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Design
Source: https://github.com/yldgio/vibe-vscode/tree/main/.github/skills/frontend-design
Command: npx skills add https://github.com/yldgio/vibe-vscode --skill frontend-design-yldgio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and engineers often struggle to produce distinctive, production-grade frontend interfaces that align with brand and accessibility standards, leading to inconsistent user experiences and maintenance overhead.

Core Features & Use Cases

  • Production-grade frontend design guidance that emphasizes accessibility, responsiveness, and performance.
  • Component-driven patterns and modern UX/UI recommendations to ensure maintainable codebases.
  • Use Case: A team must recreate a brand-aligned dashboard with accessible widgets and responsive layouts.

Quick Start

Create a production-grade frontend UI following the guidelines in this skill.

Frequently Asked Questions about Frontend Design

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

FAQPage Schema
How do I design a responsive frontend UI that meets accessibility standards?▼

Design a responsive frontend UI by applying component-driven patterns, accessibility guidelines, and modern UX/UI recommendations to ensure accessible, maintainable codebases across web apps.

What is the best way to build a brand-aligned dashboard with accessible widgets?▼

The best way to build a brand-aligned dashboard is using component-driven architecture and production-grade frontend design guidance to ensure responsive layouts and accessible widgets.

Can I use component-driven architecture to improve frontend performance and maintainability?▼

Yes, component-driven architecture improves frontend performance and maintainability by enforcing modern UX/UI patterns and guidelines that align with brand and accessibility standards.

Why does my frontend interface struggle to maintain consistent user experiences across web apps?▼

Frontend interfaces struggle without production-grade frontend design guidance, which uses component-driven patterns and accessibility guidelines to prevent inconsistent user experiences and maintenance overhead.

Do I need specific frameworks to achieve production-grade frontend design?▼

No specific frameworks are required, as the guidance covers modern UX/UI patterns, responsive design, and accessibility standards applicable to building maintainable web apps.

Related Skills

Explore More Design & Creative Skills→
dembrandtdembrandt
33

brand-visual-language

Define cohesive border-radius, typography, and iconography systems for brand consistency.

Official
Intermediate
augustoheissaugustoheiss

agency-ui-designer

Create tokenized UI design systems with WCAG AA accessibility and developer handoff packages.

Community
Advanced
alanharrryy-wqalanharrryy-wq
2

web-design-guidelines

Audit UI files against Web Interface Guidelines and report file:line findings.

Community
Intermediate
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced