skills.rest
martingaam-hue
martingaam-hueCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design and implement production-grade frontend interfaces with HTML, CSS, JS, React, or Vue.

Updated Apr 22, 2026
Search Tags:#typography#accessibility#ui-design#aesthetics#motion#frontend-design
One-click install
npx skills add https://github.com/martingaam-hue/proavtive --skill frontend-design-martingaam-hue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/martingaam-hue/proavtive/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/martingaam-hue/proavtive --skill frontend-design-martingaam-hue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to achieve with generic AI aesthetics; this skill guides designing and implementing visually compelling UI with precise attention to typography, color, motion, and layout.

Core Features & Use Cases

  • Production-grade code: deliver functional HTML/CSS/JS or framework-based components (React, Vue) with an intentional aesthetic direction.
  • Aesthetic guidelines: typography, color systems, motion, spatial composition, and accessibility considerations to ensure cohesive UI.
  • Use Case: build a dashboard, a landing page, or a complex component library that stands out for its character and polish.

Quick Start

Provide a frontend requirement (component, page, or UI concept) and the AI will generate a distinctive, production-grade frontend implementation.

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 with distinctive aesthetics?▼

To create production-grade frontend UI with distinctive aesthetics, provide a component, page, or dashboard requirement to generate framework-specific or agnostic code featuring intentional typography, color, motion, and accessible design.

Can I generate React or Vue components with custom typography and motion guidelines?▼

Yes, you can generate React or Vue components with custom typography and motion guidelines. The output delivers functional, production-ready code with an intentional aesthetic direction tailored to your specific framework.

What is the best way to build a non-generic, accessible dashboard interface?▼

The best way to build a non-generic, accessible dashboard interface is to apply cohesive design guidelines covering spatial composition, color systems, and motion, ensuring the final UI is visually compelling and stands out.

Does this frontend design approach include accessibility considerations?▼

Yes, this frontend design approach includes accessibility considerations. It ensures cohesive UI by integrating accessible design practices alongside thoughtful typography, color systems, and spatial composition.

How do I avoid generic AI aesthetics when designing a landing page?▼

To avoid generic AI aesthetics when designing a landing page, apply a bold aesthetic direction with precise attention to typography, color, motion, and layout to achieve a professional and visually compelling result.

Related Skills

Explore More Design & Creative Skills→
wedsamuel1230wedsamuel1230
1

frontend-design

Design production-grade frontend interfaces from user requirements.

Community
Advanced
fanthusfanthus

frontend-design

Generate frontend interfaces with design guidance and HTML/CSS/JS or React code.

Community
Intermediate
sami-abdulsami-abdul
3

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

Community
Advanced
pedroapp100pedroapp100

frontend-design

Generate production-ready HTML, CSS, and React components for custom frontend designs.

Community
Advanced