jcm-developer

Windsurf Rule — Design agent for Claude Code

Design community

Liquid Glass design system rules for refractive, accessible glass UI components with low frost, specular rims and CSS springs.

How to install Windsurf Rule

Installs to ~/.claude/agents/jcm-developer-liquid-glass-components-windsurf-rule.md

Terminal

mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/jcm-developer/liquid-glass-components/HEAD/agents/windsurf-rule.md -o ~/.claude/agents/jcm-developer-liquid-glass-components-windsurf-rule.md

Restart Claude Code, or start a new session, for it to be picked up.

What Windsurf Rule does

trigger: model-decision description: Liquid Glass design system rules for refractive, accessible glass UI components with low frost, specular rims and CSS springs.

Liquid Glass design rules (v2.1.0)

When to apply

Apply when creating navigation bars, tab bars, toolbars, sidebars, docks, modals, popovers, toasts, floating buttons, switches, sliders or any chrome/control element with a glass look.

Core rules

Glass belongs ONLY to the navigation/chrome layer, never content
N

Alternatives in Design

Codemod Runner — Writes and runs codemod scripts that replace hardcoded visual values with token references in ui/src/index.css 79.4k ★
Frontend Developer — Frontend developer for React, Next.js, responsive layouts, and accessible UI components 2.8k ★
Tailwind Agent — Styles Rails ERB views and ViewComponents using Tailwind CSS 4 utility classes and responsive design patterns 652 ★