skills.rest
mauroviveros
mauroviverosCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Translate frontend requirements into ready-to-run UI code across React, Vue, or HTML/CSS.

Updated Jan 19, 2026
Search Tags:#design#accessibility#frontend#css#aesthetics#ui-components
One-click install
npx skills add https://github.com/mauroviveros/eventdex --skill frontend-design-mauroviveros
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mauroviveros/eventdex/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/mauroviveros/eventdex --skill frontend-design-mauroviveros

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to achieve without a clear aesthetic direction and reusable implementation patterns. This skill provides a structured approach to design and implement polished frontends that stand out from generic AI-generated visuals.

Core Features & Use Cases

  • Design Thinking guidance to establish purpose, tone, constraints, and differentiation for a frontend project.
  • Implementation guidance to produce working HTML/CSS/JS or framework components (React, Vue) aligned with a chosen aesthetic.
  • Comprehensive frontend aesthetics guidelines covering typography, color systems, motion, spatial composition, textures, and accessibility considerations.
  • Use Case: create a dashboard or landing page with a distinctive visual language and production-grade code.

Quick Start

Describe your frontend requirements and preferred aesthetic direction, and I will generate a production-ready UI package.

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 frontend UI code with a distinctive aesthetic?▼

Build distinctive frontend interfaces by applying structured design thinking to establish purpose and tone, then translating requirements into ready-to-run UI code with comprehensive typography, color systems, and accessibility guidelines.

Can I use this approach to create React or Vue components for a dashboard?▼

Yes, you can build React or Vue dashboard components. The process translates requirements into working framework components aligned with a chosen aesthetic, applying comprehensive guidelines for motion, spatial composition, and accessibility.

What is the best way to establish a visual language for a landing page?▼

The best way to establish a visual language for a landing page is applying design thinking to define purpose, tone, and constraints, then implementing comprehensive frontend aesthetics covering typography, color systems, textures, and spatial composition.

Does this frontend design method enforce accessibility considerations?▼

Yes, this frontend design method enforces accessibility considerations. It integrates explicit design rules ensuring production-grade UI components meet accessibility standards alongside aesthetics, typography, color systems, and motion guidelines.

How do I avoid generic AI-generated visuals when building web interfaces?▼

Avoid generic AI-generated visuals by enforcing design thinking steps and comprehensive frontend aesthetics guidelines, translating requirements into distinctive, production-grade interfaces with unique spatial composition, textures, and motion.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

frontend-design

Define and craft distinctive frontend interfaces across HTML/CSS, React, or Next.js.

Community
Advanced
muhammadwaheedairimuhammadwaheedairi

frontend-design

Design production-ready frontend interfaces with HTML, CSS, and JavaScript.

Community
Intermediate
tchiphuongtchiphuong

heroui-v3

Create HeroUI v3 UI components with React 19 and Tailwind CSS v4.

Community
Intermediate
J03Fr0stJ03Fr0st

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, JS, React, or Vue.

Community
Advanced