frontend-design

Generate production-grade frontend interfaces with cohesive design systems.

Updated Dec 17, 2025

Search Tags:#design #ui #frontend #react #components #aesthetics

Ready to run

npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill frontend-design-lrmdom

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Lrmdom/patrimonio-pwa/tree/main/.windsurf/skills/frontend-design
Command: npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill frontend-design-lrmdom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinct frontend interfaces often suffer from generic aesthetics and inconsistent UI systems. This skill guides the creation of distinctive, production-grade frontend interfaces that deliver polished, cohesive results.

Core Features & Use Cases

Production-grade guidance and implementation for HTML/CSS/JS or modern frameworks (React, Vue, etc.).
Strong emphasis on typography, color, motion, and spatial composition to deliver memorable interfaces.
Use Case: design a marketing landing page, admin dashboard, or web application with a cohesive design system and bold aesthetic direction.

Quick Start

Describe your frontend requirements and I will generate a polished, production-ready UI implementation.

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 React UI from a vague frontend idea?▼

It transforms vague frontend ideas into distinctive, production-grade UI implementations by applying design-thinking guidance that enforces typography, CSS variable theming, motion, and accessibility considerations.

What is the best way to design a cohesive admin dashboard with a bold aesthetic direction?▼

The best way is to enforce a cohesive design system using CSS variables for theming, strong typography, motion, and spatial composition to deliver memorable, branding-aligned admin dashboards.

Does this frontend design approach work with plain HTML, CSS, and JavaScript or only modern frameworks?▼

This frontend design approach works with both plain HTML/CSS/JS and modern frameworks like React, providing production-grade guidance and implementation across your chosen stack.

How do I ensure my marketing landing page has a consistent design system and production-grade code?▼

To ensure a marketing landing page has a consistent design system and production-grade code, apply strict typography rules, CSS variable theming, motion, and accessibility considerations during implementation.

Why do my frontend interfaces suffer from generic aesthetics and inconsistent UI systems?▼

Frontend interfaces suffer from generic aesthetics and inconsistent UI systems when they lack a clear aesthetic direction, strong typography emphasis, and cohesive design-thinking guidance during implementation.