frontend-design

Creates production-grade frontend interfaces with cohesive UX across React and HTML/CSS.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to design and implement consistently across projects; this skill guides you to produce polished UI with a strong aesthetic vision.

Core Features & Use Cases

  • Design thinking and an explicit aesthetic direction for frontend projects.
  • Reusable components and pages that are accessible, performant, and visually cohesive.
  • Use Case: Build a branded dashboard with typography, color systems, motion, and layout variety.

Quick Start

Describe your frontend project and desired aesthetic so I can generate a complete component or page.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a cohesive UI design system with consistent typography and color palettes for a React frontend?

Establish a cohesive UI design system by defining an explicit aesthetic direction that enforces typography, color systems, and motion across your React components. This approach ensures accessible, performant interfaces with a strong visual identity.

What is the best way to build accessible and performant web components with a strong visual identity?

The best way to build accessible web components is to enforce design direction, accessibility, and performance considerations directly during frontend implementation. This produces reusable, production-grade interfaces that maintain a distinctive aesthetic without sacrificing usability.

How do I design a branded dashboard with layout variety and cohesive motion design?

Design a branded dashboard by applying a predefined visual identity to your layout components, ensuring cohesive typography, color systems, and motion design. This creates a polished, production-grade dashboard interface with strong aesthetic vision and layout variety.

Can I use this approach to generate frontend UI across different modern frameworks like HTML and CSS?

Yes, you can generate frontend UI across React, HTML/CSS, and other modern frameworks. The process applies consistent design thinking and aesthetic direction to build web components and pages regardless of your specific frontend technology stack.

Does frontend design need specific component libraries or dependencies to establish a visual identity?

No specific component libraries or dependencies are required to establish a visual identity. The design process focuses on aesthetic direction, typography, and color systems to produce production-grade interfaces without relying on external component packages.

Why does my frontend UI lack visual cohesion and a strong aesthetic direction across pages?

Your frontend UI lacks visual cohesion because it is missing an explicit aesthetic direction and a unified design system. Enforcing consistent typography, color palettes, and motion across components establishes a strong visual identity and resolves disjointed UX.