skills.rest
freestylefly
freestyleflyCOMMUNITY
Explore all skills by this author →
Website𝕏@cangheGitHub

frontend-design

Design and implement polished frontend interfaces with HTML/CSS/JS and React/Vue.

869|203|Updated May 7, 2026
Search Tags:#typography#design#ui#accessibility#frontend#react#css
One-click install
npx skills add https://github.com/freestylefly/wesight --skill frontend-design-freestylefly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/freestylefly/wesight/tree/main/SKILLs/frontend-design
Command: npx skills add https://github.com/freestylefly/wesight --skill frontend-design-freestylefly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to deliver distinctive, production-grade interfaces that balance aesthetics with accessibility and performance.

Core Features & Use Cases

  • Design direction & systemization: Establish a bold visual language and cohesive UI system for web apps.
  • Implementation guidance: Produce production-ready HTML/CSS/JS, with React/Vue components, accessible typography, and responsive layouts.
  • Use Case: Build a complete landing page or dashboard with polished UI, from concept to reusable components.

Quick Start

Create a new frontend UI module following the design direction and deliver polished, accessible components.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-ready frontend interfaces with cohesive aesthetics?▼

Production-ready frontend interfaces require cohesive design systems, accessible typography, and responsive layouts. This involves establishing a bold visual language and implementing reusable React or Vue components with polished HTML, CSS, and JavaScript.

What's the best way to design a complete dashboard with accessible UI components?▼

Designing an accessible dashboard involves establishing a cohesive UI system with accessible typography and color systems. You then implement responsive layouts using production-grade HTML, CSS, and React or Vue components.

Can I use this approach to generate React and Vue components from a design system?▼

Yes, generating React and Vue components is fully supported. You can implement production-grade code and reusable UI components directly from your established design direction, ensuring a seamless design-to-code handoff.

How do I ensure my web app's typography and color systems meet accessibility standards?▼

Ensuring typography and color systems meet accessibility standards requires applying accessible design principles during the UI systemization process. This guarantees that your frontend interfaces maintain both distinctive aesthetics and compliance.

Does this frontend design approach work for both landing pages and complex UI systems?▼

Yes, this approach works for both landing pages and complex UI systems. It handles the design and implementation of components, pages, and dashboards across web apps, ensuring responsive layouts and cohesive aesthetics throughout.

Related Skills

Explore More Design & Creative Skills→
MasterleeausMasterleeaus

aiox-ux-design-expert

Organize UX research, interface design, and design system creation workflows.

Community
Advanced
mgomesmgomes
3

frontend-design

Generate React, Vue, or vanilla frontend components with enforced design guidelines and accessibility standards.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced