skills.rest
thgterto
thgtertoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Apply structured guidelines for color, typography, motion, and accessibility in UI design.

Updated Jan 3, 2026
Search Tags:#typography#design#ui#accessibility#color#ux#motion
One-click install
npx skills add https://github.com/thgterto/Gerenciador-de-estoque --skill frontend-design-thgterto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/thgterto/Gerenciador-de-estoque/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/thgterto/Gerenciador-de-estoque --skill frontend-design-thgterto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

The Frontend Design Skill helps teams overcome design-decision fatigue by providing a structured, principle-based approach to UI decisions, including color, typography, motion, accessibility, and UX psychology.

Core Features & Use Cases

  • Principled color & typography decisions to ensure accessible, cohesive interfaces.
  • UX psychology guidance to optimize navigation, feedback, and cognition.
  • Audit and decision-tree workflows to guide design reviews and rapid prototyping.

Quick Start

Run a design review on your project by applying the frontend-design principles to evaluate color, typography, motion, and accessibility.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I choose a UI color palette and typography scale for a web app dashboard?▼

Apply the 60-30-10 color rule and a modular typography scale to choose UI palettes and fonts. This structured system manages cognitive load and ensures accessible, cohesive interfaces for web apps and dashboards.

What is the 60-30-10 color rule and how does it help with frontend design decisions?▼

The 60-30-10 color rule is a structured system for frontend design that allocates dominant, secondary, and accent colors. It eliminates design-decision fatigue by enforcing cohesive and accessible color palettes.

How do I audit my UI design for accessibility and contrast?▼

Audit UI design for accessibility by applying contrast and readability checks to your color choices. This structured approach evaluates typography and color decisions to ensure interfaces meet necessary accessibility considerations.

Can I use these UX psychology guidelines for rapid prototyping?▼

Yes, you can use these UX psychology guidelines for rapid prototyping. They provide audit and decision-tree workflows that optimize navigation, feedback, and cognition to guide quick and ethical design reviews.

What is the best way to manage cognitive load when designing complex web apps?▼

The best way to manage cognitive load in complex web apps is using a principle-based design system. It enforces cognitive-load management and ethical persuasive design to optimize user navigation and feedback effectively.

When should I not use a structured frontend design system?▼

Avoid a structured frontend design system when a project requires highly custom layouts that break standard modular typography scales or the 60-30-10 color rule, limiting strict accessibility or contrast constraints.

Related Skills

Explore More Design & Creative Skills→
darthlinuxerdarthlinuxer

frontend-design

Apply frontend design thinking to audit Web UI color, typography, layout, and UX psychology.

Community
Advanced
marduk191marduk191
9

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or React and Vue components.

Community
Advanced
achmfachmf

frontend-design

Apply UX psychology principles to web interface color, typography layouts, and animations.

Community
Intermediate
viralcodeviralcode
61

ui-design-system

Generate design tokens, color palettes, and typography scales from a brand color.

Community
Advanced