skills.rest
namninhnd
namninhndCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

Updated Jan 16, 2026
Search Tags:#typography#design system#color theory#animation#ui design#visual effects#ux principles
One-click install
npx skills add https://github.com/namninhnd/PrelimStruct --skill frontend-design-namninhnd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/namninhnd/PrelimStruct/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/namninhnd/PrelimStruct --skill frontend-design-namninhnd

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you overcome design ruts and create aesthetically pleasing, user-centered interfaces by providing structured guidance on design principles, color theory, typography, and animation.

Core Features & Use Cases

  • Design Principle Guidance: Learn and apply UX laws (Hick's, Fitts'), emotional design levels, and trust-building techniques.
  • Systematic Design Decisions: Follow decision trees for color palettes, typography, and layout based on audience and context.
  • Modern Effect Application: Understand and implement effects like Glassmorphism, Neomorphism, and advanced gradients.
  • Use Case: You're designing a new dashboard and are stuck on the color scheme. This Skill guides you through selecting a palette based on the target audience and desired emotion, ensuring accessibility and brand consistency.

Quick Start

Use the frontend-design skill to generate a color palette for a new SaaS application 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 create a color palette for a SaaS dashboard targeting a specific audience?▼

Creating a color palette involves using decision trees to select colors based on target audience and desired emotion. This approach ensures the final UI maintains accessibility and brand consistency for your specific application context.

What UX psychology principles should I apply to improve my web UI design?▼

Apply UX psychology principles like Hick's Law and Fitts' Law to reduce cognitive load and optimize user interactions. Incorporating emotional design levels and trust-building techniques ensures a user-centered web interface.

How do I implement Glassmorphism and Neomorphism visual effects without hurting performance?▼

Implement modern visual effects like Glassmorphism and Neomorphism by following structured application guidelines. This ensures aesthetically pleasing interfaces while avoiding anti-patterns that could degrade web performance.

Can I use this approach to build a complete design system with typography and animation?▼

Yes, you can build a design system by leveraging structured approaches for typography and animation. This facilitates comprehensive decision-making to create user-centered, aesthetically pleasing, and performant web interfaces.

Does this design guidance include automated accessibility checking?▼

Yes, the design guidance integrates accessibility checking through dedicated scripts. It utilizes an accessibility checker module to ensure your UI decisions comply with necessary standards during the development process.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

nielsen-usability-heuristics

Audit UI designs using Nielsen's 10 usability heuristics.

Community
Intermediate
ashishgurpritashishgurprit

Design System Skill

Enforces design tokens, component patterns, and accessibility standards for UI development.

Community
Intermediate
masakinihirotamasakinihirota

design-system

Define UI implementation rules for Tailwind CSS v4, Shadcn UI, and Lucide React.

Community
Intermediate
jfrometajfrometa

frontend-design

Apply UX psychology and design references to create cohesive web UI.

Community
Advanced