skills.rest
Sir-chawakorn
Sir-chawakornCOMMUNITY
Explore all skills by this author →
GitHub

design-mastery

Implement Glassmorphism and Neumorphism design patterns for modern UI.

33|5|Updated Jan 14, 2026
Search Tags:#design patterns#ux design#ui design#glassmorphism#micro-interactions#neumorphism#premium ui
One-click install
npx skills add https://github.com/Sir-chawakorn/power-ranger-toolkit --skill design-mastery-sir-chawakorn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-mastery
Source: https://github.com/Sir-chawakorn/power-ranger-toolkit/tree/main/src/skills/design-mastery
Command: npx skills add https://github.com/Sir-chawakorn/power-ranger-toolkit --skill design-mastery-sir-chawakorn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you overcome the challenge of creating visually stunning and highly engaging user interfaces by providing access to advanced design patterns and principles.

Core Features & Use Cases

  • Premium Aesthetics: Implement sophisticated design trends like Glassmorphism and Neumorphism.
  • Design Systems: Utilize pre-defined spacing, typography, and color systems for consistency.
  • Micro-interactions: Enhance user experience with subtle animations and feedback.
  • Use Case: Design a modern, premium-looking dashboard with a glassmorphic card layout and smooth hover effects for interactive elements.

Quick Start

Apply the glass-card CSS class to create a card with a frosted glass effect.

Frequently Asked Questions about design-mastery

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

FAQPage Schema
What are glassmorphism and neumorphism in UI design?▼

Glassmorphism and neumorphism are premium UI design patterns. Glassmorphism creates frosted glass effects using classes like glass-card, while neumorphism mimics extruded soft plastic for modern, visually engaging interfaces.

How do I design a premium dashboard with a glassmorphic card layout?▼

To design a premium dashboard, apply advanced UI patterns by utilizing the glass-card CSS class for frosted glass effects. Combine this with pre-defined spacing and color systems for visual consistency.

How do micro-interactions enhance user experience?▼

Micro-interactions enhance UX by providing subtle animations and feedback, such as smooth hover effects on interactive elements. They make user interfaces feel highly responsive and visually engaging.

What spacing and color systems should I use for consistent UI design?▼

For consistent UI design, utilize pre-defined spacing, typography, and color systems. These design systems ensure visual hierarchy and structural consistency across modern interfaces like dashboards.

Do I need existing CSS framework knowledge to use these design patterns?▼

Applying these design patterns requires intermediate implementation knowledge. You should understand basic CSS classes to effectively apply pre-defined typography, color systems, and layout patterns.

When should I use neumorphism over glassmorphism for my interface?▼

Choose neumorphism for soft, extruded plastic aesthetics or glassmorphism for frosted glass card layouts. Both premium UI patterns enhance visual hierarchy, but glassmorphism better suits layered dashboards.

Related Skills

Explore More Design & Creative Skills→
zakad00e2zakad00e2

design-taste-premium-bento

Generate premium modular UI/UX layouts with React or Next.js and Tailwind CSS.

Community
Advanced
hjung3113hjung3113

animate

Add purposeful animations and micro-interactions to user interfaces.

Community
Intermediate
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
riftzen-bitriftzen-bit

gemini-design-brain

Apply Material Design 3 tokens and CSS/Tailwind-ready styles to web and mobile interfaces.

Community
Intermediate