skill CX Codex

glassmorphism · ainergiz — Claude Code skill: what it does, how to install

Q: How to install glassmorphism in Claude Code?

Run `npx skills add ainergiz/design-inspirations --skill glassmorphism -a claude-code`. The file will be placed in `~/.claude/skills/glassmorphism/SKILL.md`.

Generates frosted glass interface elements using blur, opacity, and delicate borders. Helpful when building floating action buttons, popovers, and navigation bars.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add ainergiz/design-inspirations --skill glassmorphism -a claude-code

Open on GitHub

What glassmorphism does

The skill equips coding agents with Tailwind CSS combinations for translucent UI pieces. It breaks down presets from subtle to pronounced glass, relying on backdrop-blur utilities, semi-transparent fills, and light borders like border-white/10. As a result, the model applies consistent styles for floating triggers, carousel dots, and header strips.

Guidelines also outline text readability over varied backdrop opacities so letters do not wash out. Heavy use of backdrop filters drops frame rates on budget phones, so spreading frosted layers across broad viewports will degrade rendering.

What it helps with

generate Tailwind utility classes for frosted glass layers
style floating action buttons and tooltips with backdrop blur
pick readable typography colors for semi-transparent backdrops
prevent rendering lag caused by heavy backdrop filters

Example prompts for the agent

Build a floating header using frosted glass styling over the hero banner
Add a glassmorphic circular action button in the bottom corner
Create a semi-transparent tooltip container with blurred backdrop

How to install glassmorphism

1Skills CLI (Vercel)

npx skills add ainergiz/design-inspirations --skill glassmorphism -a claude-code

2Manually: put the files in place

~/.claude/skills/glassmorphism/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/glassmorphism/

1Skills CLI (Vercel)

npx skills add ainergiz/design-inspirations --skill glassmorphism -a codex

2Manually: put the files in place

.agents/skills/glassmorphism/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add ainergiz/design-inspirations --skill glassmorphism -a cursor

2Manually: put the files in place

.cursor/skills/glassmorphism/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install ainergiz/design-inspirations glassmorphism

2Manually: put the files in place

.github/skills/glassmorphism/SKILL.md

1Skills CLI (Vercel)

npx skills add ainergiz/design-inspirations --skill glassmorphism -a gemini-cli

2Platform CLI

gemini skills install https://github.com/ainergiz/design-inspirations --path .claude/skills/glassmorphism

Manually: put the files in place

.devin/skills/glassmorphism/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add ainergiz/design-inspirations --skill glassmorphism -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about glassmorphism

How to install glassmorphism in Claude Code?

Run npx skills add ainergiz/design-inspirations --skill glassmorphism -a claude-code. The file will be placed in ~/.claude/skills/glassmorphism/SKILL.md.

What UI elements work best with glassmorphism?

It fits compact floating pieces such as carousel indicators, popovers, navigation headers, and floating action controls.

Does backdrop blur hurt device performance?

Yes, CSS backdrop filters require extra rendering effort on low-end hardware. The skill advises against full-screen blur areas and suggests using smaller blur radius values for dynamic elements.

Similar skills

Everything for Frontend and UI →

glassmorphism by other authors comes first.

glassmorphism typeui.sh Guides the agent in creating glassmorphism design system rules with translucent layers, blur, and high contrast. Fits teams building bento cards compliant with WCAG 2.2 AA. CX Codex +1 2,900installs glassmorphism iart-ai A skill that teaches your coding agent to build frosted glass panels: blurred backdrops, lit edges, layered shadows and SVG refraction. CX Codex +1 2,400installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs