skills.rest
Lrmdom
LrmdomCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade frontend interfaces with cohesive design systems.

Updated Dec 17, 2025
Search Tags:#design#ui#frontend#react#components#aesthetics
One-click install
npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill frontend-design-lrmdom
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
sakamoto-family-smilesakamoto-family-smile

frontend-design-direction

Guide frontend teams to define design direction for production web interfaces.

Community
Advanced
EmeaAppGbbEmeaAppGbb

web-design-reviewer

Inspect websites for responsive, accessibility, and visual issues and propose code fixes.

Official
Intermediate
shishiv30shishiv30

import-comp-cms

Synchronize component data between local JavaScript files and a CMS database.

Community
Intermediate
xiaoyuge886xiaoyuge886
196

frontend-design

Generate production-ready React or Vue components with custom typography and CSS animations.

Community
Advanced