skills.rest
ntuan2502
ntuan2502COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max-skill

Implement premium UI patterns with Tailwind CSS and Framer Motion.

Updated Feb 6, 2026
Search Tags:#design#ui#frontend#animations#glassmorphism#ux#micro-interactions
One-click install
npx skills add https://github.com/ntuan2502/piggy --skill ui-ux-pro-max-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max-skill
Source: https://github.com/ntuan2502/piggy/tree/main/.agent/skills/ui-ux-pro-max-skill
Command: npx skills add https://github.com/ntuan2502/piggy --skill ui-ux-pro-max-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the challenge of creating visually stunning, highly interactive, and user-friendly interfaces that delight users and drive engagement.

Core Features & Use Cases

  • Premium Design Implementation: Applies advanced design principles like Glassmorphism 2.0 and Golden Ratio spacing.
  • Dynamic Micro-Interactions: Integrates subtle animations for every user action to enhance perceived quality.
  • Modern UI Patterns: Leverages Bento Grids, Marquee Overlays, and Shiny Buttons for engaging layouts.
  • Use Case: Transform a standard SaaS dashboard into a cutting-edge interface with smooth transitions and a polished aesthetic, improving user experience and perceived value.

Quick Start

Apply the ui-ux-pro-max-skill to design a new landing page with glassmorphism and micro-interactions.

Frequently Asked Questions about ui-ux-pro-max-skill

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

FAQPage Schema
How do I implement glassmorphism and micro-interactions in a Tailwind CSS interface?▼

You can implement glassmorphism and micro-interactions in Tailwind CSS by applying Glassmorphism 2.0 standards and integrating Framer Motion best practices for smooth transitions and dynamic user feedback.

What are the best practices for adding Framer Motion animations to a SaaS dashboard?▼

Best practices for adding Framer Motion animations to a SaaS dashboard involve integrating subtle micro-interactions for every user action, adhering to Golden Ratio spacing, and leveraging modern UI patterns like Bento Grids.

Can I use modern UI patterns like Bento Grids and Marquee Overlays for landing pages?▼

Yes, you can apply modern UI patterns like Bento Grids and Marquee Overlays for landing pages. These patterns, combined with Shiny Buttons, create engaging layouts that transform standard interfaces into ultra-premium experiences.

Does this approach require Framer Motion and Tailwind CSS to build high-conversion mobile applications?▼

Yes, building high-conversion mobile applications with this approach requires Tailwind CSS for styling and Framer Motion for animations to enable premium design principles and smooth transitions.

Why does my frontend interface lack high-conversion user engagement despite using standard UI components?▼

Your frontend interface may lack high-conversion user engagement because it misses dynamic micro-interactions and modern UI patterns. Applying Golden Ratio spacing and Glassmorphism 2.0 elevates perceived quality and drives user engagement.

Related Skills

Explore More Design & Creative Skills→
PP-NamiasPP-Namias
2

frontend-design

Build React UI components with Tailwind CSS and Framer Motion.

Community
Intermediate
damacusdamacus
2

performance

Audit web pages with Lighthouse and optimize Core Web Vitals.

Community
Advanced
ionmidoriionmidori

designing-modern-ui

Design web interfaces with Bento Grids, Glassmorphism, and Tailwind CSS.

Community
Intermediate
project-axproject-ax
5

admin-dashboard-ui

Define a dark glassmorphism design system for admin dashboard UIs.

Official
Intermediate