skills.rest
Icebane84
Icebane84COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate context-aware web UI design decisions using UX psychology and visual rules.

Updated Mar 24, 2026
Search Tags:#typography#aesthetic#animation#ui design#color system#ux psychology#layout hierarchy
One-click install
npx skills add https://github.com/Icebane84/Synarche_Workshop --skill frontend-design-icebane84
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Icebane84/Synarche_Workshop/tree/main/.agent/skills/design/frontend-design
Command: npx skills add https://github.com/Icebane84/Synarche_Workshop --skill frontend-design-icebane84

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you design modern web interfaces that feel premium and usable by guiding color, typography, layout, and UX psychology decisions with context-aware questions.

Core Features & Use Cases

  • UX psychology-driven decisions: Applies Hick’s, Fitts’s, Miller’s, and related principles to make CTAs, hierarchy, and information density work.
  • Visual system guidance: Uses structured rules for layout proportions (Golden Ratio, spacing), color distribution (60-30-10), and typography scale/readability.
  • Aesthetic & motion guardrails: Provides “wow factor” checklists and anti-pattern warnings so effects, glass/gradients, and animation add purpose instead of cliché.
  • Audit-ready runtime script: Runs a UX psychology & accessibility-oriented frontend audit via scripts.

Quick Start

Use frontend-design to decide a web UI style for your component: respond to its questions about palette, overall style, and layout, then follow its UX psychology and design-system rules to produce your layout and visual choices.

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 web UI design decisions?▼

To design premium web UI, apply UX psychology principles like Hick’s Law and Miller’s Law to guide CTA placement, visual hierarchy, and information density. This ensures interfaces feel premium while maintaining strict usability and constraint validation across layout, color, and typography decisions.

What is the best way to structure a color system and typography scale for a landing page?▼

Structure a web UI color system using the 60-30-10 distribution rule and apply a structured typography scale for readability. Pair these with layout proportions like the Golden Ratio to build landing pages and dashboards that achieve a balanced, premium aesthetic while avoiding common anti-patterns.

How do I add animation and visual effects to a UI without using clichés?▼

Add animation and visual effects without clichés by applying aesthetic guardrails and anti-pattern warnings to web UI design. This ensures motion, glassmorphism, and gradients serve functional purposes rather than decorative noise, maintaining a premium interface feel while validating design constraints.

Can I run a UX psychology and accessibility audit on my frontend components?▼

Yes, you can run a UX psychology and accessibility-oriented frontend audit on web UI components. This process executes provided audit scripts to evaluate designs against established UX rules, delivering compliance feedback and identifying potential visual anti-patterns for component and interface design tasks.

Does this web UI design approach work for building dashboards and design systems?▼

Yes, this web UI design approach works for building dashboards and design systems. It generates context-aware design thinking for component and interface design tasks, applying structured rules for spacing, color, and typography to scale visual decisions across complex applications while respecting user preferences.

Related Skills

Explore More Design & Creative Skills→
AesopScottAesopScott
1

design-experience-plus-plus

Generate website and product surface designs using MAPS M8 Experience Design.

Community
Advanced
darthlinuxerdarthlinuxer

frontend-design

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

Community
Advanced
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
timothyfroehlichtimothyfroehlich

pinpoint-ui

Create accessible shadcn/ui interfaces with Tailwind CSS v4 patterns.

Community
Basic