skills.rest
lehuuhau1231
lehuuhau1231COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide web UI design with principles, templates, and checklists.

Updated Aug 5, 2025
Search Tags:#typography#accessibility#design principles#web design#color theory#animation#UI design#dark mode
One-click install
npx skills add https://github.com/lehuuhau1231/TechJobs --skill frontend-design-lehuuhau1231
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/lehuuhau1231/TechJobs/tree/main/tech-job-client/.agent/skills/frontend-design
Command: npx skills add https://github.com/lehuuhau1231/TechJobs --skill frontend-design-lehuuhau1231

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive guidance on web UI design principles, helping you create aesthetically pleasing and user-friendly interfaces.

Core Features & Use Cases

  • Design Thinking Principles: Learn and apply core principles like UX psychology, color theory, typography, and visual effects.
  • Layout Systems: Understand grid systems, spacing, and alignment to create structured and visually appealing layouts.
  • Color Theory: Explore color schemes, color psychology, and accessibility guidelines for effective color use.
  • Typography: Learn about typography scale, pairing, and readability principles.
  • Visual Effects: Understand how to apply visual effects like glassmorphism, shadows, gradients, and animations for emphasis and engagement.
  • Animation Principles: Learn the principles of animation timing, easing, micro-interactions, and performance considerations.
  • Anti-Patterns: Identify and avoid common design anti-patterns for a professional and effective outcome.
  • Decision Trees: Use decision trees to guide your design process and make informed decisions based on context and user needs.
  • Dark Mode Principles: Learn best practices for creating effective dark mode interfaces.
  • Accessibility Guidelines: Ensure your designs are accessible to all users, following WCAG standards.
  • Templates: Utilize context-based templates for different design scenarios like e-commerce, SaaS dashboards, landing pages, and portfolios.
  • Checklists: Use pre-design checklists for complexity estimation and to ensure all aspects of the design are considered.

Quick Start

Use the frontend-design skill to review the UI design of your project 'project-ui.md' for color consistency and accessibility compliance.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
What are the core web UI design principles for creating user-friendly interfaces?▼

Core web UI design principles include UX psychology, structured grid layouts, color theory, typography scale, and visual effects. Applying these principles ensures interfaces are aesthetically pleasing, accessible, and engaging for users.

How do I design an effective dark mode interface for web applications?▼

To design an effective dark mode interface, follow dark mode principles that address color contrast, reduce eye strain, and maintain readability. Adhering to WCAG accessibility guidelines ensures the dark theme remains usable for all users.

How do I ensure my web typography is readable and accessible?▼

Ensure web typography is readable by applying typography scale, proper font pairing, and readability principles. Following WCAG accessibility guidelines during the design process guarantees text remains legible across different contexts.

What are common web design anti-patterns I should avoid?▼

Common web design anti-patterns include poor color contrast, inconsistent spacing, and cluttered layouts. Identifying and avoiding these anti-patterns using provided decision trees ensures a professional and effective user interface outcome.

Can I use these design guidelines for SaaS dashboards and e-commerce sites?▼

Yes, you can use these design guidelines for SaaS dashboards and e-commerce sites. The skill provides context-based templates and pre-design checklists tailored for various scenarios, including landing pages and portfolios.

Do I need prior design knowledge to apply these UI design principles?▼

You need a foundational understanding of design principles and a willingness to learn best practices. The provided templates and checklists help guide your process, but applying UX psychology and color theory requires existing baseline knowledge.

Related Skills

Explore More Design & Creative Skills→
hidemaro-nsketchhidemaro-nsketch

context-loader

Load project context from the .claude directory for OpenCLI.

Community
Intermediate
dylantarredylantarre
38

dark-mode

Implement dark mode with semantic color tokens, CSS variables, and system preference detection.

Community
Advanced
marnecmarnec
1

responsive-design

Apply container queries, fluid typography, and grid/flex layouts for responsive UI.

Community
Intermediate
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic