frontend-design

Name: frontend-design
Availability: InStock
Author: jokken79

Design frontend interfaces with typography, color, layout, motion, and accessibility.

1|Updated Dec 15, 2025

Search Tags:#typography #design #ui #accessibility #frontend #color theory #motion

Ready to run

npx skills add https://github.com/jokken79/YuKyuDATA-app1.0v --skill frontend-design-jokken79

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jokken79/YuKyuDATA-app1.0v/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/jokken79/YuKyuDATA-app1.0v --skill frontend-design-jokken79

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces that avoid generic aesthetics.

Core Features & Use Cases

Establish a cohesive visual language across web apps, dashboards, and marketing sites.
Provide guidance on typography, color, layout, motion, and accessibility to deliver consistent, high-quality interfaces.
Enable rapid iteration through design systems and component libraries with clear design tokens and interaction guidelines.

Quick Start

Define a typography scale, color palette, and responsive grid to begin your first dashboard.

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 distinctive frontend design that avoids generic aesthetics for my web app?▼

To create a distinctive frontend design, establish a cohesive design system with a typography scale, color tokens, and a responsive grid. This enforces visual consistency across your web app, avoiding generic aesthetics through structured layout and accessible component guidance.

What is the best way to establish a cohesive visual language across dashboards and marketing sites?▼

The best way to establish a cohesive visual language is to define a shared typography scale, color palette, and responsive grid. This provides consistent guidance on typography, color, layout, motion, and accessibility across both dashboards and marketing sites.

How do I set up a responsive grid and typography scale to start building production-grade interfaces?▼

To set up a responsive grid and typography scale for production-grade interfaces, define your base color palette and typography metrics first. This establishes the foundational design tokens needed to guide layout, motion, and accessible component development across desktop and mobile contexts.

Does this frontend design approach support mobile and desktop contexts for web apps?▼

Yes, this frontend design approach explicitly supports both desktop and mobile contexts for web apps. It applies cohesive design tokens, responsive grids, and accessible components to ensure consistent interface quality across varying screen sizes.

Can I use these design tokens and component guidelines for rapid iteration?▼

Yes, you can use these design tokens and component guidelines for rapid iteration. The system enables fast prototyping by providing clear interaction guidelines, typography scales, and color tokens that maintain a cohesive visual language across your interfaces.

Why do I need accessibility guidance when building a frontend design system?▼

You need accessibility guidance when building a frontend design system to ensure your interfaces are usable across all platforms. Integrating accessibility into your color tokens, typography scale, and responsive grids guarantees production-grade quality and compliance across web apps and marketing sites.