my-you-eye
v2026.8.3
Published
A personally curated UI kit for building clean, simple apps fast — plus a motion and scene system for turning the same components into interactive presentations and rendered videos. Built so AI agents (even cheap ones) can use it correctly on the first tr
Readme
my-you-eye
A personally curated UI kit for building clean, simple apps fast — plus a motion and scene system for turning the same components into interactive presentations and rendered videos. Built so AI agents (even cheap ones) can use it correctly on the first try.
React 19 · Radix · Tailwind v4 · 100+ components across 4 tiers · 10 themes · light/dark
import { Button, Card, DataTable } from "my-you-eye";
import "my-you-eye/styles.css";
<Button variant="primary">Save</Button>Browse everything live: sadigaxund.github.io/my-you-eye — every component, every variant, with theme/font/dark switches and a generated API reference on each page.
A quick look
What's inside
One package, four tiers — install once, import what the job needs:
| Import | What you get |
|---|---|
| my-you-eye | The static kit: inputs, overlays, tables, charts, code/terminal/diff blocks, a node-canvas editor, stat cards, file trees… |
| my-you-eye/motion | Frame-driven animation primitives (Reveal, Stagger, TypeText, Camera, …) that render identically live and in video |
| my-you-eye/scenes | Author a whole presentation or video as one typed data object — title, code walkthrough, diagram, chart, terminal scenes |
| my-you-eye/present / my-you-eye/video | Deliver that object as a live click-through (no Remotion needed) or render it to MP4 |
Everything is themed by CSS tokens: set data-theme="neon" (or glass, comic,
brutal, stark, contrast, metallic, frosted, dark) and .dark on <html>
and the entire kit restyles — no component forks, ever.
Install & get started
npm install my-you-eye// once, at your app root — pick ONE stylesheet:
import "my-you-eye/styles.css"; // your app runs Tailwind v4 (the normal path)
// or
import "my-you-eye/styles.compiled.css"; // no Tailwind in your pipeline (Remotion, plain bundlers)
// then, anywhere:
import { Dialog, TreeView, BarChart } from "my-you-eye";Every component ships its Props type and its variants from the same import. The
full catalog with prop signatures lives in COMPONENTS.md /
components.json, or run npx my-you-eye list.
Bundle discipline
The sanctioned import path is the barrel (my-you-eye) plus its tier subpaths —
per-component subpaths are not published. Tree-shaking is guaranteed by
"sideEffects": ["*.css"]: every JS module is pure, only stylesheets carry side
effects, so unused component groups drop out of production builds.
To verify on your side, dump your bundle's symbols and grep for a group you never import:
# Vite: build, then inspect what shipped
npx vite build --mode production
grep -c "GraphEdge\|GraphNode" dist/assets/index-*.js # canvas group: expect 0 hits if unusedIf an unused group leaks into your bundle, check that your bundler resolves the
ESM build (module/exports fields) and that no barrel re-export of
my-you-eye is being force-included by a sideEffects: true override in your
own config.
Why this works well with AI agents
The package is designed to be agent-legible, so you can hand a coding agent a one-line request and get house-style UI back:
- SKILL.md is a ready-made agent skill: request→recipe playbooks
("build me an IDE-like tool", "a dashboard", "a landing page"), design rules, and
a script→scenes workflow for authoring videos. Drop it into a project with:
npx my-you-eye init # copies SKILL.md + references/ + components.json into skills/ - The skills pack (
references/skills-index.md+references/skills-analysis.md) is a curated, trust-ranked index of the wider frontend agent-skill ecosystem — React perf, component API design, accessibility, motion, UX copy.skills:init+skills:updatevendor third-party skill bodies into a project at pinned commits, so agents route to vetted guidance instead of guessing. components.jsonis generated from the source on every build — prop signatures, variants, defaults — so agents pick from the real API instead of guessing.- Scene data can't be styled wrong: a video/presentation is plain data with
closed unions — no
className, no colors, no pixel pushing — andassertVideo()validates every reference before a frame renders.
Versioning
Releases are date-versioned (YYYY.M.N — year, month, release-counter within
the month, e.g. 2026.8.0). Semver semantics don't fit a personal kit that evolves
continuously; the version tells you when, the CHANGELOG tells
you what. The format is still npm/semver-compatible, so ranges and tooling work
unchanged.
Contributing / working in this repo
AI agents: read AGENTS.md first. It is the binding ruleset.
npm run dev # the showcase, locally
npm run validate # the definition of done — types, lint, coverage, themes, contrast, build
npm run release # CalVer bump + changelog + signed tag (push to publish)Components follow the shadcn/ui pattern — code is owned here, Radix supplies
behavior, CVA declares variants, and every visual constant is a token in
src/styles/tokens.css. npm run validate turns rule violations into a red build.
License
See LICENSE.