defuss-shadcn · v0.9.8
No compilation. Stateful components. Fully themable. AI Agent-native.
The system in numbers232 components
Opening: the system presents itself - every tick along the bottom edge is one of its components.
Every dot is one building block - atoms, molecules, blocks, organisms and templates (the template components plus the template pages: the decks, the website templates and the app scaffolds). Behind them: the design tokens and the live examples in the docs.
The feature areas, in sidebar order, each with its sidebar icon: Primitives, Actions, Forms & Inputs, WYSIWYG Editors, Questionnaire, Data Display, Big Data, Charts, Diagrams, Feedback & Status, Overlays, Navigation, Application, Chat, Mockup, Presentations, Papers, Website.
Bundles · minified + gzip
allJS
all.min.js
149KiB gzip
every component's script + the core
allCSS
all.min.css
129KiB gzip
every component's stylesheet
sharedJS
core.min.js
25KiB gzip
df$ - query, morph, state, stores
sharedCSS
core.min.css
10KiB gzip
tokens + sizing, layout, a11y
sectionsCSS + JS
sections/*.min.*
19bundles
one per sidebar section - its members alone, after the shared code
Each file minified, then gzipped on its own - as a CDN serves it. Two requests carry the whole system; the core plus the components you pick is the modular path.
The bundles, minified and gzipped file by file - the way a CDN serves them: all.min.js and all.min.css carry everything; the core pair is what a pick-what-you-need page pays once.
CSS-only vs JavaScript
As little JavaScript as possible - as much as necessary.
The ratio: three of four components are plain HTML and CSS - JavaScript only where HTML and CSS end (keyboard patterns, focus, state).
Use cases · Application Scaffolds
Each app is built on its own: the core plus only the components its markup uses (dist/apps/) - an e2e test proves it renders exactly as on the full bundle. Click one to open it full screen.
Real-world applications never load every component: each scaffold is bundled on its own and measured - a fraction of the whole system, and the e2e proof shows it renders exactly as on the full bundle.
Available as a skill so any agent harnesses can adapt best practices.
Rapid Agentic Development: the whole system ships as an agent skill, so any harness picks up the conventions - and the templates show what that builds: app scaffolds, presentation decks, website templates and the template components they run on.
Verified Agentic Engineering (VAE)
The loop - one session, and what it leaves for the next
The proof: defuss-shadcn scaled from 20 to 232 components with this method - and still passes every gate.
Designed by Aron Homberg (kyr0), general purpose: it adapts to any agentic engineering project. Skill: github.com/kyr0/defuss-vae · the report: Verified Agentic Engineering in Practice
The VAE loop, as the technical report draws it (Figure 1): a session starts from the rules and the agent's own memory, plans, implements fully agentically, passes the gate - verify, review, docs; failures come back as fix lines - then finalizes. A lesson learned twice becomes a test, a verifier rule or an AGENTS.md rule, and the memory in .agents/ opens the next session. A person reviews before the release.
Verified Agentic Engineering (VAE)
This repository's proof loop - as the Architecture page draws it
Trapped in the loop until the work is actually good: a failing gate's output is the work order, a green gate plus a screenshot per state is the evidence.
The same diagram, with the why: Verified Agentic Engineering (VAE) in the guide.
Inside the gate, for this repository: AGENTS.md states the conventions and defers to the verifier; the agent edits and runs the whole pipeline; lint and types, the 1:1 compile, a screenshot per state and mode, the verifier's consistency gates with their fix lines, and the unit and end-to-end tests gate it. If a gate fails, its output is the work order back to the agent. If all pass, the screenshots are the visual evidence a reviewer judges - then the work is provably done.
The verifier, timed
bun scripts/verify.ts - 10.2 s on a MacBook Air · Apple M4 (24 GB, macOS 15.7.3, Bun 1.4.2), run by Claude Code · Opus 5.5 (high effort) on 2026-10-05. Recorded by scripts/time-verify.ts - and this slide is checked against the record.
How long the verifier alone takes, measured: one verify run, recorded with the machine and the agent that drove it - the slide's figures are gated against that record.
Setup: hand SKILL.md to your agent (vibe coding), add one <link> and one <script>, npm install - or vendor the component folders into your repo, the classic shadcn/ui way.
Skills · 1 of 4 · the reference
Your agent builds with the whole component system in mind - 232 components, learning from the best practices shown in 1,604 live examples: expert guidance built in, AI slop left out.
df$.npx skills add kyr0/defuss-shadcn --skill '*'
The reference skill: the whole system as one Agent Skill - install paths, the rules, the documentation map and every component skill beside it, so an agent writes the documented markup instead of inventing classes. It installs into any harness that reads Agent Skills; the three task skills come with it.
Skills · 2 of 4 · plan
It plans the way an expert does - reusable units first, existing components before new ones - so a page, a frontend or a new component stays consistent instead of sprawling.
bun run verify./defuss-shadcn:shadcn-plan an issue tracker with a board, a list and a detail sheet
shadcn-plan, human-triggered: before splitting a design one level down, it finds the reusable units across the whole plan and composes the larger parts from them; an existing component or one of its variants beats a new one. Each unit gets its type, tokens, states, API, boundaries and docs, and every invariant names the check that proves it.
Skills · 3 of 4 · theme
A theme from a brief - text, colours, a design guide or a picture - every token in light and dark, checked for readability before anyone sees it.
:root and .dark, the same radius in both - one identity, two palettes.theme-check.mjs: unknown or missing tokens, the radius, WCAG contrast per text pair - with the nearest lightness that passes./defuss-shadcn:shadcn-theme a calm Nordic theme: slate blues, a teal brand, soft corners
shadcn-theme: from a brief, colours, a design guide or an image (where the harness reads images), it writes a theme - every token in light and dark, the radius identical in both - and runs its bundled checker: unknown or missing tokens, the radius, WCAG contrast per pair, each failing pair with the nearest lightness that passes.
Skills · 4 of 4 · review
The checker first, then judgment against the same guides the components were built with - and what it confirms, it fixes.
markup-check.mjs: modifier classes, parts and values a component does not have, invented tokens, loading order, globals, icon buttons without a name.bun run verify outranks the review./defuss-shadcn:shadcn-review src/pages/settings.html
shadcn-review, human-triggered: the bundled markup checker runs first - its vocabulary is every class, part, variant and token of the release - then a judgment pass against the guides. Confirmed findings are fixed with the smallest correct diff and checked again.
Skills · and the process
Install defuss-vae as one more skill: the verified workflow that let defuss-shadcn scale this far with AI - in any harness that reads Agent Skills.
github.com/kyr0/defuss-vae
The two skill families and how they divide: defuss-shadcn's skills tell the agent what to build - the components with their guidelines, a plan, a theme, a review - and lead to a consistent UI; defuss-vae's skills tell it how to work - plan, implement, the gate, finalize - fixing the failure modes of agentic engineering, raising code and documentation quality, and letting vibe coding scale. Both install into any harness that reads Agent Skills.
Discussion
Average NON-SLOP prototype creation time: 15 minsbenchmarked with Claude Code, Opus 5.5 high
Open discussion: what will you build? An average non-slop prototype takes 15 minutes - benchmarked with Claude Code on Opus 5.5 (high effort).