frontend-design

Translate vague frontend requirements into cohesive HTML/CSS/JS interfaces with a bold aesthetic.

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/bartolomeomueller/hr --skill frontend-design-bartolomeomueller
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/bartolomeomueller/hr/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/bartolomeomueller/hr --skill frontend-design-bartolomeomueller

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinct, production-grade frontend interfaces often require translating vague requirements into cohesive, aesthetically deliberate designs and code.

Core Features & Use Cases

  • Production-grade HTML/CSS/JS implementations, React/Vue components, and UI layouts aligned with a chosen aesthetic direction.
  • Comprehensive design guidance covering typography, color, motion, spatial composition, and accessibility to ensure cohesive user experiences.
  • Use Case: craft dashboards or marketing pages with a bold, unique visual identity while maintaining usability and performance.

Quick Start

Provide a bold frontend concept and a ready-to-ship prototype that matches the requested aesthetic direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I translate vague frontend requirements into a production-grade UI?

Frontend design guidance covers typography, color, motion, spatial composition, and accessibility to ensure cohesive user experiences. These mechanisms work together to establish a bold aesthetic direction that keeps dashboards and marketing pages visually deliberate and usable.

How do I build web components with a bold aesthetic direction?

To build web components with a bold aesthetic direction, implement production-grade HTML, CSS, and JS aligned with your chosen visual identity. Provide a clear design concept and follow best practices for typography, spacing, and motion to deliver a ready-to-ship prototype.

Can I use this frontend design approach for React and Vue components?

Yes, this frontend design approach supports building React and Vue components alongside standard HTML, CSS, and JS implementations. It provides detailed implementation guidance to ensure your component layouts match the requested aesthetic direction while remaining usable and accessible.

What is the best way to craft dashboards that maintain usability and performance?

The best way to craft usable, high-performance dashboards is to apply comprehensive design guidance covering spatial composition, color, and accessibility. This ensures a bold, unique visual identity does not compromise the underlying usability or technical performance of the interface.

When do I need comprehensive design guidance for frontend interfaces?

You need comprehensive design guidance for frontend interfaces when translating vague requirements into distinctive, production-grade designs. It is essential for establishing cohesive typography, color, and motion systems that prevent fragmented user experiences across complex applications.