skills.rest
AnthonyCongHieu
AnthonyCongHieuCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide web UI design decisions with design-thinking principles.

Updated Aug 22, 2025
Search Tags:#typography#ui#accessibility#ux#design-thinking#color-system
One-click install
npx skills add https://github.com/AnthonyCongHieu/voice_tool --skill frontend-design-anthonyconghieu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/AnthonyCongHieu/voice_tool/tree/main/voice_tools_v1/.agent/skills/frontend-design
Command: npx skills add https://github.com/AnthonyCongHieu/voice_tool --skill frontend-design-anthonyconghieu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Design teams often struggle to make consistent, thoughtful web UI decisions, leading to inconsistent UX and slower delivery.

Core Features & Use Cases

  • A principle-driven framework guiding decisions on components, layout, color systems, typography, and UX psychology.
  • Provides audit-ready principles, design-system guidance, and educational material to align teams.
  • Use cases include designing new components, evaluating UI decisions, and training designers in design-thinking.

Quick Start

Provide a concise design-thinking plan for a new web UI project, detailing component decisions, color-system rationale, and typography alignment.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I apply design-thinking principles to web UI components?▼

Apply design-thinking to web UI components by leveraging a principle-driven framework that guides layout strategies, color systems, and typography choices to ensure consistent, thoughtful outcomes.

What is the best way to evaluate UX decisions during a UI audit?▼

Evaluate UX decisions during a UI audit using audit-ready principles that assess UX rationale, typography alignment, and color-system consistency across your web interfaces.

How do I build a consistent color system and typography scale for a design system?▼

Build a consistent color system and typography scale by following design-system guidance that enforces principle-based approaches and cross-reference guides to align teams and streamline delivery.

Can I use this framework to train designers in UX psychology and accessibility?▼

Yes, you can use this framework to train designers in UX psychology and accessibility because it provides educational material and design-thinking principles specifically intended to align teams.

Does this design-thinking approach work for both new component design and existing UI evaluation?▼

Yes, this design-thinking approach works for both designing new components and evaluating existing UI decisions, enforcing consistent outcomes through frontmatter metadata and cross-reference guides.

Related Skills

Explore More Design & Creative Skills→
gauravb4875-uxgauravb4875-ux

design-thinker

Apply design thinking frameworks to validate ideas and prioritize project directions.

Community
Intermediate
robertlupo1997robertlupo1997

frontend-design

Design frontend systems with HTML/CSS/JS or framework code.

Community
Advanced
iankikuiankiku
18

design

Review UI/UX designs against anti-slop standards for color, typography, layout, and components.

Community
Intermediate
gil-kapelgil-kapel
2

ui-design-system

Generates design tokens and documentation for scalable UI systems.

Community
Intermediate