29
Skill install
A SKILL.md card drops into the agent skills folder; a new ability lights up
Add the "Skill install" video component (Codex, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/skill-install.zip?v=6659220401b4 and unzip it into components/skill-install/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/skill-install && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o skill-install.mp4
3. Give me the path of the MP4. The text, names and timings live in the CONFIG block at the top of the script in index.html; change nothing there unless I ask.Code
One file. The project download adds the fonts, skins and motion kit it runs on.
Open full file1<!doctype html>2<html lang="en" data-composition-variables='[3 {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"Claude Code"},{"value":"1","label":"Codex"},{"value":"2","label":"ChatGPT"}]},4 {"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}5]'>6 <head>7 <meta charset="UTF-8" />8 <meta name="viewport" content="width=1920, height=1080" />9 <link rel="stylesheet" href="assets/fonts/fonts.css" />10 <link rel="stylesheet" href="assets/skins/claude-code/skin.css" />11 <link rel="stylesheet" href="assets/skins/codex/skin.css" />12 <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />13 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>14 <script src="assets/kit/motion/motion.js"></script>15 <script src="assets/skins/claude-code/icons.js"></script>16 <script src="assets/skins/codex/icons.js"></script>17 <script src="assets/skins/chatgpt/icons.js"></script>18 <style>19 /* ---------- stage (DESIGN.md tokens) ---------- */20 :root { --stage: #F5F5F4; }21 body.is-dark { --stage: #0E0E0F; }22 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }23 * { box-sizing: border-box; }24 #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--stage); font-family: "Inter", sans-serif; }25 #stage { position: absolute; inset: 0; background: var(--stage); }26 #cam { position: absolute; inset: 0; transform-origin: 960px 540px; }27 #place { position: absolute; }28 #frame { position: relative; }2930 /* ==========================================================31 Shared skills surface. Each variant maps its skin tokens32 onto these --si-* properties (see .v-cc / .v-cx / .v-cg).33 Sizes are the product's own 1x CSS px; #zoomer presents34 the whole object at 1.76x. Three type tiers per frame:35 20 (title) / 16 (names, nav, header) / 14.5 (everything36 secondary; mono and chips at 13.5, the same tier).37 ========================================================== */38 .si-page { position: relative; }39 .si-hrow { display: flex; align-items: flex-start; gap: 16px; }40 .si-hcol { flex: 1; min-width: 0; }41 .si-h1 { font-size: 20px; line-height: 27px; font-weight: var(--si-w-semi); letter-spacing: -0.02em; color: var(--si-ink); }42 .si-sub { margin-top: 2px; font-size: 14.5px; line-height: 20px; color: var(--si-ink-2); font-weight: var(--si-w); }43 .si-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 12px 0 10px; border-radius: var(--si-btn-r, 8px);44 border: 1px solid var(--si-line-2); background: var(--si-btn-bg); color: var(--si-ink); font-size: 14.5px; font-weight: var(--si-w-med); white-space: nowrap; margin-top: 2px; }45 .si-btn svg { width: 15px; height: 15px; }4647 .si-list { position: relative; margin-top: 18px; border-radius: var(--si-list-r, 12px); background: var(--si-card);48 box-shadow: 0 0 0 1px var(--si-line-2); overflow: hidden; }