Verified:GitHub

glossy-modern

none (invalid due to quoting error in provided example; corrected internally to valid JSON for processing purposes only. Actual returned value below:)

Updated May 15, 2026

Search Tags:#design-system #motion-design #glass-ui #glossy-modern #material-tokens #edge-detail

Ready to run

npx skills add https://github.com/ECFN15/design-skills-db --skill glossy-modern

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: glossy-modern
Source: https://github.com/ECFN15/design-skills-db/tree/main/publish/refero-design-skills/.agents/skills/glossy-modern
Command: npx skills add https://github.com/ECFN15/design-skills-db --skill glossy-modern

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Glossy Modern provides a framework to create polished, glassy, depth-rich design systems that remain legible and scalable across products and teams.

Core Features & Use Cases

Material system with ambient layer, glass shell, gloss layer, solid text slab, and action light.
Signature components, token-driven rules, and anti-slop guidelines to preserve hierarchy.
Use cases include premium SaaS interfaces, glassy product pages, visual tools, and interactive brand experiences.

Quick Start

Define the Glossy Modern tokens and render a GlassHeroPanel to establish the baseline design system.

Frequently Asked Questions about glossy-modern

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

FAQPage Schema

How do I build a glassy UI design system for a premium SaaS dashboard?▼

Build a glassy UI design system by applying a token-driven material stack with ambient, glass, gloss, content, and action layers. This framework enforces edge rules, blur guidelines, and motion patterns to maintain visual hierarchy across premium SaaS dashboards.

What is the best way to define surface behavior and interaction language for glassy product pages?▼

Define surface behavior and interaction language for glassy product pages using a token-driven material system. It establishes reusable component kits, gloss layer rules, and edge details to ensure polished, depth-rich visual tools remain legible.

How does a token-driven material stack work for modern design systems?▼

A token-driven material stack works by separating UI surfaces into ambient, glass, gloss, content, and action layers. This structure enforces blur guidelines and motion patterns, ensuring depth-rich modern design systems remain scalable across teams.

Can I use this glass UI framework for interactive brand experiences and launch pages?▼

Yes, you can use this glass UI framework for interactive brand experiences and launch pages. The material system applies token-driven rules and anti-slop guidelines to preserve hierarchy across visual tools and premium product interfaces.

How do I start creating a polished glassy design system using material tokens?▼

Start creating a polished glassy design system by defining the material tokens and rendering a GlassHeroPanel. This establishes the baseline design system, applying edge rules and action light components to craft the visual interaction language.

How do I prevent visual hierarchy issues when applying gloss and blur effects in a UI?▼

Prevent visual hierarchy issues when applying gloss and blur effects by following the framework's anti-slop guidelines and token-driven edge rules. These enforce strict layer separation between the glass shell, solid text slab, and action light.