skills.rest
recca0120
recca0120COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

11|2|Updated Feb 5, 2026
Search Tags:#typography#frontend#react#design system#ui design#ui motion
One-click install
npx skills add https://github.com/recca0120/code-quest --skill frontend-design-recca0120
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/recca0120/code-quest/tree/main/.claude/plugins/frontend-design/skills/frontend-design
Command: npx skills add https://github.com/recca0120/code-quest --skill frontend-design-recca0120

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend-design improves the quality of web UI work by turning generic layouts and “AI slop” into cohesive, distinctive, production-grade interfaces with intentional aesthetic direction.

Core Features & Use Cases

  • Bold aesthetic direction: Establishes a clear visual thesis (e.g., maximalist, brutalist, luxury, retro-futuristic) before implementation to ensure consistent decisions.
  • Production-grade implementation: Produces working frontend code with refined typography, color systems, motion, composition, and visual details.
  • Design-quality guardrails: Enforces differentiation by avoiding overused generic aesthetics, typical font/collider palettes, and cookie-cutter layouts.

Quick Start

Use this skill by asking it to design and implement a production-ready web component or page with a specific purpose, audience, and visual direction that you want it to commit to.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-ready React UI without generic AI aesthetics?▼

To generate production-ready React UI, this skill establishes a bold aesthetic direction like maximalist or brutalist before writing code, enforcing intentional typography and cohesive color systems to avoid generic layouts.

What is the best way to design a frontend component with a specific visual direction?▼

Designing a frontend component requires committing to a clear visual thesis first. This skill takes your requested purpose and audience, then implements refined typography, motion, and composition with strong visual direction.

Can I use this to convert design-to-code execution for web applications?▼

Yes, design-to-code execution is supported. This skill translates aesthetic direction into functional working UI code with refined typography, color systems, motion, composition, and visual details for your web application.

Why does my AI-generated frontend UI look generic and cookie-cutter?▼

AI-generated frontend UI looks generic due to overused default fonts and typical color palettes. This skill enforces design-quality guardrails by avoiding cookie-cutter layouts and ensuring non-default font choices.

Does this skill support UI motion and layout composition for React pages?▼

Yes, UI motion and layout composition are supported. This skill creates distinctive, production-grade frontend interfaces with strong visual direction across typography, color, motion, and layout composition for React pages.

Related Skills

Explore More Design & Creative Skills→
xbklairithxbklairith
2

frontend-design

Generate working HTML/CSS/JS or framework components with design guidelines.

Community
Advanced
JoeyJoziahJoeyJoziah

frontend-patterns

Apply maintainable UI patterns to React and Next.js interfaces.

Community
Advanced
Astrak00Astrak00

frontend-design

Build frontend interfaces with typography, color, motion, and layout in React, Vue, or vanilla HTML/CSS/JS.

Community
Advanced
MRWillisTMRWillisT
7

frontend-design

Generate responsive frontend interfaces with intentional visual design and cohesive aesthetics.

Community
Advanced