Show HN: Boxy – Design System and Agent Skill for interfaces with square corners

Avestura released Boxy, an MIT-licensed zero-radius design system and agent skill that enforces square-corner interfaces through 15 lint rules and a `boxy-check` CLI that parses CSS, HTML, JSX, Vue and Svelte and exits non-zero on violations. The system ships with 13 reference docs, zero dependencies, requires Node 18+, and is installable via `/plugin marketplace add avestura/boxy-design-skill` or `npx boxy-design init`. Boxy defines seven axioms — including zero border-radius everywhere, 1px hairline separators, no shadow blur, 4px spacing scale, under 5% accent pixels, typographic hierarchy, and 80–160ms mechanical motion — so coding agents cannot drift back to rounded cards and soft shadows.

01 / A design system for agents Interfaces with square corners and nothing to hide A zero-radius design system your coding agent actually follows. Hairline structure, engineering detail, a rationed palette — and a linter that fails the build when something drifts. /plugin marketplace add avestura/boxy-design-skill /plugin install boxy@boxy-design-skill npx boxy-design init curl -fsSL https://github.avestura.dev/boxy-design-skill/install.sh | sh MIT · zero dependencies · 13 reference docs · 15 lint rules 02 / The rules Seven axioms. Violating one is a bug, not a preference. Most design guidance is advisory, so agents drift back to rounded cards and soft shadows by the third prompt. These are written as constraints, and the last cell is what enforces them. 01 Radius is zero Everywhere, without exception. Including avatars, badges and toggles. The radius token exists only so that zero is explicit and greppable. 02 Lines carry structure A 1px border is the primary separator. Reach for a border before a background change, and a background change before a shadow. 03 Never blur a shadow Depth is a hard offset or a hairline. Any blur radius above zero is forbidden, backdrop-filter included. 04 Everything snaps to 4px Spacing, sizing and leading come from one scale. No 13px, no 0.375rem, no arbitrary values slipped in under deadline. 05 Accent is rationed Under 5% of painted pixels: links, focus, one primary action. Neutrals carry everything else. 06 Hierarchy is typographic Size, weight, tracking, case and rules. Not colored headings, not gradient text, not another shade of purple. 07 Motion is mechanical 80–160ms, linear or sharp. Opacity, color and whole-pixel translation. No scale, no bounce, no spring. 08 And it is checked boxy-check reads your source and fails on every one of the rules above. The agent runs it before it says done. 03 / The difference Same content. One of them was designed by default. Before — the default - × 14px radius, pill badge, pill button - × 8px blurred drop shadow - × Violet gradient doing the work of hierarchy - × Indistinguishable from every other dashboard After — Boxy - ✓ Zero radius, square tag, square buttons - ✓ 1px hairline and corner ticks carry the structure - ✓ One flat accent; the second action is an outline - ✓ Reads as engineered rather than decorated 04 / Modes One system, three postures Identical radius, borders, spacing, type and motion. Only section rhythm, display scale, grid columns and substrate visibility change. Set data-mode and the whole page follows — try the mode control in the header. 01 / Runtime Keystroke latency p50 0.6ms p99 4.1ms Dev tools, infra, technical products. Grid substrate, corner ticks, mono annotations, dense by default. | Node | State | Load | |---|---|---| | api-01 | Active | 0.42 | | api-02 | Active | 0.38 | | api-03 | Drain | 0.91 | Enterprise apps, dashboards, admin. 16 columns, bottom-border fields, heavy tables, no substrate. Payments Revenue infrastructure Marketing, landing, docs. Big display type, 160px rhythm, generous air, still perfectly square. 05 / Enforcement The part that makes it stick Guidance an agent can ignore is decoration. boxy-check parses CSS, HTML, JSX, Vue and Svelte, flags every violation with a file and line, and exits non-zero. Zero dependencies, Node 18+. bash $ npx boxy-design check "src/ / " src/components/Card.tsx 8 error Nonzero border-radius: border-radius: 8px radius 9 error Shadow with a blur or spread radius: blur 12px shadow-blur 14 warn Spacing off the 4px scale: padding: 13px 13px space 22 warn Raw hex outside the token file: 333333 raw-hex src/styles/hero.css 31 error transition: all: transition: all transition-all 31 error Transition longer than 240ms: 0.3s 240ms duration 47 error backdrop-filter / filter blur: backdrop-filter blur FAIL 46 files - 5 errors, 2 warnings boxy-check.mjs --list-rules for the full rule set Errors — build fails - Nonzero radius, and rounded utility classes - Blur or spread on a shadow, drop-shadow, shadow-md - backdrop-filter , filter: blur , text-shadow - transition: all , durations over 240ms - Gradient clipped to text Warnings — --strict to fail - Spacing off the 4px scale - Font sizes off the type scale - Raw hex outside the token file - Font weights below 400 - ease-in-out , overshoot curves, scale 06 / Contents What lands in your project SKILL.md the seven axioms, modes, routing references/ tokens.md every token, every value modes.md blueprint / industrial / editorial layout.md rails, grids, shells, breakpoints typography.md scale, labels, numerals, measure color.md contrast pairs, semantics, charts components-core.md 16 components, exact specs components-data.md tables, tiles, charts, states components-marketing.md hero, pricing, footer, docs components-forms.md steppers, validation, auth, palette motion-depth.md durations, easing, elevation blueprint-details.md substrate, ticks, annotations accessibility.md contrast, focus, keyboard, targets anti-patterns.md what breaks it, and the fix assets/ boxy.css tokens, reset, utilities design-tokens.json W3C DTCG export scripts/ boxy-check.mjs the linter Agent targets | Target | Writes | |---|---| | Claude Code | .claude/skills/boxy/ | | Cursor | .cursor/rules/boxy.mdc | | Windsurf | .windsurf/rules/boxy.md | | Any agent | AGENTS.md | | Copilot | .github/copilot-instructions.md | bash $ npx boxy-design init --ai all --css Non-Claude targets also get the full reference set in .boxy/ , so every agent reads the same source of truth. Ready Stop asking your agent to remove the rounded corners Install once. Every UI it builds afterwards is square, ruled, accessible and checked.