skills.rest
evalops
evalopsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create production-grade frontend interfaces with typography, color, motion, and accessibility guidelines.

1|1|Updated Apr 15, 2026
Search Tags:#design#ui#frontend#react#css#component#aesthetics
One-click install
npx skills add https://github.com/evalops/maestro --skill frontend-design-evalops
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/evalops/maestro/tree/main/skills/frontend-design
Command: npx skills add https://github.com/evalops/maestro --skill frontend-design-evalops

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design teams often struggle to produce distinctive, production-grade interfaces that feel cohesive and polished under tight deadlines.

Core Features & Use Cases

  • Production-grade UI systems: craft cohesive interfaces with careful typography, color systems, motion, and accessibility.
  • Creative direction with practical deliverables: translate bold aesthetic concepts into reusable components, layouts, and patterns.
  • Use Case: Imagine delivering a landing page with a unique visual language, polished components, and accessible interactions that stand out from boilerplate designs.

Quick Start

Design and deliver a polished frontend component or HTML/CSS layout that embodies a distinctive bold aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a production-grade frontend UI with React that doesn't look like a boilerplate template?▼

To build a production-grade frontend UI, you need cohesive typography, structured color systems, motion, and accessibility guidelines. This streamlines the creation of distinctive, polished React components and pages that stand out from standard boilerplate designs.

Can I use this to design a full dashboard layout in plain HTML and CSS?▼

Yes, you can design a full dashboard layout in plain HTML and CSS. It applies production-grade design principles across React, Vue, or plain HTML/CSS to enforce polished components, strong typography, and accessible interactions.

What is the best way to translate bold aesthetic concepts into reusable frontend components?▼

The best way to translate bold aesthetic concepts into reusable frontend components is to apply creative direction alongside practical deliverables. This enforces a cohesive visual language, translating aesthetics into structured layouts and polished component patterns.

Does this frontend design approach enforce accessibility and motion guidelines?▼

Yes, this frontend design approach enforces accessibility and motion guidelines. It crafts cohesive interfaces by applying careful typography, color systems, and motion patterns to ensure accessible interactions across all generated components and pages.

How do I create a distinctive landing page with a unique visual language under tight deadlines?▼

To create a distinctive landing page with a unique visual language under tight deadlines, leverage streamlined creative direction and practical deliverables. This translates bold aesthetic concepts into reusable, polished components and accessible interactions rapidly.

Related Skills

Explore More Design & Creative Skills→
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
Selfdb-ioSelfdb-io

frontend-design

Generate production-grade frontend interfaces with CSS variables and design tokens.

Community
Basic
HollowvynHollowvyn

presentational-container-pattern

Separate data fetching and state from React view rendering.

Official
Basic
X-McKayX-McKay
3

frontend

Provides UI/UX design and component guidelines for Kubani web interfaces using Next.js and Tailwind CSS.

Community
Basic