skills.rest
cgRGM
cgRGMCOMMUNITY
Explore all skills by this author →
Website𝕏@c_g_stewartGitHub

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
One-click install
npx skills add https://github.com/cgRGM/rivercitymd --skill frontend-design-cgrgm
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ViewWayViewWay

frontend-design

Defines visual identity and generates frontend code with specified typography, color, and motion constraints.

Community
Advanced
shawn-sandyshawn-sandy

wcag-compliance-reviewer

Identify WCAG 2.1 AA accessibility violations in HTML/CSS and React/TypeScript code.

Community
Intermediate
791994545791994545
4

web-artifacts-builder

Automate React and Tailwind CSS web application setup with shadcn/ui components.

Community
Advanced
jamesacarrjamesacarr

frontend-design

Guide frontend design with intentional typography, color, motion, and spatial composition.

Community
Intermediate