frontend-design

Name: frontend-design
Availability: InStock
Author: Ninh

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

Ready to run

npx skills add https://github.com/namninhnd/PrelimStruct --skill frontend-design-namninhnd

💬 Prompt for ChatGPT / Claude Chat▼

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.