skills.rest
vuminhieu
vuminhieuCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design production-grade frontend interfaces with cohesive typography, color, motion, and design tokens.

Updated Feb 2, 2026
Search Tags:#typography#React#UI/UX#CSS#aesthetics#motion#frontend-design
One-click install
npx skills add https://github.com/vuminhieu/spexor-client --skill frontend-design-vuminhieu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/vuminhieu/spexor-client/tree/main/.agent/skills/skills/frontend-design
Command: npx skills add https://github.com/vuminhieu/spexor-client --skill frontend-design-vuminhieu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps design and implement distinctive, production-grade frontend interfaces that avoid generic AI aesthetics, delivering polished code and visuals.

Core Features & Use Cases

  • Bold aesthetic direction: Establish a cohesive, distinctive visual language across typography, color, motion, and spacing.
  • Component & page generation: Create React components, pages, dashboards, posters, or complete interfaces with production-ready code.
  • Implementation guidance: Provide CSS variables, responsive layouts, accessibility considerations, and design tokens to ensure consistency.

Quick Start

Design a bold, production-ready React dashboard for a SaaS analytics app with a unique editorial aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-grade React components with cohesive typography and color tokens?▼

You can generate production-grade React components by applying cohesive typography, color theory, and design tokens, outputting ready-to-use code and styles that ensure visual consistency across your application.

What's the best way to build a bold UI design for a SaaS dashboard without generic AI aesthetics?▼

To build a bold UI design for a SaaS dashboard, you establish a distinctive visual language across typography, motion, and spacing, avoiding generic AI aesthetics to deliver polished, production-ready interfaces.

Can I use this approach for plain HTML and CSS interfaces, or does it only work with React?▼

This approach works across multiple frameworks including React, Vue, and plain HTML/CSS, allowing you to build components, pages, and complete applications with a bold, cohesive aesthetic.

How do CSS variables and design tokens ensure consistency in frontend design?▼

CSS variables and design tokens ensure consistency by providing implementation guidance that standardizes typography, color, and spacing rules across all generated components and pages.

Does generating frontend interfaces this way include accessibility and responsive layout considerations?▼

Yes, generating frontend interfaces includes accessibility considerations and responsive layouts as part of the core requirements, ensuring the production-ready code meets modern web standards.

Related Skills

Explore More Design & Creative Skills→
coelhotvcoelhotv
2

ui-design-brain

Generate user interfaces with design patterns and micro-interactions across React, Vue, and HTML/CSS.

Community
Advanced
dylantarredylantarre
38

framer

Export design tokens as CSS variables for Framer prototypes.

Community
Advanced
dev-giosdev-gios
1

qa-visual

Capture screenshots and analyze rendered elements for design system compliance.

Community
Advanced
krzemienskikrzemienski
2

frontend-design

Design distinctive frontend interfaces and components with reusable UI patterns.

Community
Advanced