skills.rest
yandy-r
yandy-rCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Coordinate frontend design direction for production-ready interfaces.

1|Updated Mar 4, 2026
Search Tags:#typography#ui-design#design-system#motion#frontend-design#color-system#visual-direction
One-click install
npx skills add https://github.com/yandy-r/claude-plugins --skill frontend-design-yandy-r
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yandy-r/claude-plugins/tree/main/.cursor-plugin/skills/frontend-design
Command: npx skills add https://github.com/yandy-r/claude-plugins --skill frontend-design-yandy-r

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design guidance that prevents generic, forgettable UI by establishing a clear visual direction for product pages, dashboards, and app shells.

Core Features & Use Cases

  • Frame the interface with a defined purpose, audience, emotional tone, and one central visual direction.
  • Build a cohesive visual system covering typography, color, spacing, layout, and motion rules that harmonize across components.
  • Compose with intention to create purposeful, accessible, responsive designs that feel deliberate rather than generic.

Quick Start

Define a single visual direction for your frontend project and implement a cohesive design system that governs typography, color, spacing, and motion.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I establish a cohesive visual direction for a frontend design system?▼

A frontend design system prevents generic UI by coordinating a structured workflow from framing the interface's purpose and emotional tone to building a cohesive system of typography, color, spacing, and motion rules that harmonize across product components.

Can I use this workflow to design responsive dashboards and app shells?▼

Yes, this workflow applies to dashboards and app shells, ensuring that your visual system preserves accessibility and responsive behavior while composing purposeful interfaces with intentional spacing and layout.

What is the best way to coordinate typography and color systems for UI?▼

The best way to coordinate typography and color systems is to frame your interface's audience and emotional tone first, then build a unified visual system that harmonizes these elements across all components to create production-ready designs.

Do I need specific dependencies to implement motion and spacing rules?▼

No specific dependencies are required to implement motion and spacing rules; the workflow outlines a structured approach to executing consistent frontend design directions that preserve accessibility across responsive interfaces without external component libraries.

How to prevent generic UI when building a frontend interface?▼

Prevent generic UI by framing your interface with a defined purpose, audience, and emotional tone, then executing designs with a single central visual direction that makes typography, color, and motion feel deliberate rather than arbitrary.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
SpaceZephyrSpaceZephyr
333

frontend-design

Create responsive frontend interfaces from rough UI requirements using HTML, CSS, and JavaScript.

Community
Advanced
JochenYangJochenYang
21

frontend-design

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

Community
Advanced
first-flukefirst-fluke
218

frontend-agent

Automate React, Next.js, and TypeScript frontend UI development tasks.

Official
Intermediate