squircle-ui

A Claude Code skill.

Harmonizing digital life with the real world.

Install the skill View on GitHub

Demo 01

See the difference.

Toggle the corners. Watch which one your eyes settle on.

Auto Scale

One rule. Every size.

32 px

48 px

64 px

96 px

128 px

180 px

You never set cornerRadius. The skill scales it from the element. 22.5% of the side, the iOS ratio.

Demo 02

Same component. Different feel.

Tailwind rounded-[32px]

Neon Drift

Synthwave Collective

squircle, cornerRadius 32

Neon Drift

Synthwave Collective

One feels like software. The other feels like an object.

Borders

Borders work too.

border on clipped squircle (broken)

Naive border

CSS border + clip-path. Corners jagged.

nested squircle (clean)

Clean border

Nested Squircle pattern. Corners are perfect.

Same width. Same color. Different math.

CSS border on a clipped squircle breaks at the corners (the clip cuts the border line). The skill uses the nested-squircle pattern: outer squircle as border color, padding equals border width, inner squircle slightly smaller radius. Drop-shadow on the wrapper, not box-shadow on the clipped child.

Why this exists

Almost every corner in software is a circular arc, the CSS border-radius, which jumps abruptly from a straight edge into the curve. In the physical world, the objects we handle every day (a stone polished by a river, a worn bar of soap, an iPhone) have curves that blend continuously. No corners, no abrupt seams, just smooth transitions.

Apple has known this since 2013, when the iOS app icon mask was replaced with a superellipse. Ever since, most "premium feeling" interfaces are quietly using squircles without you noticing. The math is called G2 continuity, and your eyes register it as "smooth" versus "generic" even when your brain doesn't have words for why.

This skill turns that into the default for anyone building UI with Claude Code. It wraps @squircle-js/react with opinionated defaults: cornerSmoothing 0.6, a radius scale per element type, and patterns for buttons, cards, avatars, app icons, and more.

"I believe squircles could harmonize digital life with the real world a little more."

Get started

Install

npx skills add themattvision/squircle-ui-skill -a claude-code -g

One liner. Works with Claude Code. Powered by @squircle-js/react.

Or clone manually


          mkdir -p ~/.claude/skills

          cd ~/.claude/skills

          git clone https://github.com/themattvision/squircle-ui-skill.git squircle-ui