frontend-design

Analyze frontend design decisions for layout, color, typography, motion, and accessibility.

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/pckienuit/GameDev1 --skill frontend-design-pckienuit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/pckienuit/GameDev1/tree/main/.cursor/skills/frontend-design
Command: npx skills add https://github.com/pckienuit/GameDev1 --skill frontend-design-pckienuit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Frontend design work often fails because teams default to generic patterns, weak hierarchy, poor contrast, or inaccessible interactions. This Skill helps you make deliberate UI decisions instead of copying templates.

Core Features & Use Cases

  • Layout and hierarchy guidance for landing pages, dashboards, and application screens.
  • Color, typography, and motion principles that support readability, clarity, and brand fit.
  • Audit support through included scripts that check accessibility and UX quality signals.
  • Use case: Review a new interface concept, choose a visual direction, and validate whether the implementation follows basic UX and accessibility rules.

Quick Start

Use the frontend-design skill to review my interface concept and recommend layout, color, typography, motion, and accessibility decisions.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I improve UI layout and visual hierarchy for a web dashboard?

To improve UI layout and visual hierarchy for a web dashboard, analyze your interface concept to establish deliberate structure, ensuring readable spacing, clear component arrangement, and logical user focus. Apply UX psychology principles to guide deliberate UI decisions.

What is the best way to choose a color system and typography for frontend design?

The best way to choose a color system and typography for frontend design is to evaluate readability, clarity, and brand fit simultaneously. Select accessible color contrast and legible typefaces to support strong visual hierarchy and UX psychology principles.

Can I run an accessibility audit on my component system?

Yes, you can run an accessibility audit on your component system using included scripts that check accessibility and UX quality signals. These scripts validate whether your implementation follows basic UX and accessibility rules.

How does motion design affect UX psychology in web interfaces?

Motion design affects UX psychology in web interfaces by guiding user attention and clarifying state changes. Applying motion principles supports readability and clarity, ensuring interactions remain accessible and deliberate rather than distracting.

Do I need design templates to build a landing page?

You do not need design templates to build a landing page. Instead of copying generic patterns, you can analyze your interface concept and receive layout, color, typography, motion, and accessibility recommendations to make deliberate UI decisions.

Why does my frontend design fail visual accessibility checks?

Your frontend design fails visual accessibility checks due to weak contrast, poor hierarchy, or inaccessible interactions. Running script-based accessibility checking identifies these specific UX quality signal failures and guides corrective implementation.