skills.rest
DaytimeBlues
DaytimeBluesCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide frontend design decisions with UX psychology, color, typography, and layout frameworks.

Updated Jan 31, 2026
Search Tags:#typography#design system#color theory#ui design#ux principles#user psychology
One-click install
npx skills add https://github.com/DaytimeBlues/ADHD-CADDI --skill frontend-design-daytimeblues
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/DaytimeBlues/ADHD-CADDI/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/DaytimeBlues/ADHD-CADDI --skill frontend-design-daytimeblues

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of creating visually appealing, user-friendly, and psychologically resonant digital interfaces by providing a structured approach to design thinking and decision-making.

Core Features & Use Cases

  • Design Principles: Learn and apply core UX psychology laws, layout, color, and typography principles.
  • Decision Frameworks: Utilize decision trees and checklists to guide design choices based on context, audience, and brand.
  • Anti-Pattern Avoidance: Identify and steer clear of common design clichés and AI-generated "safe harbor" defaults.
  • Use Case: When tasked with designing a new feature's UI, use this Skill to ensure the design is not only aesthetically pleasing but also strategically sound, considering user behavior and brand identity.

Quick Start

Use the frontend-design skill to determine the appropriate color palette for a new mobile app targeting Gen Z users.

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 create user-centric interfaces?▼

Avoid UI design anti-patterns by identifying common clichés and AI-generated "safe harbor" defaults, using structured checklists to ensure your interface maintains strategic soundness and brand identity.

What is the best way to determine a color palette for a specific target audience?▼

Apply typography principles in frontend design by utilizing decision trees that guide font selection and hierarchy based on layout constraints, user psychology, and overall visual effects to maximize readability.

Can I use this approach to design UI for both web and mobile apps?▼

A user-centric interface requires balancing UX psychology laws, strategic color theory, appropriate typography, and layout structures while actively avoiding common design clichés and generic AI-generated defaults.

When should I avoid using default AI-generated UI design templates?▼

Prevent common design clichés by applying structured anti-pattern avoidance strategies, running your layout and visual effects through decision checklists to validate aesthetic and functional soundness.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
gelsonsimoesgelsonsimoes

frontend-design

Apply design-thinking principles to frontend UI components with color, typography, and accessibility patterns.

Community
Advanced
manutejmanutej
61

ux-principles

Codify UX principles for designing and evaluating user-centered interfaces.

Community
Advanced
lucasfdigitallucasfdigital

frontend-design

Guide frontend design decisions with UX psychology, color theory, and typography.

Community
Intermediate