skills.rest
capaas2
capaas2COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/capaas2/Site-teste --skill frontend-design-capaas2
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
h4vzzh4vzz
33

content-strategy

Generate a B2B content strategy with editorial calendars and measurement frameworks.

Community
Advanced
shaprisshapris

frontend-design

Translate user requirements into production-ready HTML/CSS/JS or React/Vue frontend interfaces.

Community
Advanced
cxnaivecxnaive

adversarial-ux-test

Simulate hostile user behavior to identify and triage UX friction points.

Community
Advanced
nextlevelbuildernextlevelbuilder
114.9k

ckm:ui-styling

Build responsive UI with shadcn/ui components and Tailwind CSS styling.

Official
Advanced