frontend-design

Guide frontend design decisions for web interfaces using UX psychology and accessibility principles.

Updated Apr 4, 2026

Search Tags:#typography #frontend design #motion design #ui audit #ux psychology #color systems

Ready to run

npx skills add https://github.com/capaas2/Site-teste --skill frontend-design-capaas2

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/capaas2/Site-teste/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/capaas2/Site-teste --skill frontend-design-capaas2

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you make informed frontend design decisions instead of relying on defaults, so interfaces feel purposeful, readable, and trustworthy.

Core Features & Use Cases

UX psychology guidance: Apply Hick's Law, Fitts' Law, Miller's Law, and other behavioral principles to improve clarity and reduce friction.
Visual system decisions: Choose colors, typography, spacing, layout, motion, and effects based on audience, context, and design goals.
Design auditing mindset: Spot common anti-patterns like generic layouts, inaccessible contrast, and overused visual clichés.
Use Case: When designing a SaaS dashboard, it helps you decide whether to use a compact data-first layout, a muted professional palette, and subtle motion rather than a trendy but distracting style.

Quick Start

Use the frontend-design skill to help me design a clean, high-contrast dashboard for a B2B product with a calm, professional feel.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I apply UX psychology principles to improve frontend design clarity?▼

Apply UX psychology principles like Hick's Law, Fitts' Law, and Miller's Law to frontend design to improve interface clarity, reduce cognitive friction, and guide user behavior through purposeful layout and visual hierarchy decisions.

What's the best way to choose colors and typography for a B2B SaaS dashboard?▼

Choose colors and typography for a B2B SaaS dashboard by evaluating audience context and design goals, opting for muted professional palettes and readable type systems instead of generic defaults to establish a calm, trustworthy interface.

How do I audit a web interface for visual hierarchy and accessibility anti-patterns?▼

Audit web interfaces for visual hierarchy and accessibility by spotting common anti-patterns like generic layouts, inaccessible color contrast, and overused visual clichés, ensuring context-aware styling principles improve overall usability.

Can I use motion design to improve usability without distracting users in a product interface?▼

Yes, you can use motion design to improve usability by applying subtle, context-aware transitions that guide user attention and reinforce visual hierarchy, avoiding trendy but distracting animations that disrupt the product interface experience.

When should I avoid using default styling for web component systems?▼

Avoid using default styling for web component systems when interfaces need to feel purposeful and readable, relying instead on informed decisions for spacing, color, and typography based on specific audience context and design goals.