skills.rest
alexgutscher26
alexgutscher26COMMUNITY
Explore all skills by this author →
𝕏@snackforcodeGitHub

frontend-design

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

4|Updated Feb 8, 2026
Search Tags:#typography#design system#color theory#animation#ui design#ux principles
One-click install
npx skills add https://github.com/alexgutscher26/ClawTrace --skill frontend-design-alexgutscher26
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/alexgutscher26/ClawTrace/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/alexgutscher26/ClawTrace --skill frontend-design-alexgutscher26

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires accessibility_checker.py, ux_audit.py, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill guides you through the process of designing user interfaces, ensuring aesthetic appeal, usability, and psychological resonance, moving beyond generic AI defaults.

Core Features & Use Cases

  • Design Principles: Learn and apply UX psychology, color theory, typography, and animation best practices.
  • Decision Support: Provides structured thinking frameworks and checklists to avoid common design anti-patterns.
  • Use Case: When tasked with designing a new dashboard for a financial app, use this Skill to understand the target audience (Gen X/B2B), select an appropriate color palette (trustworthy blues, not purple), choose readable typography, and ensure clear calls-to-action based on Fitts' Law.

Quick Start

Use the frontend-design skill to generate a color palette for a new SaaS dashboard targeting a professional audience.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design user interfaces that avoid common AI design clichés and generic defaults?▼

Design user interfaces that avoid AI clichés by applying structured thinking frameworks and checklists. This approach promotes original, context-aware solutions by grounding decisions in UX psychology, color theory, and typography rather than relying on generic automated outputs.

What UX psychology principles should I apply when creating a dashboard for a professional audience?▼

Apply UX psychology principles like Fitts' Law to ensure clear calls-to-action for professional dashboards. This framework facilitates audience-specific decision-making, ensuring interfaces are psychologically resonant and user-friendly for targeted demographics like B2B or Gen X.

Can I use this to generate a color palette and select typography for a SaaS application?▼

You can generate color palettes and select typography for SaaS applications using comprehensive frontend design guidance. It supports choosing trustworthy colors and readable fonts tailored to specific audiences, ensuring aesthetic appeal and usability.

Does this frontend design guidance include accessibility checking and UX auditing capabilities?▼

This frontend design guidance integrates accessibility checking and UX auditing capabilities through its dependencies. These components work together to evaluate interfaces against usability principles, ensuring designs meet accessibility standards and avoid common anti-patterns.

What's the best way to incorporate animation and visual effects without compromising UI usability?▼

Incorporate animation and visual effects without compromising usability by following established animation best practices. This approach provides decision support to balance aesthetic appeal with user-friendly interactions, ensuring visual enhancements do not hinder the overall experience.

Related Skills

Explore More Design & Creative Skills→
mukai-workmukai-work

sns-post-ja

Generate Japanese social media posts for X, note, Threads, and Instagram.

Community
Intermediate
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
slgoodrichslgoodrich
121

usability-frameworks

Plan and evaluate usability testing for user interfaces using Nielsen's heuristics.

Community
Basic
xingfengwxxxingfengwxx
2

android-screenshot-ui

Generate Jetpack Compose Kotlin code from Android UI screenshots with Material 3 and Hilt support.

Community
Intermediate