frontend-design

Create production-grade frontend interfaces with cohesive typography, color, and motion.

1|Updated Oct 10, 2025

Search Tags:#frontend #visual design #ui design #react components #landing pages #web interfaces

Ready to run

npx skills add https://github.com/cgRGM/rivercitymd --skill frontend-design-cgrgm

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/cgRGM/rivercitymd/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/cgRGM/rivercitymd --skill frontend-design-cgrgm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps turn vague frontend requests into distinctive, polished interfaces that feel intentionally designed instead of generic or template-based.

Core Features & Use Cases

Visual Direction: Chooses a strong aesthetic stance for a page, component, dashboard, or landing experience.
Production-Grade UI Code: Produces working frontend implementations that are refined, cohesive, and ready to ship.
Use Case: A team building a marketing site, product dashboard, or interactive component can use this Skill to get an interface with memorable typography, color, motion, layout, and micro-interactions.

Quick Start

Ask the frontend-design skill to create a bold, production-grade interface for your product with a clear aesthetic direction and working 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 React components that look distinctive instead of generic?▼

To build distinctive React components, you need a cohesive aesthetic stance that applies intentional typography, color systems, and motion. This approach avoids generic UI patterns by ensuring spatial composition and accessible code are refined for production.

What is the best way to design a landing page with a strong visual direction?▼

Designing a landing page with strong visual direction requires choosing a specific aesthetic point of view and applying it cohesively. This involves integrating memorable typography, color, motion, layout, and micro-interactions into a polished, functional implementation.

Can I use this approach to create production-grade web interfaces for dashboards?▼

Yes, you can create production-grade web interfaces for dashboards. This approach outputs working frontend implementations that are refined, cohesive, and ready to ship, ensuring your dashboard avoids template-based, generic patterns.

How do I avoid generic UI patterns when creating HTML and CSS layouts?▼

To avoid generic UI patterns in HTML and CSS layouts, apply a strong aesthetic point of view that integrates cohesive typography, color systems, and motion. This ensures the final web interface feels intentionally designed rather than template-based.

Does this visual design method require working React components to function?▼

No, it does not require existing React components to function. It produces working frontend implementations from scratch, applying cohesive typography, color, and motion to deliver accessible, functional code for web interfaces, landing pages, or dashboards.