DEV Community: Aref

Most glassmorphism is blur + a white overlay. I extracted the actual refraction into a Claude Code skill

Aref — Sat, 15 Aug 2026 12:18:21 +0000

Every glassmorphism snippet I've seen is backdrop-filter: blur() plus a white overlay. That's a blurred rectangle. Real glass bends what's behind it, hardest at the edge — and that part is missing everywhere.

Built it for a production Angular app, pulled it out as a Claude Code plugin: https://github.com/stormaref/LiquidGlassSkill

/plugin marketplace add stormaref/LiquidGlassSkill
/plugin install liquid-glass@stormaref-skills

The refraction: bake a displacement map into a canvas, wire up feImage → feDisplacementMap → feGaussianBlur, point the element at it with backdrop-filter: url(#filter). Since it's a backdrop filter, the input is the live page behind the element — so it tracks scroll, theme and content changes with nothing to invalidate. Field ported from liquid-glass-js (MIT, credited), minus its html2canvas snapshot.

Why it's a skill and not a gist — four rules, each of which fails as plausible-looking output:

Glass needs a backdrop. Over a flat page it reads as a gray box, which sends you reaching for more blur — the exact move that kills it.
The tint is colorless. Hue in the tint fights the hue coming through; the surface goes muddy.
Children of a glass panel paint no surface. An opaque fill covers the refracted backdrop, which is the whole effect.
You can't feature-query it. Safari parses backdrop-filter: url(#…) and paints nothing, so @supports says yes and your panel is blank. Gate on engine.

The CSS is 200 lines. Knowing that #1 is why your glass looks nths of things looking subtly wrong.

MIT. Happy to talk displacement math — the 128/255 ≠ 0.5 decly long to find.

Cursor made me do it

Aref — Thu, 04 Jun 2026 10:43:12 +0000

For a long time, I kept telling myself I'd get to it "when I had a free week."

Three of my open-source packages had been sitting on my backlog for ages:

• KafkaStorm — a simple .NET client for Kafka built on Confluent.Kafka
• RedisStorm — a lightweight wrapper around StackExchange.Redis for easier pub/sub
• SchemeGenerator — a C# library that generates default values for a given type and serializes them to JSON

Each one was built for a real need. But the maintenance work kept piling up: upgrading to the latest .NET version, updating dependencies, refactoring outdated APIs, writing tests, and building a proper release pipeline.

That free week never came.

Today, with Cursor, I got it all done.

All three packages are now upgraded to .NET 10, dependencies are up to date, legacy APIs are refactored, tests are in place, and CI/CD plus NuGet release pipelines are rebuilt and running smoothly. Work that would have taken weeks of scattered evenings was done in a single focused day.

My takeaway on AI editors — especially Cursor — is this: they don't replace engineering judgment. But when they understand your project context, they dramatically speed up the tedious parts. Migrations, refactors, GitHub Actions workflows, documentation, test coverage — that's where they really shine.

If you maintain open-source projects and your upgrade backlog has been growing for months, it might be worth giving an AI editor a serious try.

Repos:
https://github.com/stormaref/KafkaStorm
https://github.com/stormaref/RedisStorm
https://github.com/stormaref/SchemeGenerator

P.S. — I used Cursor to write this post too.

Introducing Sub-Agent-MCP: Portable AI Sub-Agents for Any MCP Client

Aref — Tue, 02 Jun 2026 15:30:24 +0000

One feature I really liked in Claude Code is the concept of sub-agents—specialized agents that can handle specific tasks such as code review, debugging, testing, or research.

The downside is that these workflows are often tied to a specific tool.

To address this, I built Sub-Agent-MCP, an open-source MCP server that makes sub-agents portable across MCP-compatible clients.

With Sub-Agent-MCP, you can:

Define agents in simple Markdown files
Reuse the same agents across different tools
Manage agent execution and sessions
Build a shared library of specialized agents

The project currently supports integrations with Claude Code, Codex, Cursor, Gemini, and can also expose sub-agent workflows to platforms like Open WebUI through MCP.

The goal is simple: define an agent once and use it anywhere in the MCP ecosystem.

GitHub Repository:
https://github.com/stormaref/Sub-Agent-MCP

I'd appreciate feedback, feature requests, and contributions from the community.