skills.rest
AndrewChang-cpu
AndrewChang-cpuCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-ready frontend interfaces with typography, color, motion, and layout guidelines.

Updated Mar 22, 2026
Search Tags:#typography#design#ui#accessibility#frontend#aesthetics#motion
One-click install
npx skills add https://github.com/AndrewChang-cpu/vibe-coding-configuration --skill frontend-design-andrewchang-cpu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/AndrewChang-cpu/vibe-coding-configuration/tree/main/general-plugin/skills/frontend-design
Command: npx skills add https://github.com/AndrewChang-cpu/vibe-coding-configuration --skill frontend-design-andrewchang-cpu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when you need to build web components, pages, dashboards, or any web UI, and generate polished code and design that avoids generic AI aesthetics.

Core Features & Use Cases

  • Establish bold, cohesive visual direction (typography, color, motion, layout) before coding.
  • Produce production-ready frontend implementations (HTML/CSS/JS, React, Vue, or vanilla JS) that adhere to the chosen aesthetic.
  • Use cases include websites, landing pages, dashboards, component libraries, posters, or UI prototypes that require refined design.

Quick Start

Describe your frontend brief and aesthetic direction to start generating production-ready UI code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade frontend UI that avoids generic AI aesthetics?▼

To create production-grade frontend UI that avoids generic AI aesthetics, apply a design-thinking workflow to establish bold visual direction, including typography, color, motion, and layout, before generating polished code.

Can I use this approach to build web components in React or Vue?▼

Yes, you can build web components in React or Vue. This approach produces production-ready implementations across HTML/CSS, vanilla JS, React, and Vue for websites, dashboards, and component libraries.

What's the best way to establish a cohesive visual direction before coding a dashboard?▼

The best way to establish a cohesive visual direction before coding a dashboard is to define the purpose, tone, constraints, and differentiation first, ensuring typography, color, and motion guidelines align with the aesthetic.

Does this frontend design workflow include accessibility guidelines?▼

Yes, this frontend design workflow includes accessibility guidelines. It delivers production-ready UI code integrated with typography, color, motion, layout, and accessibility standards to ensure refined, usable web artifacts.

What do I need to start generating production-ready UI code for a landing page?▼

To start generating production-ready UI code for a landing page, you need to describe your frontend brief and aesthetic direction, which initiates the design-thinking workflow and outputs polished frontend implementations.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
yaomindong1996yaomindong1996
103

frontend-design

Generates frontend interfaces with intentional aesthetic direction and refined typography for Vue, React, or HTML/CSS/JS projects.

Community
Intermediate
Tahasaif3Tahasaif3

figma-backend-integration-design

Analyze backend API routes and data contracts to generate frontend UI mappings and validation rules.

Community
Intermediate
redenv-labsredenv-labs
4

frontend-design

Generate custom frontend interfaces for web components, pages, and applications.

Official
Advanced