skills.rest
YouMingYeh
YouMingYehCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Define and implement frontend interfaces with cohesive typography, color, motion, and layout.

2|Updated Jan 12, 2026
Search Tags:#typography#ui-ux#aesthetics#design-systems#frontend-design#color-themes
One-click install
npx skills add https://github.com/YouMingYeh/shadcn-ui-supabase-docker-template --skill frontend-design-youmingyeh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/YouMingYeh/shadcn-ui-supabase-docker-template/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/YouMingYeh/shadcn-ui-supabase-docker-template --skill frontend-design-youmingyeh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are often hard to achieve; this skill guides you to craft cohesive, visually striking web experiences with intentional design direction.

Core Features & Use Cases

  • Bold design thinking: Define a clear aesthetic direction and translate it into code with thoughtful typography, color, motion, and layout.
  • End-to-end frontend craft: Produce production-ready HTML/CSS/JS or React components that are visually memorable and accessible.
  • Use Case: Build dashboards, landing pages, or application UIs that stand out with a unique visual identity.

Quick Start

Produce a small, polished UI sample (e.g., a hero section) that demonstrates your chosen aesthetic direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build distinctive frontend interfaces that are production-ready?▼

Frontend design systems ensure cohesive typography, color themes, and layout across application UIs. They work by translating a bold aesthetic direction into accessible, responsive components, ensuring visually striking and memorable web experiences.

How do I create a cohesive design system for a React dashboard?▼

Creating a cohesive design system for a React dashboard involves defining intentional typography, color themes, and motion. You translate this aesthetic direction into production-ready, semantically structured components that maintain accessibility and responsiveness.

What is the best way to ensure my landing page UI is accessible and responsive?▼

The best way to ensure accessible and responsive landing page UI is to implement production-ready code with a clear design system. This requires intentional layout and semantic structure to maintain a distinctive aesthetic without compromising accessibility.

Can I use bold aesthetic direction for application UIs without losing semantic structure?▼

Yes, you can apply a bold aesthetic direction to application UIs while maintaining semantic structure. The process translates distinctive typography and color themes into production-ready components, ensuring visual identity does not compromise accessibility.

When do I need a clear design system for frontend development?▼

You need a clear design system for frontend development when building dashboards, landing pages, or application UIs that require cohesive typography, color, and motion. It ensures the final production-ready components are visually striking and accessible.

Related Skills

Explore More Design & Creative Skills→
yu13130122297yu13130122297

scout

Identify uncertainties in research framing, datasets, metrics, and baselines.

Community
Intermediate
rodrigobranasrodrigobranas
1

frontend-design

Generate production-ready HTML/CSS or React and Vue components from a design brief.

Community
Advanced
erikstmartinerikstmartin
16

tailwind-design-system

Implement a Tailwind v4 design system with semantic tokens and CVA components.

Community
Advanced
xingfengwxxxingfengwxx
2

android-screenshot-ui

Generate Jetpack Compose Kotlin code from Android UI screenshots with Material 3 and Hilt support.

Community
Intermediate