skills.rest
devtint
devtintCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

clarity-ui

Generate glassmorphic, minimalist website UIs in HTML/CSS/JS or React/Vue/Svelte.

Updated Feb 14, 2026
Search Tags:#typography#accessibility#frontend#responsive#glassmorphism#ui-design#web-ui
One-click install
npx skills add https://github.com/devtint/AgentSkills --skill clarity-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clarity-ui
Source: https://github.com/devtint/AgentSkills/tree/main/clarity-ui
Command: npx skills add https://github.com/devtint/AgentSkills --skill clarity-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Clean, modern UI design is hard to achieve consistently. This skill provides a glassy, minimalist design language and production-ready UI patterns to help you build clean, airy interfaces.

Core Features & Use Cases

  • Output production-grade HTML/CSS/JS (or React/Vue/Svelte) that looks intentionally designed, never generic.
  • Embrace glassmorphism, generous whitespace, and a light color palette to create professional dashboards, landing pages, and admin panels.
  • Use the skill for pages, dashboards, components, and entire websites that require a modern, refined look.

Quick Start

Provide a UI brief (page, dashboard, or component) and preferred stack; the skill will generate production-grade HTML/CSS/JS in the glassy, minimalist style.

Frequently Asked Questions about clarity-ui

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

FAQPage Schema
How do I build a glassmorphic dashboard with clean HTML and CSS?▼

To build a glassmorphic dashboard, you need frosted glass cards, a consistent grid, generous whitespace, and design-token-driven styling. This skill generates production-grade HTML/CSS/JS with these minimalist UI patterns built-in.

Can I generate responsive web UIs for React, Vue, or Svelte?▼

Yes, you can generate responsive web UIs for React, Vue, or Svelte. You provide a UI brief and your preferred stack, and the skill outputs clean, production-grade code with a consistent grid and frosted glass styling.

What is the best way to create a minimalist admin panel without generic templates?▼

The best way to create a minimalist admin panel without generic templates is using a design-token-driven approach with a light color palette and airy whitespace. This ensures the output looks intentionally designed and refined.

Does glassmorphism UI design work for accessible frontend development?▼

Glassmorphism UI design can work for accessible frontend development when paired with a consistent grid and design-token-driven styling. This skill applies a light color palette and modern layout patterns to maintain accessibility.

Why does my modern landing page design look inconsistent and generic?▼

Modern landing page designs look inconsistent and generic without a unified design language. Applying a glassy, minimalist style with frosted glass cards and design tokens ensures a professional, intentionally designed interface.

When should I not use a glassmorphic minimalist style for web interfaces?▼

You should not use a glassmorphic minimalist style for web interfaces requiring dense data displays or dark color schemes, as this design language prioritizes airy whitespace, light color palettes, and frosted glass effects.

Related Skills

Explore More Design & Creative Skills→
yutaoshaoyutaoshao

frontend-design

Transform UI briefs into token-driven design systems with CSS variables and TypeScript types.

Community
Advanced
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
telagodtelagod
238

glassmorphism

Standardize frosted-glass UI components with CSS tokens for blur, transparency, borders, and shadows.

Community
Intermediate
edisonabeledisonabel

ckm:ui-styling

Create accessible responsive interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced