agent-design-skills 1.1.3 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import{Command as lt}from"commander";import*as
|
|
2
|
+
import{Command as lt}from"commander";import*as k from"@clack/prompts";import b from"picocolors";import F from"pathe";import q from"fs-extra";import D from"fs-extra";import I from"pathe";import{fileURLToPath as ze}from"url";import N from"fs-extra";import te from"pathe";function Ie(e){let t=0;for(let s=0;s<e.length;s++)t=(t<<5)-t+e.charCodeAt(s),t|=0;return Math.abs(t)%7-3}function re(e,t,s){return t==="dark"?Math.max(s==="primary"?.97:s==="secondary"?.8:.68,e):Math.min(s==="primary"?.15:s==="secondary"?.34:.44,e)}var _={"dark-obsidian-technical":{A:{display:"Geist",sans:"Instrument Sans",mono:"Geist Mono"},B:{display:"Sora",sans:"Public Sans",mono:"Fira Code"},C:{display:"Satoshi",sans:"General Sans",mono:"Space Mono"}},"swiss-typographic-grid":{A:{display:"Cabinet Grotesk",sans:"Space Grotesk",mono:"Space Mono"},B:{display:"Syne",sans:"Public Sans",mono:"Fragment Mono"},C:{display:"Sora",sans:"General Sans",mono:"DM Mono"}},"kinetic-industrial-mono":{A:{display:"JetBrains Mono",sans:"IBM Plex Sans",mono:"JetBrains Mono"},B:{display:"Fira Code",sans:"Fragment Mono",mono:"Fira Code"},C:{display:"Space Mono",sans:"Chivo",mono:"Space Mono"}},"bento-modular-system":{A:{display:"Satoshi",sans:"General Sans",mono:"Geist Mono"},B:{display:"Sora",sans:"Public Sans",mono:"Fira Code"},C:{display:"Outfit",sans:"DM Sans",mono:"JetBrains Mono"}},"spatial-glass-visionos":{A:{display:"Outfit",sans:"DM Sans",mono:"Fragment Mono"},B:{display:"Sora",sans:"Public Sans",mono:"Geist Mono"},C:{display:"Cabinet Grotesk",sans:"Switzer",mono:"Inconsolata"}},"editorial-serif-paper":{A:{display:"Newsreader",sans:"Work Sans",mono:"Fragment Mono"},B:{display:"Fraunces",sans:"Merriweather Sans",mono:"IBM Plex Mono"},C:{display:"Bespoke Serif",sans:"Switzer",mono:"Inconsolata"}},"quiet-luxury-atelier":{A:{display:"Cormorant Garamond",sans:"DM Sans",mono:"Fragment Mono"},B:{display:"Fraunces",sans:"Work Sans",mono:"IBM Plex Mono"},C:{display:"Bespoke Serif",sans:"Switzer",mono:"Space Mono"}},"warm-artisan-craft":{A:{display:"Fraunces",sans:"Cabinet Grotesk",mono:"DM Mono"},B:{display:"Source Serif 4",sans:"Public Sans",mono:"Fragment Mono"},C:{display:"Newsreader",sans:"General Sans",mono:"Space Mono"}},"japanese-minimal-zen":{A:{display:"Noto Serif Display",sans:"Work Sans",mono:"DM Mono"},B:{display:"Newsreader",sans:"Public Sans",mono:"Fragment Mono"},C:{display:"Bespoke Serif",sans:"Sora",mono:"JetBrains Mono"}},"scandinavian-warm-minimal":{A:{display:"Familjen Grotesk",sans:"DM Sans",mono:"Fragment Mono"},B:{display:"Sora",sans:"Public Sans",mono:"IBM Plex Mono"},C:{display:"Switzer",sans:"Work Sans",mono:"Space Mono"}},"neo-brutalism":{A:{display:"Space Grotesk",sans:"Syne",mono:"Space Mono"},B:{display:"Archivo Black",sans:"Archivo",mono:"DM Mono"},C:{display:"Clash Display",sans:"Cabinet Grotesk",mono:"Fragment Mono"}},"retro-tactile-analog":{A:{display:"Space Mono",sans:"Chivo",mono:"Space Mono"},B:{display:"Syne",sans:"Public Sans",mono:"Fira Code"},C:{display:"Archivo",sans:"DM Mono",mono:"DM Mono"}},"y2k-acid-cyber":{A:{display:"Syne",sans:"Chakra Petch",mono:"Space Mono"},B:{display:"Clash Display",sans:"Space Grotesk",mono:"Fira Code"},C:{display:"Cabinet Grotesk",sans:"Public Sans",mono:"JetBrains Mono"}},"playful-clay-consumer":{A:{display:"Bricolage Grotesque",sans:"Fredoka",mono:"Space Mono"},B:{display:"Outfit",sans:"DM Sans",mono:"Fragment Mono"},C:{display:"Cabinet Grotesk",sans:"Switzer",mono:"DM Mono"}},"vaporwave-crt-terminal":{A:{display:"VT323",sans:"Fira Code",mono:"Fira Code"},B:{display:"Chakra Petch",sans:"Space Mono",mono:"Space Mono"},C:{display:"Syne",sans:"DM Mono",mono:"DM Mono"}},"high-trust-fintech-clarity":{A:{display:"Sora",sans:"Public Sans",mono:"Fira Code"},B:{display:"General Sans",sans:"Instrument Sans",mono:"JetBrains Mono"},C:{display:"Cabinet Grotesk",sans:"Switzer",mono:"Space Mono"}},"clinical-biotech-precision":{A:{display:"Instrument Sans",sans:"Public Sans",mono:"IBM Plex Mono"},B:{display:"Sora",sans:"General Sans",mono:"Fragment Mono"},C:{display:"Cabinet Grotesk",sans:"Work Sans",mono:"Fira Code"}},"civic-govtech-accessible":{A:{display:"Atkinson Hyperlegible",sans:"Public Sans",mono:"Fragment Mono"},B:{display:"Sora",sans:"DM Sans",mono:"IBM Plex Mono"},C:{display:"Work Sans",sans:"General Sans",mono:"Fira Code"}}},ie={calm:{ease:"cubic-bezier(0.25, 1, 0.5, 1)",easeSpring:"cubic-bezier(0.25, 1, 0.5, 1)",durationFast:"140ms",durationNormal:"240ms"},"urgent-precise":{ease:"cubic-bezier(0.16, 1, 0.3, 1)",easeSpring:"cubic-bezier(0.16, 1, 0.3, 1)",durationFast:"110ms",durationNormal:"180ms"},"playful-tactile":{ease:"cubic-bezier(0.34, 1.56, 0.64, 1)",easeSpring:"cubic-bezier(0.22, 1.35, 0.36, 1)",durationFast:"120ms",durationNormal:"240ms"},authoritative:{ease:"cubic-bezier(0.2, 0, 0, 1)",easeSpring:"cubic-bezier(0.2, 0, 0, 1)",durationFast:"120ms",durationNormal:"200ms"}},$e={"instrument sans":"wght@400;500;600;700","space grotesk":"wght@400;500;600;700",sora:"wght@400;600",fraunces:"opsz,wght@9..144,400..700","cormorant garamond":"wght@500;600;700","jetbrains mono":"wght@400;500","fira code":"wght@400;500","ibm plex mono":"wght@400;500","ibm plex sans":"wght@400;500;600","space mono":"wght@400;700","public sans":"wght@400;500;600","dm sans":"wght@400;500;600","dm mono":"wght@400;500","work sans":"wght@400;500;600","atkinson hyperlegible":"wght@400;700","bricolage grotesque":"wght@400;600;700",syne:"wght@600;700","syne mono":"wght@400",vt323:"wght@400",newsreader:"ital,opsz,wght@0,6..72,400..700;1,6..72,400","noto serif display":"wght@400;600","familjen grotesk":"wght@400;600",geist:"wght@400;500;600;700","geist mono":"wght@400;500","chakra petch":"wght@400;600",fredoka:"wght@400;600","archivo black":"wght@400",archivo:"wght@400;600",chivo:"wght@400;600",inconsolata:"wght@400;600","merriweather sans":"wght@400;600","source serif 4":"opsz,wght@8..60,400..700"},oe={"cabinet grotesk":"cabinet-grotesk@500,700,800","general sans":"general-sans@400,500,600",satoshi:"satoshi@400,500,700",switzer:"switzer@400,500,600","bespoke serif":"bespoke-serif@400,600","clash display":"clash-display@500,600,700"};function P(e){if(!e)return"";let t=e.match(/["']([^"']+)["']/);return t?t[1]:e.split(",")[0].trim()}async function J(e){let t=te.resolve(e,"tokens.css"),s=te.resolve(e,"tokens.json"),r=te.resolve(e,"package.json"),g,f,y,i;if(await N.pathExists(t)){let n=await N.readFile(t,"utf-8"),c=n.match(/--font-display:\s*([^;]+);/),d=n.match(/--font-sans:\s*([^;]+);/),m=n.match(/--font-mono:\s*([^;]+);/),p=n.match(/@import\s+url\(['"]?([^'")]+)['"]?\);/);if(c&&(g=c[1].trim()),d&&(f=d[1].trim()),m&&(y=m[1].trim()),p&&(i=p[1].trim()),g||f||y)return{display:g,sans:f,mono:y,importUrl:i,source:"preserved"}}if(await N.pathExists(s))try{let c=(await N.readJSON(s)).variables||{};if(c["--font-display"]||c["--font-sans"]||c["--font-mono"])return{display:c["--font-display"],sans:c["--font-sans"],mono:c["--font-mono"],source:"preserved"}}catch{}if(await N.pathExists(r))try{let n=await N.readJSON(r),c={...n.dependencies||{},...n.devDependencies||{}},d=Object.keys(c).filter(m=>m.startsWith("@fontsource/"));if(d.length>0){let m=d.map(p=>p.replace("@fontsource/","").split("-").map(a=>a.charAt(0).toUpperCase()+a.slice(1)).join(" "));return{display:m[0],sans:m[1]||m[0],mono:m.find(p=>p.toLowerCase().includes("mono")||p.toLowerCase().includes("code"))||"monospace",source:"package.json"}}}catch{}return null}function De(e){if(!e)return null;let t=["Geist Mono","Geist","Instrument Sans","Space Grotesk","Space Mono","Cabinet Grotesk","General Sans","Satoshi","Switzer","Bespoke Serif","Fraunces","Cormorant Garamond","Newsreader","Noto Serif Display","Source Serif 4","Familjen Grotesk","Sora","Public Sans","Work Sans","Atkinson Hyperlegible","Bricolage Grotesque","Syne Mono","Syne","JetBrains Mono","Fira Code","IBM Plex Mono","IBM Plex Sans","DM Sans","DM Mono","Outfit","VT323","Archivo"],s=e.toLowerCase();for(let r of t)if(new RegExp(`\\b(?:use|with|in|font:?)\\s+${r.toLowerCase()}\\b|\\b${r.toLowerCase()}\\s+(?:font|typography)\\b`,"i").test(e)||s.includes(`use ${r.toLowerCase()}`)){let f=/mono|code|vt323/i.test(r),y=/serif|garamond|fraunces|newsreader|cinzel/i.test(r);return f?{mono:r,source:"custom"}:y?{display:r,source:"custom"}:{sans:r,display:r,source:"custom"}}return null}function ae(e,t){if(!e)return"";if(e.includes(",")&&(e.includes("serif")||e.includes("sans-serif")||e.includes("monospace")))return e;let s=e.replace(/['"]/g,"").trim(),r=s.toLowerCase(),g=t==="mono"||/mono|code|vt323|inconsolata/i.test(r),f=t==="display"&&/serif|garamond|fraunces|newsreader|cinzel/i.test(r);return g?`'${s}', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`:f?`'${s}', Georgia, "Times New Roman", serif`:`'${s}', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`}function Re(e,t,s,r){let g=[P(e),P(t),P(s)].filter(Boolean),f=Array.from(new Set(g)),y=[],i=[];for(let c of f){let d=c.toLowerCase();if(oe[d])y.push(`@import url('https://api.fontshare.com/v2/css?f[]=${oe[d]}&display=swap');`);else{if(d==="monospace"||d==="serif"||d==="sans-serif"||d==="customuserfont")continue;{let m=c.replace(/\s+/g,"+"),p=$e[d]||"wght@400;500;600;700";i.push(`family=${m}:${p}`)}}}let n=[];return r&&!n.includes(`@import url('${r}');`)&&n.push(`@import url('${r}');`),n.push(...y),i.length>0&&n.push(`@import url('https://fonts.googleapis.com/css2?${i.join("&")}&display=swap');`),n.length>0?n.join(`
|
|
3
3
|
`)+`
|
|
4
4
|
|
|
5
|
-
`:""}function le(e){let{archetype:t,feeling:s,radius:
|
|
5
|
+
`:""}function le(e){let{archetype:t,feeling:s,radius:r,blur:g,projectName:f}=e,y=Ie(f),i="dark",n=250,c=.12,d=.18,m=.09,p=.28,v="oklch(0.65 0.20 250)",a="oklch(0.65 0.20 250 / 0.15)",l="oklch(0.70 0.22 250)",o=.96,u=.68,S=.52,w='"Geist", "Instrument Sans", sans-serif',C='"Geist", "Instrument Sans", sans-serif',A='"Geist Mono", "SF Mono", monospace',T=1.25;t==="editorial-serif-paper"?(i="light",n=75,c=.97,d=.99,m=.92,p=.85,v="oklch(0.48 0.18 25)",a="oklch(0.48 0.18 25 / 0.12)",l="oklch(0.42 0.20 25)",o=.2,u=.48,S=.62,w='"Newsreader", Georgia, serif',C='"Work Sans", sans-serif',A='"Fragment Mono", monospace'):t==="neo-brutalism"?(i="light",n=90,c=.97,d=1,m=.9,p=.12,v="oklch(0.85 0.28 130)",a="oklch(0.85 0.28 130 / 0.25)",l="oklch(0.88 0.30 130)",o=.12,u=.38,S=.5,w='"Space Grotesk", sans-serif',C='"Syne", sans-serif',A='"Space Mono", monospace',T=1.333):t==="swiss-typographic-grid"?(i="light",n=260,c=.98,d=1,m=.92,p=.12,v="oklch(0.55 0.22 25)",a="oklch(0.55 0.22 25 / 0.12)",l="oklch(0.50 0.24 25)",o=.12,u=.42,S=.55,w='"Cabinet Grotesk", sans-serif',C='"Space Grotesk", sans-serif',A='"Space Mono", monospace'):t==="kinetic-industrial-mono"?(i="dark",n=240,c=.1,d=.15,m=.07,p=.26,v="oklch(0.76 0.18 70)",a="oklch(0.76 0.18 70 / 0.15)",l="oklch(0.80 0.20 70)",o=.95,u=.68,S=.48,w='"JetBrains Mono", monospace',C='"IBM Plex Sans", sans-serif',A='"JetBrains Mono", monospace',T=1.2):t==="bento-modular-system"?(i="dark",n=255,c=.12,d=.17,m=.09,p=.28,v="oklch(0.64 0.22 255)",a="oklch(0.64 0.22 255 / 0.15)",l="oklch(0.68 0.24 255)",o=.96,u=.68,S=.5,w='"Satoshi", sans-serif',C='"General Sans", sans-serif',A='"Geist Mono", monospace'):t==="spatial-glass-visionos"?(i="dark",n=260,c=.1,d=.18,m=.08,p=.35,v="oklch(0.72 0.18 200)",a="oklch(0.72 0.18 200 / 0.18)",l="oklch(0.76 0.20 200)",o=.98,u=.72,S=.54,w='"Outfit", sans-serif',C='"DM Sans", sans-serif',A='"Fragment Mono", monospace'):t==="quiet-luxury-atelier"?(i="light",n=70,c=.97,d=.99,m=.92,p=.86,v="oklch(0.50 0.04 60)",a="oklch(0.50 0.04 60 / 0.12)",l="oklch(0.45 0.05 60)",o=.18,u=.46,S=.6,w='"Cormorant Garamond", serif',C='"DM Sans", sans-serif',A='"Fragment Mono", monospace'):t==="warm-artisan-craft"?(i="light",n=80,c=.96,d=.98,m=.9,p=.85,v="oklch(0.58 0.16 40)",a="oklch(0.58 0.16 40 / 0.14)",l="oklch(0.52 0.18 40)",o=.24,u=.5,S=.62,w='"Fraunces", serif',C='"Cabinet Grotesk", sans-serif',A='"DM Mono", monospace'):t==="japanese-minimal-zen"?(i="light",n=90,c=.97,d=.99,m=.91,p=.88,v="oklch(0.22 0.01 250)",a="oklch(0.22 0.01 250 / 0.10)",l="oklch(0.16 0.01 250)",o=.2,u=.48,S=.62,w='"Noto Serif Display", serif',C='"Work Sans", sans-serif',A='"DM Mono", monospace'):t==="scandinavian-warm-minimal"?(i="light",n=85,c=.97,d=.99,m=.91,p=.86,v="oklch(0.54 0.14 235)",a="oklch(0.54 0.14 235 / 0.14)",l="oklch(0.48 0.16 235)",o=.2,u=.48,S=.6,w='"Familjen Grotesk", sans-serif',C='"DM Sans", sans-serif',A='"Fragment Mono", monospace'):t==="retro-tactile-analog"?(i="dark",n=240,c=.2,d=.27,m=.14,p=.36,v="oklch(0.68 0.24 45)",a="oklch(0.68 0.24 45 / 0.18)",l="oklch(0.72 0.26 45)",o=.96,u=.72,S=.55,w='"Space Mono", monospace',C='"Chivo", sans-serif',A='"Space Mono", monospace',T=1.2):t==="y2k-acid-cyber"?(i="dark",n=290,c=.08,d=.14,m=.05,p=.3,v="oklch(0.88 0.28 135)",a="oklch(0.88 0.28 135 / 0.20)",l="oklch(0.92 0.30 135)",o=.98,u=.74,S=.55,w='"Syne", sans-serif',C='"Chakra Petch", sans-serif',A='"Space Mono", monospace',T=1.333):t==="playful-clay-consumer"?(i="light",n=280,c=.97,d=.99,m=.92,p=.88,v="oklch(0.66 0.22 295)",a="oklch(0.66 0.22 295 / 0.15)",l="oklch(0.70 0.24 295)",o=.2,u=.48,S=.6,w='"Bricolage Grotesque", sans-serif',C='"Fredoka", sans-serif',A='"Space Mono", monospace'):t==="vaporwave-crt-terminal"?(i="dark",n=290,c=.09,d=.14,m=.06,p=.28,v="oklch(0.78 0.18 200)",a="oklch(0.78 0.18 200 / 0.15)",l="oklch(0.82 0.20 200)",o=.96,u=.7,S=.5,w='"VT323", monospace',C='"Fira Code", monospace',A='"Fira Code", monospace',T=1.2):t==="high-trust-fintech-clarity"?(i="light",n=245,c=.98,d=1,m=.93,p=.86,v="oklch(0.56 0.18 245)",a="oklch(0.56 0.18 245 / 0.12)",l="oklch(0.50 0.20 245)",o=.14,u=.44,S=.58,w='"Sora", sans-serif',C='"Public Sans", sans-serif',A='"Fira Code", monospace'):t==="clinical-biotech-precision"?(i="light",n=220,c=.98,d=1,m=.92,p=.85,v="oklch(0.68 0.16 215)",a="oklch(0.68 0.16 215 / 0.12)",l="oklch(0.62 0.18 215)",o=.14,u=.42,S=.56,w='"Instrument Sans", sans-serif',C='"Public Sans", sans-serif',A='"IBM Plex Mono", monospace'):t==="civic-govtech-accessible"&&(i="light",n=260,c=.99,d=1,m=.92,p=.3,v="oklch(0.42 0.16 245)",a="oklch(0.42 0.16 245 / 0.12)",l="oklch(0.36 0.18 245)",o=.12,u=.38,S=.5,w='"Atkinson Hyperlegible", sans-serif',C='"Public Sans", sans-serif',A='"Fragment Mono", monospace');let x=((n+y)%360+360)%360,Ce=re(o,i,"primary"),Ae=re(i==="dark"?.8:.34,i,"secondary"),Me=re(u,i,"muted"),U="6px",H="4px",j="4px";r==="sharp"?(U="0px",H="0px",j="0px"):r==="medium"?(U="10px",H="6px",j="6px"):r==="high"?(U="16px",H="10px",j="8px"):r==="pill"&&(U="9999px",H="9999px",j="9999px");let Z="8px";g==="flat"?Z="0px":g==="deep-glass"&&(Z="20px");let Y=ie[s]||ie["urgent-precise"],Ee=Y.ease,Fe=Y.easeSpring,Te=Y.durationFast,Pe=Y.durationNormal,Q="0 1px 2px 0 oklch(0 0 0 / 0.45), 0 0 0 1px var(--border-hairline)",ee="0 4px 12px 0 oklch(0 0 0 / 0.50), 0 0 0 1px var(--border-hairline)";i==="light"&&t!=="neo-brutalism"?(Q="0 1px 3px 0 oklch(0.20 0.012 50 / 0.06), 0 0 0 1px var(--border-hairline)",ee="0 6px 16px -2px oklch(0.20 0.012 50 / 0.08), 0 0 0 1px var(--border-hairline)"):t==="neo-brutalism"&&(Q="3px 3px 0px 0px oklch(0.12 0.005 260)",ee="6px 6px 0px 0px oklch(0.12 0.005 260)");let $=_[t]||_["dark-obsidian-technical"],B=$.A.display,O=$.A.sans,L=$.A.mono;e.fontOverride?.source==="preserved"&&(e.fontMode==="keep"||!e.fontMode)?(e.fontOverride.display&&(B=P(e.fontOverride.display)),e.fontOverride.sans&&(O=P(e.fontOverride.sans)),e.fontOverride.mono&&(L=P(e.fontOverride.mono))):e.fontMode==="B"?(B=$.B.display,O=$.B.sans,L=$.B.mono):e.fontMode==="C"?(B=$.C.display,O=$.C.sans,L=$.C.mono):e.fontOverride&&(e.fontOverride.display&&(B=P(e.fontOverride.display)),e.fontOverride.sans&&(O=P(e.fontOverride.sans)),e.fontOverride.mono&&(L=P(e.fontOverride.mono)));let G=De(e.customDirection);G&&e.fontMode!=="keep"&&(G.display&&(B=G.display),G.sans&&(O=G.sans),G.mono&&(L=G.mono)),w=ae(B,"display"),C=ae(O,"sans"),A=ae(L,"mono");let h={"--bg-canvas":`oklch(${c} 0.015 ${x})`,"--bg-elevated":`oklch(${d} 0.015 ${x})`,"--bg-surface-active":`oklch(${d+(i==="dark"?.04:-.04)} 0.018 ${x})`,"--bg-glass":`oklch(${d} 0.015 ${x} / 0.72)`,"--bg-sunken":`oklch(${m} 0.012 ${x})`,"--text-primary":`oklch(${Ce} 0.005 ${x})`,"--text-secondary":`oklch(${Ae} 0.010 ${x})`,"--text-muted":`oklch(${Me} 0.015 ${x})`,"--text-subtle":`oklch(${S} 0.018 ${x})`,"--text-inverse":i==="dark"?`oklch(0.12 0.015 ${x})`:`oklch(0.98 0.005 ${x})`,"--accent-primary":v,"--accent-subtle":a,"--accent-hover":l,"--border-hairline":i==="dark"?"oklch(1 0 0 / 0.07)":"oklch(0 0 0 / 0.07)","--border-subtle":i==="dark"?"oklch(1 0 0 / 0.04)":"oklch(0 0 0 / 0.04)","--border-focus":`oklch(0.65 0.20 ${x} / 0.75)`,"--highlight-specular":i==="dark"?"oklch(1 0 0 / 0.18)":"oklch(1 0 0 / 0.60)","--status-success":"oklch(0.72 0.16 145)","--status-warning":"oklch(0.78 0.14 75)","--status-danger":"oklch(0.65 0.22 25)","--status-info":"oklch(0.70 0.15 230)","--radius-outer":U,"--radius-inner":H,"--radius-badge":j,"--surface-blur":Z,"--shadow-surface":Q,"--shadow-elevated":ee,"--section-py-tight":"clamp(2.5rem, 4vw, 4rem)","--section-py-normal":"clamp(4.5rem, 7vw, 6.5rem)","--section-py-breathing":"clamp(7rem, 12vw, 11rem)","--container-max":"1280px","--font-display":w,"--font-sans":C,"--font-mono":A,"--text-xs":"0.8125rem","--text-sm":"0.9375rem","--text-base":"1.0625rem","--text-lg":"1.25rem","--text-xl":`${(1.25*T).toFixed(3)}rem`,"--text-2xl":`${(1.25*Math.pow(T,2)).toFixed(3)}rem`,"--text-3xl":`${(1.25*Math.pow(T,3)).toFixed(3)}rem`,"--text-4xl":`${(1.25*Math.pow(T,4)).toFixed(3)}rem`,"--weight-heading":"600","--weight-body":"400","--weight-mono":"500","--ease-primary":Ee,"--ease-spring":Fe,"--duration-fast":Te,"--duration-normal":Pe};return{css:`${Re(B,O,L,e.fontOverride?.importUrl)}/* =============================================================================
|
|
6
6
|
AGENT DESIGN SKILLS \u2014 TOKEN CONTRACT (v1.1)
|
|
7
7
|
Archetype: ${t}
|
|
8
8
|
Polarity: ${i}
|
|
@@ -82,16 +82,16 @@ import{Command as lt}from"commander";import*as w from"@clack/prompts";import k f
|
|
|
82
82
|
============================================================================= */
|
|
83
83
|
|
|
84
84
|
[data-theme="light"], .light {
|
|
85
|
-
--bg-canvas: oklch(0.97 0.015 ${
|
|
86
|
-
--bg-elevated: oklch(0.99 0.015 ${
|
|
87
|
-
--bg-surface-active: oklch(0.95 0.018 ${
|
|
88
|
-
--bg-glass: oklch(0.99 0.015 ${
|
|
89
|
-
--bg-sunken: oklch(0.92 0.012 ${
|
|
90
|
-
--text-primary: oklch(0.15 0.015 ${
|
|
91
|
-
--text-secondary: oklch(0.34 0.015 ${
|
|
92
|
-
--text-muted: oklch(0.44 0.015 ${
|
|
93
|
-
--text-subtle: oklch(0.55 0.018 ${
|
|
94
|
-
--text-inverse: oklch(0.98 0.005 ${
|
|
85
|
+
--bg-canvas: oklch(0.97 0.015 ${x});
|
|
86
|
+
--bg-elevated: oklch(0.99 0.015 ${x});
|
|
87
|
+
--bg-surface-active: oklch(0.95 0.018 ${x});
|
|
88
|
+
--bg-glass: oklch(0.99 0.015 ${x} / 0.72);
|
|
89
|
+
--bg-sunken: oklch(0.92 0.012 ${x});
|
|
90
|
+
--text-primary: oklch(0.15 0.015 ${x});
|
|
91
|
+
--text-secondary: oklch(0.34 0.015 ${x});
|
|
92
|
+
--text-muted: oklch(0.44 0.015 ${x});
|
|
93
|
+
--text-subtle: oklch(0.55 0.018 ${x});
|
|
94
|
+
--text-inverse: oklch(0.98 0.005 ${x});
|
|
95
95
|
--border-hairline: oklch(0 0 0 / 0.07);
|
|
96
96
|
--border-subtle: oklch(0 0 0 / 0.04);
|
|
97
97
|
--highlight-specular: oklch(1 0 0 / 0.60);
|
|
@@ -100,16 +100,16 @@ import{Command as lt}from"commander";import*as w from"@clack/prompts";import k f
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
[data-theme="dark"], .dark {
|
|
103
|
-
--bg-canvas: oklch(0.12 0.015 ${
|
|
104
|
-
--bg-elevated: oklch(0.18 0.015 ${
|
|
105
|
-
--bg-surface-active: oklch(0.22 0.018 ${
|
|
106
|
-
--bg-glass: oklch(0.18 0.015 ${
|
|
107
|
-
--bg-sunken: oklch(0.09 0.012 ${
|
|
108
|
-
--text-primary: oklch(0.97 0.005 ${
|
|
109
|
-
--text-secondary: oklch(0.80 0.010 ${
|
|
110
|
-
--text-muted: oklch(0.68 0.015 ${
|
|
111
|
-
--text-subtle: oklch(0.52 0.018 ${
|
|
112
|
-
--text-inverse: oklch(0.12 0.015 ${
|
|
103
|
+
--bg-canvas: oklch(0.12 0.015 ${x});
|
|
104
|
+
--bg-elevated: oklch(0.18 0.015 ${x});
|
|
105
|
+
--bg-surface-active: oklch(0.22 0.018 ${x});
|
|
106
|
+
--bg-glass: oklch(0.18 0.015 ${x} / 0.72);
|
|
107
|
+
--bg-sunken: oklch(0.09 0.012 ${x});
|
|
108
|
+
--text-primary: oklch(0.97 0.005 ${x});
|
|
109
|
+
--text-secondary: oklch(0.80 0.010 ${x});
|
|
110
|
+
--text-muted: oklch(0.68 0.015 ${x});
|
|
111
|
+
--text-subtle: oklch(0.52 0.018 ${x});
|
|
112
|
+
--text-inverse: oklch(0.12 0.015 ${x});
|
|
113
113
|
--border-hairline: oklch(1 0 0 / 0.07);
|
|
114
114
|
--border-subtle: oklch(1 0 0 / 0.04);
|
|
115
115
|
--highlight-specular: oklch(1 0 0 / 0.18);
|
|
@@ -203,14 +203,15 @@ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="tab
|
|
|
203
203
|
outline: 2px solid var(--accent-primary);
|
|
204
204
|
outline-offset: 2px;
|
|
205
205
|
}
|
|
206
|
-
`,json:{version:"1.1.1",archetype:t,polarity:i,feeling:s,folderJitter:y,variables:h},variables:h}}function
|
|
206
|
+
`,json:{version:"1.1.1",archetype:t,polarity:i,feeling:s,folderJitter:y,variables:h},variables:h}}function Be(e){let s=e.indexOf("## 5. Component Inventory");return s!==-1?e.slice(s).trim():null}function ce(e,t){let{projectName:s,archetype:r,customDirection:g="Needs to feel like a high-precision developer settlement console, crisp 1px hairlines, zero marketing fluff",productBrief:f="High-precision operational workspace and data reconciliation platform"}=e,y="Dark";new Set(["editorial-serif-paper","neo-brutalism","swiss-typographic-grid","quiet-luxury-atelier","warm-artisan-craft","japanese-minimal-zen","scandinavian-warm-minimal","playful-clay-consumer","high-trust-fintech-clarity","clinical-biotech-precision","civic-govtech-accessible"]).has(r)&&(y="Light");let n="Desktop-First",c="Direct, Forensic, Unhurried",d="Row 4,812: $412.50 FX discrepancy between Stripe payout and nodal settlement.",m="Oops! Something went wrong with your reconciliation. Try again!",p="Precision single-sweep scanline pulse over the batch header upon reconciliation commitment (180ms ease, zero overshoot).";r==="editorial-serif-paper"||r==="quiet-luxury-atelier"?(c="Literary, Dispassionate, Deeply-Researched",d="Vault allocation audited against physical treasury bills with verified CUSIP numbers.",m="Supercharge your treasury with our smart AI dashboard! \u{1F680}",p="Gentle 240ms ink-soak underline expansion upon section entry."):r==="neo-brutalism"&&(y="Light",c="Stark, Punchy, Tactile",d="Pipeline output committed. Hash: 0x8F2D. 0 warnings.",m="Enjoy our smooth and seamless creative workflow experience.",p="Hard tactile button depress translating 3px and collapsing shadow.");let v=`# Design Specification & Token Contract
|
|
207
207
|
|
|
208
208
|
**STATUS:** ACTIVE
|
|
209
209
|
**BRIEF STATUS:** LOCKED
|
|
210
|
-
**ARCHETYPE:** ${
|
|
210
|
+
**ARCHETYPE:** ${r}
|
|
211
211
|
**POLARITY:** ${y}
|
|
212
212
|
**LAYOUT:** ${n}
|
|
213
|
-
**TOKENS SOURCE:** \`./tokens.css\`
|
|
213
|
+
**TOKENS SOURCE:** \`./tokens.css\`
|
|
214
|
+
**STARTER BLUEPRINT:** \`./starter-preview.html\` (Living architectural reference \u2014 MUST inspect before authoring views)
|
|
214
215
|
|
|
215
216
|
---
|
|
216
217
|
|
|
@@ -225,11 +226,13 @@ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="tab
|
|
|
225
226
|
|
|
226
227
|
---
|
|
227
228
|
|
|
228
|
-
## 1. Project Design DNA
|
|
229
|
+
## 1. Project Design DNA & Starter Blueprint
|
|
229
230
|
|
|
230
|
-
- **Archetype:** \`${
|
|
231
|
+
- **Archetype:** \`${r}\`
|
|
231
232
|
- **Primary Layout Vector:** ${n}
|
|
232
233
|
- **Polarity:** ${y} Polarity
|
|
234
|
+
- **Starter Blueprint:** \`./starter-preview.html\`
|
|
235
|
+
- **Architectural Parity Mandate:** Always inspect \`./starter-preview.html\` before creating new views. It demonstrates production-ready markup, container sizing, split-pane structures, table styling, and verified token bindings. Port its proven patterns directly into your framework rather than designing from scratch.
|
|
233
236
|
- **Geometric Rigor:** Concentric corner radius hierarchy (\`radius-inner = max(0, radius-outer - padding)\`).
|
|
234
237
|
|
|
235
238
|
---
|
|
@@ -284,7 +287,7 @@ All components MUST consume these semantic tokens directly. Never duplicate raw
|
|
|
284
287
|
- **Numeric & Tabular Typography Law:** NEVER use coding monospace fonts (\`--font-mono\`) or \`slashed-zero\` on hero numbers, counters, or KPI figures. Always use \`var(--font-display)\` or \`var(--font-sans)\` with \`font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1, "zero" 0;\` so digits have clean, open-oval zeros (\`0\`) with zero horizontal jitter. Reserve \`var(--font-mono)\` strictly for code snippets, file paths, or git hashes.
|
|
285
288
|
- **Badge & Indicator Discipline:** Eyebrows must stand alone as plain monospace text. Colored status dots are forbidden unless tied to a live connection status.
|
|
286
289
|
- **Signature Moment:** ${p}
|
|
287
|
-
`;if(t){let l=
|
|
290
|
+
`;if(t){let l=Be(t);if(l)return`${v}
|
|
288
291
|
---
|
|
289
292
|
|
|
290
293
|
${l}
|
|
@@ -331,44 +334,52 @@ ${l}
|
|
|
331
334
|
|
|
332
335
|
- [ ] **Tabular Alignment Check:** Ensure all numeric columns right-align with zero jitter.
|
|
333
336
|
- [ ] **Keyboard Navigation:** Bind keyboard shortcut navigation for data grid rows.
|
|
334
|
-
`}import M from"fs-extra";import E from"pathe";import{fileURLToPath as
|
|
337
|
+
`}import M from"fs-extra";import E from"pathe";import{fileURLToPath as Oe}from"url";async function Le(){let e=Oe(import.meta.url),t=E.dirname(e),s=[E.resolve(t,"../registry"),E.resolve(t,"../../registry"),E.resolve(t,"../../../registry"),E.resolve(process.cwd(),"registry")];for(let r of s)if(await M.pathExists(r))return r;return E.resolve(process.cwd(),"registry")}function de(e,t){return e.replace(/\{\{ARCHETYPE_NAME\}\}/g,t.archetype).replace(/\{\{TOKENS_PATH\}\}/g,"./tokens.css").replace(/\{\{DESIGN_DOC_PATH\}\}/g,"./DESIGN.md").replace(/\{\{PRODUCT_NAME\}\}/g,t.projectName).replace(/\{\{PRODUCT_BRIEF\}\}/g,t.productBrief||"High-precision operational workspace and data reconciliation platform")}async function pe(e,t,s){let r=[],f=await M.pathExists(E.resolve(e,".agents"))?".agents":".agent",y=E.resolve(e,f,"rules");await M.ensureDir(y);let i=E.resolve(y,"design-core.md"),n=`---
|
|
335
338
|
trigger: always_on
|
|
336
339
|
description: "Always-On Core Design Governance Rule (v1.0)"
|
|
337
340
|
---
|
|
338
341
|
|
|
339
342
|
${s}
|
|
340
|
-
`;await M.writeFile(i,n,"utf-8"),
|
|
343
|
+
`;await M.writeFile(i,n,"utf-8"),r.push(i);let c=E.resolve(e,f,"skills/design-system");await M.ensureDir(c);let d=E.resolve(c,"SKILL.md"),m=await Le(),p=E.resolve(m,"core"),v=E.resolve(m,"archetypes",`${t.archetype}.md`),a=["00-workflow-and-scope.md","01-override-protocol.md","02-anti-slop-firewall.md","03-cross-page-unity.md","04-ux-and-ergonomics.md","05-voice-and-copy.md","06-iteration-discipline.md"];if(t.mode==="single"){let l=`---
|
|
341
344
|
name: design-system
|
|
342
|
-
description: "
|
|
345
|
+
description: "Design system tokens, UX ergonomics, archetype specs, and starter kit blueprints (starter-preview.html)"
|
|
343
346
|
---
|
|
344
347
|
|
|
345
348
|
# Master Design System (v1.0)
|
|
346
349
|
|
|
347
350
|
Target Archetype: \`${t.archetype}\`
|
|
348
351
|
Token Contract: \`./tokens.css\`
|
|
349
|
-
Design Specification: \`./DESIGN.md\`
|
|
352
|
+
Design Specification: \`./DESIGN.md\`
|
|
353
|
+
Starter Blueprint: \`./starter-preview.html\` (Inspect first before writing UI)
|
|
354
|
+
|
|
355
|
+
## Golden Starter Blueprint (./starter-preview.html)
|
|
356
|
+
Before writing or refactoring any frontend component or page, inspect \`./starter-preview.html\` in the workspace root. It provides the reference layout architecture, navigation chrome, responsive grid, and pre-styled component markup for this project archetype. Always adapt and port its proven HTML/CSS structures directly into your framework rather than designing from scratch.
|
|
350
357
|
|
|
351
358
|
${s}
|
|
352
359
|
|
|
353
360
|
---
|
|
354
|
-
`;for(let o of
|
|
361
|
+
`;for(let o of a){let u=E.resolve(p,o);if(await M.pathExists(u)){let S=await M.readFile(u,"utf-8");l+=`
|
|
355
362
|
---
|
|
356
363
|
|
|
357
|
-
${de(
|
|
364
|
+
${de(S,t)}
|
|
358
365
|
`}}if(await M.pathExists(v)){let o=await M.readFile(v,"utf-8");l+=`
|
|
359
366
|
---
|
|
360
367
|
|
|
361
368
|
${o}
|
|
362
|
-
`}await M.writeFile(d,l,"utf-8"),
|
|
369
|
+
`}await M.writeFile(d,l,"utf-8"),r.push(d)}else{let l=E.resolve(c,"references");await M.ensureDir(l);for(let u of a){let S=E.resolve(p,u),w=E.resolve(l,u);if(await M.pathExists(S)){let C=await M.readFile(S,"utf-8");await M.writeFile(w,de(C,t),"utf-8"),r.push(w)}}if(await M.pathExists(v)){let u=E.resolve(l,"archetype.md"),S=await M.readFile(v,"utf-8");await M.writeFile(u,S,"utf-8"),r.push(u)}let o=`---
|
|
363
370
|
name: design-system
|
|
364
|
-
description: "
|
|
371
|
+
description: "Design system tokens, UX ergonomics, archetype specs, and starter kit blueprints (starter-preview.html)"
|
|
365
372
|
---
|
|
366
373
|
|
|
367
374
|
# Design System Skill (v1.0)
|
|
368
375
|
|
|
369
376
|
Target Archetype: \`${t.archetype}\`
|
|
370
377
|
Token Contract: \`./tokens.css\`
|
|
371
|
-
Design Specification: \`./DESIGN.md\`
|
|
378
|
+
Design Specification: \`./DESIGN.md\`
|
|
379
|
+
Starter Blueprint: \`./starter-preview.html\` (Inspect first before writing UI)
|
|
380
|
+
|
|
381
|
+
## Golden Starter Blueprint (./starter-preview.html)
|
|
382
|
+
Before writing or refactoring any frontend component or page, inspect \`./starter-preview.html\` in the workspace root. It provides the reference layout architecture, navigation chrome, responsive grid, and pre-styled component markup for this project archetype. Always adapt and port its proven HTML/CSS structures directly into your framework rather than designing from scratch.
|
|
372
383
|
|
|
373
384
|
## Overview
|
|
374
385
|
This skill provides comprehensive, on-demand reference guidelines for maintaining frontend geometric unity, copy honesty, and token adherence across this codebase.
|
|
@@ -383,13 +394,13 @@ Consult the following modular references in \`./references/\` during design task
|
|
|
383
394
|
- **05 Voice & Copy:** \`./references/05-voice-and-copy.md\` \u2014 Brochure test, swap test, sentence casing, and punctuation discipline.
|
|
384
395
|
- **06 Iteration Discipline:** \`./references/06-iteration-discipline.md\` \u2014 Fix-forward principle and 2-pass budget.
|
|
385
396
|
- **Archetype Guide:** \`./references/archetype.md\` \u2014 Archetype specifications, font pairings, and OKLCH palettes.
|
|
386
|
-
`;await M.writeFile(d,o,"utf-8"),
|
|
397
|
+
`;await M.writeFile(d,o,"utf-8"),r.push(d)}return r}import V from"fs-extra";import W from"pathe";async function ue(e,t,s){let r=W.resolve(e,".cursor/rules");await V.ensureDir(r);let g=[],f=W.resolve(r,"00-design-core.mdc"),y=`---
|
|
387
398
|
description: "Always-On Core Design Governance Rule for Cursor (v1.0)"
|
|
388
399
|
alwaysApply: true
|
|
389
400
|
---
|
|
390
401
|
|
|
391
402
|
${s}
|
|
392
|
-
`;if(await V.writeFile(f,y,"utf-8"),g.push(f),t.mode!=="single"){let i=W.resolve(
|
|
403
|
+
`;if(await V.writeFile(f,y,"utf-8"),g.push(f),t.mode!=="single"){let i=W.resolve(r,"01-ux-ergonomics.mdc");await V.writeFile(i,`---
|
|
393
404
|
description: "UX Ergonomics, Component States & Realistic Seed Data (v1.0)"
|
|
394
405
|
globs: "**/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.html"
|
|
395
406
|
alwaysApply: false
|
|
@@ -409,7 +420,10 @@ Every interactive component or data view must handle:
|
|
|
409
420
|
- Ban "John Doe", "Jane Doe", "Lorem ipsum", "Acme", and "$99.99".
|
|
410
421
|
- Require varied string lengths, at least 1 long entity string testing truncation (\`text-overflow: ellipsis\`), 1 null avatar monogram fallback, and 1 zero/pending state.
|
|
411
422
|
- Tabular numbers: All metrics, counters, and currencies must enforce \`font-variant-numeric: tabular-nums\`.
|
|
412
|
-
|
|
423
|
+
|
|
424
|
+
### Starter Kit Blueprint Mandate (./starter-preview.html)
|
|
425
|
+
Before generating new components or views, inspect \`./starter-preview.html\`. Mirror its layout grid, header architecture, split-pane layout, and component markup rather than inventing from scratch.
|
|
426
|
+
`,"utf-8"),g.push(i);let c=W.resolve(r,"02-voice-copy.mdc");await V.writeFile(c,`---
|
|
413
427
|
description: "Voice, Copy Honesty, Sentence Casing & Typography Rules (v1.0)"
|
|
414
428
|
globs: "**/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.html, **/*.md, **/*.mdx"
|
|
415
429
|
alwaysApply: false
|
|
@@ -426,7 +440,7 @@ alwaysApply: false
|
|
|
426
440
|
- **Sentence Case:** Strict sentence case on headings, table columns, tooltips, and buttons.
|
|
427
441
|
- **Cure "UPPERCASE MICRO-LABEL Disease":** Max 1 uppercase eyebrow per view. Ban self-evident labels (redundant status descriptions, section format labels, or narrating obvious controls). Uppercase permitted only on short functional technical tags (<= 3 words in \`var(--font-mono)\`, e.g., STATUS: ACTIVE, REF: 0x4B2).
|
|
428
442
|
- **Punctuation:** Zero em-dashes in headings; maximum 1 em-dash per page in body copy.
|
|
429
|
-
`,"utf-8"),g.push(c);let m=W.resolve(
|
|
443
|
+
`,"utf-8"),g.push(c);let m=W.resolve(r,"03-archetype-recipe.mdc"),p=`---
|
|
430
444
|
description: "Archetype Recipe & Geometric Token Contract for ${t.archetype} (v1.0)"
|
|
431
445
|
globs: "**/*.css, **/*.scss, **/*.less, **/*.html, **/*.jsx, **/*.tsx"
|
|
432
446
|
alwaysApply: false
|
|
@@ -453,14 +467,14 @@ Child radii must never protrude past or clash with parent borders.
|
|
|
453
467
|
- 1px hairline borders: \`var(--border-hairline)\`
|
|
454
468
|
- Top specular highlight: \`var(--highlight-specular)\`
|
|
455
469
|
- Zero purple AI gradients or ungrounded card drop shadows.
|
|
456
|
-
`;await V.writeFile(m,p,"utf-8"),g.push(m)}return g}import me from"fs-extra";import he from"pathe";async function ge(e,t,s){let
|
|
470
|
+
`;await V.writeFile(m,p,"utf-8"),g.push(m)}return g}import me from"fs-extra";import he from"pathe";async function ge(e,t,s){let r=he.resolve(e,"CLAUDE.md"),g=he.resolve(e,"AGENTS.md"),f=`# Design Governance & Token Contract (v4.2)
|
|
457
471
|
|
|
458
472
|
${s}
|
|
459
|
-
`;return await me.writeFile(
|
|
473
|
+
`;return await me.writeFile(r,f,"utf-8"),await me.writeFile(g,f,"utf-8"),[r,g]}import Ge from"fs-extra";import Ne from"pathe";async function fe(e,t,s){let r=Ne.resolve(e,"DESIGN-PROMPT.md"),g=`# Frontend Design System Guidelines (v4.2)
|
|
460
474
|
Target Environments: v0, Lovable, Bolt, Replit
|
|
461
475
|
|
|
462
476
|
${s}
|
|
463
|
-
`;return await Ge.writeFile(
|
|
477
|
+
`;return await Ge.writeFile(r,g,"utf-8"),r}async function Ue(){let e=ze(import.meta.url),t=I.dirname(e),s=[I.resolve(t,"../registry"),I.resolve(t,"../../registry"),I.resolve(t,"../../../registry"),I.resolve(process.cwd(),"registry")];for(let r of s)if(await D.pathExists(r))return r;return I.resolve(process.cwd(),"registry")}function He(e){let{archetype:t}=e;return`# Always-On Design Governance Rule (v1.1)
|
|
464
478
|
|
|
465
479
|
You are the design governance engine for this codebase. Every UI decision must preserve geometric unity, copy honesty, and visual calm across every turn.
|
|
466
480
|
|
|
@@ -494,12 +508,19 @@ You are the design governance engine for this codebase. Every UI decision must p
|
|
|
494
508
|
|
|
495
509
|
---
|
|
496
510
|
|
|
497
|
-
### 3. Mandatory Pre-Flight &
|
|
498
|
-
- **Read First
|
|
499
|
-
|
|
511
|
+
### 3. Mandatory Pre-Flight, Token Contract & Starter Blueprint
|
|
512
|
+
- **Read First Before Writing ANY UI:**
|
|
513
|
+
1. Inspect \`./tokens.css\` to confirm available semantic tokens.
|
|
514
|
+
2. Inspect \`./DESIGN.md\` for project DNA and brief status.
|
|
515
|
+
3. **CRITICAL \u2014 Inspect \`./starter-preview.html\` First:** Check if \`./starter-preview.html\` exists in the project root. If it exists, **YOU MUST READ AND INSPECT IT FIRST.** It is your living architectural ground truth.
|
|
516
|
+
- **Extract & Adapt, Never Reinvent from Scratch:**
|
|
517
|
+
- \`./starter-preview.html\` contains the verified layout architecture, navigation chrome, command headers, split panes, table structures, and card hierarchies designed specifically for this project archetype.
|
|
518
|
+
- **Do NOT invent arbitrary new card containers, table formats, or header layouts from scratch.** Extract and adapt the battle-tested HTML/CSS patterns directly from \`./starter-preview.html\` into your framework (React/JSX, Vue, Svelte, or HTML).
|
|
519
|
+
- Mirror its exact structural conventions: container max-widths, split panes, metric strips, table layouts, header structures, and interactive button patterns.
|
|
520
|
+
- **Adaptive Pre-Flight Gate & Output Anchor:**
|
|
500
521
|
- If \`BRIEF STATUS: DRAFT\` or the user prompt is structurally ambiguous: Stop immediately, ask 2\u20134 targeted design questions, and provide a 5\u201310 line text/ASCII wireframe layout plan before writing code.
|
|
501
522
|
- If \`BRIEF STATUS: LOCKED\` and the prompt is clear: Skip questions and begin response directly with:
|
|
502
|
-
\`> **
|
|
523
|
+
\`> **Blueprint Anchor:** Extracted from ./starter-preview.html using tokens from ./tokens.css.\`
|
|
503
524
|
|
|
504
525
|
---
|
|
505
526
|
|
|
@@ -612,10 +633,12 @@ You are the design governance engine for this codebase. Every UI decision must p
|
|
|
612
633
|
### 11. Fix-Forward & 2-Pass Revision Budget
|
|
613
634
|
- **Fix-Forward:** Resolve visual or ergonomic issues by updating \`./tokens.css\` or removing clutter\u2014**never** by adding wrapper elements, extra containers, or ad-hoc overrides.
|
|
614
635
|
- **Revision Budget:** Maximum **2 iterative revision passes** per feature. Track each pass in \`DESIGN.md\` Section 6.
|
|
615
|
-
- Log non-blocking enhancements into \`DESIGN.md\` Section 8 (**Polish Backlog**) rather than burning turns on infinite micro-tweaks.`}async function se(e){let{targetDir:t,agents:s}=e;if(await D.ensureDir(t),!e.fontOverride){let p=await
|
|
616
|
-
`),n=!1,c=0,d=0,m="",p=new Map;for(let v=0;v<i.length;v++){let r=i[v],l=v+1,o=r.trim();/<(?:header|nav)\b/i.test(r)&&(n=!0),/<\/(?:header|nav)>/i.test(r)&&(n=!1);let u=r.includes("/* @design-exception")||r.includes("/* @design-signature")||r.includes("// @design-exception")||r.includes("// @design-signature");if(!g&&!u){Ke.test(r)&&s.push({file:a,rule:"tokens/no-hardcoded-color-radius",line:l,snippet:o,message:"Hardcoded color function (rgb, hsl, oklch) found outside tokens.css without @design-exception",severity:"error"});let b=r.match(We);if(b)for(let C of b){let A=r.indexOf(C);A>0&&/[a-zA-Z0-9_-]/.test(r[A-1])||s.push({file:a,rule:"tokens/no-hardcoded-color-radius",line:l,snippet:o,message:`Hardcoded hex color '${C}' found outside tokens.css without @design-exception`,severity:"error"})}}r.includes("animate-ping")&&s.push({file:a,rule:"slop/no-animate-ping",line:l,snippet:o,message:'Banned attention-seeking animation "animate-ping" detected',severity:"error"}),qe.test(r)&&!u&&s.push({file:a,rule:"slop/no-ai-gradient",line:l,snippet:o,message:"Banned AI clich\xE9 gradient (purple/pink mesh) detected",severity:"error"});let x=r.toLowerCase();for(let b of _e)if(x.includes(b)&&!r.includes("rule")&&!r.includes("banned")){s.push({file:a,rule:"copy/banned-phrases-and-leakage",line:l,snippet:o,message:`Self-referential or marketing copy clich\xE9 detected: "${b}"`,severity:"error"});break}if(!r.includes("regex")&&!r.includes("banned")&&!r.includes("Banned")&&!r.includes("Rule")&&(/^\s*0[1-9]\s*\/\s*[A-Z]/.test(o)||/>?\s*0[1-9]\s*\/\s*[A-Z]/.test(r))&&s.push({file:a,rule:"copy/banned-phrases-and-leakage",line:l,snippet:o,message:'Numbered slash eyebrow (e.g. "01 / ...") detected above headings or in UI markup',severity:"error"}),n&&tt.test(r)&&!u&&!f&&s.push({file:a,rule:"slop/no-decorative-badges",line:l,snippet:o,message:"Banned decorative badge/pill/chip detected inside <header> or <nav>",severity:"error"}),!u&&!f&&!r.includes("rule")&&!r.includes("banned")&&(Ye.test(r)?s.push({file:a,rule:"slop/no-fake-telemetry-cosplay",line:l,snippet:o,message:"Fake product tier/version badge (e.g. [PRO v2.4], [BETA]) detected",severity:"error"}):Ze.test(r)&&s.push({file:a,rule:"slop/no-fake-telemetry-cosplay",line:l,snippet:o,message:"Fake hardware telemetry or sci-fi cosplay copy detected",severity:"error"})),!u&&!f&&!r.includes("rule")&&!r.includes("banned")&&!r.includes("ban")){let b=Je.test(r),C=Xe.test(r)&&Qe.test(r);(b||C)&&s.push({file:a,rule:"slop/no-image-corner-badges",line:l,snippet:o,message:b?"Banned media/product overlay badge text detected. Keep media uncluttered without floating corner status pills.":"Floating corner badge/pill overlay detected. Never place floating status pills on top of cards, media, or product images.",severity:"error"})}if(!u&&!f&&!r.includes("rule")&&!r.includes("banned")){let b=r.match(nt);if(b)for(let C of b){let A=it(C);if(p.has(A)){let P=p.get(A);s.push({file:a,rule:"data/no-duplicate-image-urls",line:l,snippet:o,message:`Duplicate image asset detected ("${A}", originally defined on line ${P}). Every distinct record in a UI dataset must have a unique visual asset/URL.`,severity:"warning"})}else p.set(A,l)}}et.test(r)&&!u&&!r.includes('"zero" 0')&&!g&&!f&&s.push({file:a,rule:"slop/no-slashed-zero",line:l,snippet:o,message:'Banned slashed-zero numeric styling detected. Use open-oval zeros with "zero" 0',severity:"error"}),!g&&!f&&!u&&(rt.test(r)&&s.push({file:a,rule:"a11y/no-micro-text",line:l,snippet:o,message:"Unreadable micro-text detected (< 13px). Maintain minimum 13px (0.8125rem) floor for human readability.",severity:"error"}),st.test(r)&&s.push({file:a,rule:"a11y/no-micro-text",line:l,snippet:o,message:"Low-contrast dim text class detected. Use high-contrast var(--text-secondary) or var(--text-muted) instead of raw gray or low opacity.",severity:"error"})),Ve.test(r)&&!u&&!r.includes("no \u{1F680}")&&!r.includes("Banned")&&s.push({file:a,rule:"slop/no-emoji-icons",line:l,snippet:o,message:"Emoji character used as UI icon detected",severity:"error"}),at.test(r)&&!u&&!f&&(c++,d||(d=l,m=o))}c>3&&s.push({file:a,rule:"slop/excessive-uppercase-labels",line:d,snippet:m,message:`Excessive uppercase micro-labels detected (${c} occurrences, maximum allowed is 3). Cure UPPERCASE MICRO-LABEL disease by using normal sentence case.`,severity:"warning"})}import{fileURLToPath as dt}from"url";var z=new lt;z.name("agent-design-skills").description("v1.1 CLI and design-governance registry eliminating AI UI slop and enforcing cross-page unity").version("1.1.3");async function Se(e){let t=[];return(await q.pathExists(F.resolve(e,".agent"))||await q.pathExists(F.resolve(e,".agents")))&&t.push("antigravity"),await q.pathExists(F.resolve(e,".cursor"))&&t.push("cursor"),(await q.pathExists(F.resolve(e,"CLAUDE.md"))||await q.pathExists(F.resolve(e,"AGENTS.md")))&&t.push("claude-codex"),t.length>0?t:["antigravity"]}var ct=[{value:"dark-obsidian-technical",label:"Dark Obsidian Technical",hint:"1px hairlines, carbon hue 250, forensic developer/settlement console"},{value:"swiss-typographic-grid",label:"Swiss Typographic Grid",hint:"Light, exposed 1px grid lines, Cabinet Grotesk / Space Grotesk"},{value:"kinetic-industrial-mono",label:"Kinetic Industrial Mono",hint:"Dark, tabular telemetry, JetBrains Mono, amber accents"},{value:"bento-modular-system",label:"Bento Modular System",hint:"Adaptive 12-col bento cells, Satoshi / General Sans"},{value:"spatial-glass-visionos",label:"Spatial Glass VisionOS",hint:"Translucent optical blur, Outfit / DM Sans, specular highlights"},{value:"editorial-serif-paper",label:"Editorial Serif Paper",hint:"Warm bone paper, broadsheet typography, high-craft publication"},{value:"quiet-luxury-atelier",label:"Quiet Luxury Atelier",hint:"Whisper-quiet prestige, Cormorant Garamond / DM Sans, warm ivory"},{value:"warm-artisan-craft",label:"Warm Artisan Craft",hint:"Earthy linen, Fraunces / Cabinet Grotesk, terracotta accents"},{value:"japanese-minimal-zen",label:"Japanese Minimal Zen",hint:"Ma negative space, Noto Serif Display / Work Sans, washi mist"},{value:"scandinavian-warm-minimal",label:"Scandinavian Warm Minimal",hint:"Oat/birch canvas, Familjen Grotesk / DM Sans, spruce accents"},{value:"neo-brutalism",label:"Neo-Brutalist Studio",hint:"Hard 2px borders, stark offset shadows, raw tactile accents"},{value:"retro-tactile-analog",label:"Retro Tactile Analog",hint:"Physical bevels, Space Mono / DM Sans, Teenage Engineering vibe"},{value:"y2k-acid-cyber",label:"Y2K Acid Cyber",hint:"Electric chartreuse on pitch black, VT323 / Syne Mono"},{value:"playful-clay-consumer",label:"Playful Clay Consumer",hint:"Tactile dual-layer shadows, Bricolage Grotesque / Plus Sans"},{value:"vaporwave-crt-terminal",label:"Vaporwave CRT Terminal",hint:"Phosphorescent cyan & magenta on indigo void, scanlines"},{value:"high-trust-fintech-clarity",label:"High-Trust Fintech Clarity",hint:"Enterprise navy, Sora / Public Sans, tabular numbers"},{value:"clinical-biotech-precision",label:"Clinical Biotech Precision",hint:"Sterile lab white, Geist / Space Mono, cold cyan"},{value:"civic-govtech-accessible",label:"Civic Govtech Accessible",hint:"WCAG AAA contrast, Atkinson Hyperlegible / DM Sans"}];z.command("init",{isDefault:!0}).description("Scaffold a design token contract, starter kit, and agent governance rules").option("-a, --agents <agents>",'Target agents (comma-separated or "all": antigravity, cursor, claude-codex, web-builders)').option("-f, --fast","Fast mode with sensible defaults (dark-obsidian-technical, antigravity)").option("-t, --archetype <archetype>","Canonical archetype ID").option("-s, --starter-kit <kit>","Pre-baked starter kit: dashboard, landing-waitlist, mobile-app, data-tool").option("-m, --mode <mode>","Installation mode: modular or single","modular").option("-F, --fonts <mode>",'Font selection mode: A, B, C, keep, or comma-separated "Display,Sans,Mono"').option("-d, --dir <dir>","Target directory",".").option("-y, --yes","Accept defaults without interactive prompts").action(async e=>{let t=F.resolve(process.cwd(),e.dir||"."),s=F.basename(t)||"my-project",a,g;if(e.fonts){let r=e.fonts.trim(),l=r.toUpperCase();if(l==="A"||l==="B"||l==="C")a=l;else if(r.toLowerCase()==="keep")a="keep";else if(r.includes(",")){let o=r.split(",").map(u=>u.trim());a="custom",g={display:o[0]||void 0,sans:o[1]||void 0,mono:o[2]||void 0,source:"user"}}else a="custom",g={display:r,sans:r,source:"user"}}let f=null;if(e.agents&&(e.agents.toLowerCase()==="all"?f=["antigravity","cursor","claude-codex","web-builders"]:f=e.agents.split(",").map(r=>r.trim())),e.fast||e.yes){w.intro(`${k.bgWhite(k.black(" \u26A1 agent-design-skills "))} ${k.dim("v1.1.0 [EXPRESS MODE]")}`);let r=w.spinner();r.start(`Compiling design system in ${t}...`);let l=e.starterKit||"dashboard",o=f||await Se(t),u={projectName:s,targetDir:t,agents:o,archetype:e.archetype||"dark-obsidian-technical",feeling:"urgent-precise",radius:"subtle",blur:"subtle-frost",mode:e.mode||"modular",starterKit:l,fontMode:a,fontOverride:g,customDirection:"Needs to feel like a high-precision developer settlement console, crisp 1px hairlines, zero marketing fluff",productBrief:"High-precision operational workspace and data reconciliation platform",fast:!0},x=await se(u);r.stop(`Scaffolded ${x.createdFiles.length} files successfully.`);for(let b of x.createdFiles)console.log(` ${k.green("\u2714")} ${k.dim(F.relative(t,b))}`);w.outro(k.green(`\u2728 Initialization complete for ${u.agents.join(", ")}. Token contract & starter preview active.`));return}console.clear(),w.intro(`${k.bgWhite(k.black(" \u26A1 agent-design-skills "))} ${k.dim("v1.1.0")}`);let y=await Se(t),i=await Z(t),n=await w.group({agents:()=>f?Promise.resolve(f):w.multiselect({message:"Which AI coding agent(s) are you using?",options:[{value:"antigravity",label:"Antigravity",hint:".agent/rules/ & .agent/skills/"},{value:"cursor",label:"Cursor",hint:".cursor/rules/"},{value:"claude-codex",label:"Codex / Claude Code",hint:"CLAUDE.md / AGENTS.md"},{value:"web-builders",label:"Web Builders (v0 / Bolt / Lovable)",hint:"DESIGN-PROMPT.md"}],initialValues:y,required:!0}),archetype:()=>e.archetype?Promise.resolve(e.archetype):w.select({message:"Choose a human-crafted design archetype:",options:ct}),typography:async({results:r})=>{if(a||g)return a||"custom";let l=r.archetype||e.archetype||"dark-obsidian-technical",o=_[l]||_["dark-obsidian-technical"],u=[];if(i&&(i.display||i.sans||i.mono)){let x=[i.display,i.sans,i.mono].filter(Boolean).map(T).join(" / ");u.push({value:"keep",label:"Keep existing project fonts",hint:x})}return u.push({value:"A",label:`Pairing A (Default): ${o.A.display} + ${o.A.sans} + ${o.A.mono}`,hint:"Archetype primary pairing"},{value:"B",label:`Pairing B: ${o.B.display} + ${o.B.sans} + ${o.B.mono}`,hint:"Alternative character"},{value:"C",label:`Pairing C: ${o.C.display} + ${o.C.sans} + ${o.C.mono}`,hint:"Alternative character"},{value:"custom",label:"Custom font families (specify Display, Sans, Mono)",hint:"Type custom Google Fonts or Fontshare families"}),w.select({message:"Select typography & font pairing:",options:u,initialValue:i&&(i.display||i.sans||i.mono)?"keep":"A"})},starterKit:()=>w.select({message:"Choose a token-wired starter kit preview:",options:[{value:"dashboard",label:"High-Density Workspace Dashboard",hint:"Workspace shell, summary strip, data table, drawer"},{value:"landing-waitlist",label:"Editorial Landing & Waitlist",hint:"Narrative hero, live preview artifact, waitlist form"},{value:"mobile-app",label:"Mobile-First Application",hint:"375px\u2013430px frame, thumb nav, bottom sheet"},{value:"data-tool",label:"Split-Pane Query Explorer & Tool",hint:"Split query/inspector, \u2318K command bar, tabular nums"},{value:"none",label:"None (Blank Token Contract)",hint:"Pure tokens and governance rules only"}]}),mode:()=>w.select({message:"Installation mode for skills & rules:",options:[{value:"modular",label:"Modular Skills (Recommended)",hint:"Core rules + task-scoped reference guides"},{value:"single",label:"Single Master File",hint:"Combined master reference file"}]}),feeling:()=>w.select({message:"Select sensory motion & timing vector:",options:[{value:"urgent-precise",label:"Urgent & Precise (110ms / 180ms)",hint:"Forensic, snappy, zero bounce"},{value:"calm",label:"Calm & Measured (140ms / 240ms)",hint:"Literary ease, smooth"},{value:"playful-tactile",label:"Playful & Tactile (80ms / 150ms)",hint:"Punchy press states"},{value:"authoritative",label:"Authoritative (120ms / 200ms)",hint:"Institutional stability"}]}),radius:()=>w.select({message:"Select geometric corner radius scale:",options:[{value:"subtle",label:"Subtle (6px outer / 4px inner)",hint:"Standard technical scale"},{value:"sharp",label:"Sharp (0px outer / 0px inner)",hint:"Zero radius / architectural"},{value:"medium",label:"Medium (10px outer / 6px inner)",hint:"Soft modern SaaS"},{value:"high",label:"High (16px outer / 10px inner)",hint:"Friendly consumer scale"},{value:"pill",label:"Pill (9999px)",hint:"Capsule components"}]}),blur:()=>w.select({message:"Select surface blur depth:",options:[{value:"subtle-frost",label:"Subtle Frost (8px)",hint:"Hairline glass backdrops"},{value:"flat",label:"Flat (0px)",hint:"Zero blur, pure solid fills"},{value:"deep-glass",label:"Deep Glass (20px)",hint:"Heavy frosted glass"}]}),customDirection:()=>w.text({message:"Custom Creative Direction & Anti-Drift Mandate (Section 0):",placeholder:"Needs to feel like a high-precision developer settlement console, crisp 1px hairlines, zero marketing fluff",initialValue:"Needs to feel like a high-precision developer settlement console, crisp 1px hairlines, zero marketing fluff"})},{onCancel:()=>{w.cancel("Setup cancelled."),process.exit(0)}}),c=a||n.typography||"A",d=g;if(n.typography==="keep"&&!d&&i)d=i;else if(n.typography==="custom"&&!d){let r=await w.text({message:'Enter --font-display family (e.g. "Cabinet Grotesk" or "Cormorant Garamond"):',placeholder:"Sora",validate:u=>u?.trim()?void 0:"Display font family is required"});w.isCancel(r)&&(w.cancel("Setup cancelled."),process.exit(0));let l=await w.text({message:'Enter --font-sans family (e.g. "Instrument Sans" or "Public Sans"):',placeholder:"Instrument Sans",validate:u=>u?.trim()?void 0:"Sans font family is required"});w.isCancel(l)&&(w.cancel("Setup cancelled."),process.exit(0));let o=await w.text({message:'Enter --font-mono family (e.g. "Geist Mono" or "JetBrains Mono"):',placeholder:"JetBrains Mono",validate:u=>u?.trim()?void 0:"Mono font family is required"});w.isCancel(o)&&(w.cancel("Setup cancelled."),process.exit(0)),d={display:r.trim(),sans:l.trim(),mono:o.trim(),source:"user"}}let m=w.spinner();m.start("Compiling tokens and governance contract...");let p={projectName:s,targetDir:t,agents:n.agents||f||y,archetype:n.archetype,feeling:n.feeling,radius:n.radius,blur:n.blur,fontMode:c,fontOverride:d,mode:n.mode,starterKit:n.starterKit!=="none"?n.starterKit:void 0,customDirection:n.customDirection},v=await se(p);m.stop(`Compiled ${v.createdFiles.length} files successfully.`);for(let r of v.createdFiles)console.log(` ${k.green("\u2714")} ${k.dim(F.relative(t,r))}`);w.outro(`${k.green("\u2714")} Initialized ${k.bold(p.archetype)} for ${k.cyan(p.agents.join(", "))}`)});z.command("lint [dir]").description("Lint directory for hardcoded colors, AI slop, banned copy, and hash freeze integrity").action(async e=>{let t=F.resolve(process.cwd(),e||".");console.log(`${k.bgBlue(k.black(" LINT "))} Scanning ${k.bold(t)}...
|
|
617
|
-
`);let
|
|
618
|
-
`),process.
|
|
619
|
-
`);
|
|
620
|
-
`),process.exit(
|
|
621
|
-
|
|
636
|
+
- Log non-blocking enhancements into \`DESIGN.md\` Section 8 (**Polish Backlog**) rather than burning turns on infinite micro-tweaks.`}async function se(e){let{targetDir:t,agents:s}=e;if(await D.ensureDir(t),!e.fontOverride){let p=await J(t);p&&(!e.fontMode||e.fontMode==="keep")&&(e={...e,fontMode:"keep",fontOverride:p})}let r=[],{css:g,json:f}=le(e),y=I.resolve(t,"tokens.css"),i=I.resolve(t,"tokens.json");await D.writeFile(y,g,"utf-8"),r.push(y),await D.writeJSON(i,f,{spaces:2}),r.push(i);let n=I.resolve(t,"DESIGN.md"),c;await D.pathExists(n)&&(c=await D.readFile(n,"utf-8"));let d=ce(e,c);if(await D.writeFile(n,d,"utf-8"),r.push(n),e.starterKit){let p=await Ue(),v=I.resolve(p,"starter-kits",e.starterKit,"template.html");if(await D.pathExists(v)){let a=I.resolve(t,"starter-preview.html");await D.copy(v,a),r.push(a)}}let m=He(e);for(let p of s)if(p==="antigravity"){let v=await pe(t,e,m);r.push(...v)}else if(p==="cursor"){let v=await ue(t,e,m);r.push(...v)}else if(p==="claude-codex"){let v=await ge(t,e,m);r.push(...v)}else if(p==="web-builders"){let v=await fe(t,e,m);r.push(v)}return{createdFiles:r}}import ke from"fs-extra";import X from"pathe";import R from"fs-extra";import K from"pathe";import je from"crypto";var ne=".design-skills.lock";async function ye(e){let t=await R.readFile(e,"utf-8");return je.createHash("sha256").update(t).digest("hex")}async function ve(e){let t=["tokens.css","tokens.json","DESIGN.md","DESIGN-PROMPT.md",".agent/rules/design-core.md",".agents/rules/design-core.md",".agent/skills/design-system/SKILL.md",".agents/skills/design-system/SKILL.md",".cursor/rules/00-design-core.mdc",".cursor/rules/design-core.mdc","CLAUDE.md","AGENTS.md"],s={};for(let f of t){let y=K.resolve(e,f);await R.pathExists(y)&&(s[f]=await ye(y))}let r={version:"1.1.0",generatedAt:new Date().toISOString(),hashes:s},g=K.resolve(e,ne);return await R.writeJSON(g,r,{spaces:2}),r}async function be(e){let t=K.resolve(e,ne);return await R.pathExists(t)?(await R.remove(t),!0):!1}async function we(e){let t=K.resolve(e,ne);if(!await R.pathExists(t))return{locked:!1,valid:!0,modifiedFiles:[]};let s=await R.readJSON(t),r=[];for(let[g,f]of Object.entries(s.hashes)){let y=K.resolve(e,g);if(!await R.pathExists(y)){r.push(`${g} (deleted)`);continue}await ye(y)!==f&&r.push(g)}return{locked:!0,valid:r.length===0,modifiedFiles:r}}var _e=["hover to reveal","click here","smooth animations","built with react","powered by react","ai-powered","supercharge","one-click","magical","say goodbye to"],Ve=/[\u{1F300}-\u{1F5FF}\u{1F600}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1FA70}-\u{1FAFF}]/u,We=/#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})(?=[;,\s)'"`}\]]|$)/g,Ke=/\b(?:rgba?|hsla?|oklch)\s*\(/i,qe=/(?:from-purple|to-pink|from-indigo.*to-purple|from-cyan.*to-purple|radial-gradient\([^)]*(?:purple|#7[0-9a-f]{5}|oklch\([^)]*290\)))/i,Ye=/\[(PRO|BETA|v\d+\.\d+)\]/i,Je=/\b(SUB-\d+MS|TEMPORAL ENGINE|MASTER CHRONOMETER|CHRONO SYNC|LOCAL REFERENCE|\d+\s*FPS|EPOCH)\b/i,Xe=/\b(NOW PLAYING|•\s*PLAYING|HD\s*1080P|4K\s*HDR|120\s*FPS|HI-RES\s*AUDIO|LIVE\s*CINEMATIC|BESTSELLER|HOT\s*SALE|LIMITED\s*TIME)\b/i,Ze=/\babsolute\b[^"']*\b(?:top-(?:1|2|3|4|5|6|8)|top-\[[^\]]+\])\b[^"']*\b(?:left|right)-(?:1|2|3|4|5|6|8)\b|\babsolute\b[^"']*\b(?:left|right)-(?:1|2|3|4|5|6|8)\b[^"']*\b(?:top-(?:1|2|3|4|5|6|8)|top-\[[^\]]+\])\b/i,Qe=/\b(rounded-full|uppercase|tracking-[a-z0-9_-]+|text-xs|badge|pill|chip)\b/i,et=/slashed-zero|font-feature-settings:[^;]*["']zero["']\s*1/i,tt=/class(?:Name)?=["'][^"']*\b(badge|pill|chip|tag-chip|status-badge|header-badge)\b[^"']*["']/i,rt=/(?:class(?:Name)?=["'][^"']*\buppercase\b[^"']*\btracking-[^"']*["']|class(?:Name)?=["'][^"']*\btracking-[^"']*\buppercase\b[^"']*["']|\btext-transform:\s*uppercase\b[^;]*letter-spacing)/i,at=/(?:\btext-\[(?:8|9|10|11)px\]|\bfont-size:\s*(?:8|9|10|11)px\b)/i,st=/\b(text-zinc-500|text-slate-500|text-gray-500|opacity-30|opacity-40)\b/i,nt=/https?:\/\/[^\s"'`]+\.(?:png|jpe?g|webp|avif|svg)(?:\?[^\s"'`]*)?|https?:\/\/(?:images\.)?unsplash\.com\/[^\s"'`]+/gi;function it(e){let t=e.match(/(?:premium_)?photo-[a-zA-Z0-9_-]+/i);return t?t[0].toLowerCase():e.split("?")[0].split("#")[0].toLowerCase()}async function Se(e){let t=[],s=0,r=await we(e);if(r.locked&&!r.valid)for(let y of r.modifiedFiles)t.push({file:y,rule:"freeze/hash-integrity",line:1,snippet:y,message:`File was modified without running unfreeze: ${y}`,severity:"error"});let g=[".html",".css",".js",".ts",".jsx",".tsx",".vue",".svelte"];async function f(y){let i=await ke.readdir(y,{withFileTypes:!0});for(let n of i){let c=X.resolve(y,n.name);if(n.isDirectory()){if(["node_modules",".git","dist",".gemini",".turbo"].includes(n.name))continue;await f(c)}else if(n.isFile()){let d=X.extname(n.name).toLowerCase();g.includes(d)&&(await ot(c,e,t),s++)}}}return await f(e),{targetDir:e,violations:t,filesScanned:s,passed:t.filter(y=>y.severity==="error").length===0}}async function ot(e,t,s){let r=X.relative(t,e),g=X.basename(e)==="tokens.css",f=e.includes(".agent")||e.includes(".cursor")||e.includes("DESIGN.md")||e.includes("README.md")||e.includes("core"),i=(await ke.readFile(e,"utf-8")).split(`
|
|
637
|
+
`),n=!1,c=0,d=0,m="",p=new Map;for(let v=0;v<i.length;v++){let a=i[v],l=v+1,o=a.trim();/<(?:header|nav)\b/i.test(a)&&(n=!0),/<\/(?:header|nav)>/i.test(a)&&(n=!1);let u=a.includes("/* @design-exception")||a.includes("/* @design-signature")||a.includes("// @design-exception")||a.includes("// @design-signature");if(!g&&!u){Ke.test(a)&&s.push({file:r,rule:"tokens/no-hardcoded-color-radius",line:l,snippet:o,message:"Hardcoded color function (rgb, hsl, oklch) found outside tokens.css without @design-exception",severity:"error"});let w=a.match(We);if(w)for(let C of w){let A=a.indexOf(C);A>0&&/[a-zA-Z0-9_-]/.test(a[A-1])||s.push({file:r,rule:"tokens/no-hardcoded-color-radius",line:l,snippet:o,message:`Hardcoded hex color '${C}' found outside tokens.css without @design-exception`,severity:"error"})}}a.includes("animate-ping")&&s.push({file:r,rule:"slop/no-animate-ping",line:l,snippet:o,message:'Banned attention-seeking animation "animate-ping" detected',severity:"error"}),qe.test(a)&&!u&&s.push({file:r,rule:"slop/no-ai-gradient",line:l,snippet:o,message:"Banned AI clich\xE9 gradient (purple/pink mesh) detected",severity:"error"});let S=a.toLowerCase();for(let w of _e)if(S.includes(w)&&!a.includes("rule")&&!a.includes("banned")){s.push({file:r,rule:"copy/banned-phrases-and-leakage",line:l,snippet:o,message:`Self-referential or marketing copy clich\xE9 detected: "${w}"`,severity:"error"});break}if(!a.includes("regex")&&!a.includes("banned")&&!a.includes("Banned")&&!a.includes("Rule")&&(/^\s*0[1-9]\s*\/\s*[A-Z]/.test(o)||/>?\s*0[1-9]\s*\/\s*[A-Z]/.test(a))&&s.push({file:r,rule:"copy/banned-phrases-and-leakage",line:l,snippet:o,message:'Numbered slash eyebrow (e.g. "01 / ...") detected above headings or in UI markup',severity:"error"}),n&&tt.test(a)&&!u&&!f&&s.push({file:r,rule:"slop/no-decorative-badges",line:l,snippet:o,message:"Banned decorative badge/pill/chip detected inside <header> or <nav>",severity:"error"}),!u&&!f&&!a.includes("rule")&&!a.includes("banned")&&(Ye.test(a)?s.push({file:r,rule:"slop/no-fake-telemetry-cosplay",line:l,snippet:o,message:"Fake product tier/version badge (e.g. [PRO v2.4], [BETA]) detected",severity:"error"}):Je.test(a)&&s.push({file:r,rule:"slop/no-fake-telemetry-cosplay",line:l,snippet:o,message:"Fake hardware telemetry or sci-fi cosplay copy detected",severity:"error"})),!u&&!f&&!a.includes("rule")&&!a.includes("banned")&&!a.includes("ban")){let w=Xe.test(a),C=Ze.test(a)&&Qe.test(a);(w||C)&&s.push({file:r,rule:"slop/no-image-corner-badges",line:l,snippet:o,message:w?"Banned media/product overlay badge text detected. Keep media uncluttered without floating corner status pills.":"Floating corner badge/pill overlay detected. Never place floating status pills on top of cards, media, or product images.",severity:"error"})}if(!u&&!f&&!a.includes("rule")&&!a.includes("banned")){let w=a.match(nt);if(w)for(let C of w){let A=it(C);if(p.has(A)){let T=p.get(A);s.push({file:r,rule:"data/no-duplicate-image-urls",line:l,snippet:o,message:`Duplicate image asset detected ("${A}", originally defined on line ${T}). Every distinct record in a UI dataset must have a unique visual asset/URL.`,severity:"warning"})}else p.set(A,l)}}et.test(a)&&!u&&!a.includes('"zero" 0')&&!g&&!f&&s.push({file:r,rule:"slop/no-slashed-zero",line:l,snippet:o,message:'Banned slashed-zero numeric styling detected. Use open-oval zeros with "zero" 0',severity:"error"}),!g&&!f&&!u&&(at.test(a)&&s.push({file:r,rule:"a11y/no-micro-text",line:l,snippet:o,message:"Unreadable micro-text detected (< 13px). Maintain minimum 13px (0.8125rem) floor for human readability.",severity:"error"}),st.test(a)&&s.push({file:r,rule:"a11y/no-micro-text",line:l,snippet:o,message:"Low-contrast dim text class detected. Use high-contrast var(--text-secondary) or var(--text-muted) instead of raw gray or low opacity.",severity:"error"})),Ve.test(a)&&!u&&!a.includes("no \u{1F680}")&&!a.includes("Banned")&&s.push({file:r,rule:"slop/no-emoji-icons",line:l,snippet:o,message:"Emoji character used as UI icon detected",severity:"error"}),rt.test(a)&&!u&&!f&&(c++,d||(d=l,m=o))}c>3&&s.push({file:r,rule:"slop/excessive-uppercase-labels",line:d,snippet:m,message:`Excessive uppercase micro-labels detected (${c} occurrences, maximum allowed is 3). Cure UPPERCASE MICRO-LABEL disease by using normal sentence case.`,severity:"warning"})}import{fileURLToPath as dt}from"url";var z=new lt;z.name("agent-design-skills").description("v1.1 CLI and design-governance registry eliminating AI UI slop and enforcing cross-page unity").version("1.1.4");async function xe(e){let t=[];return(await q.pathExists(F.resolve(e,".agent"))||await q.pathExists(F.resolve(e,".agents")))&&t.push("antigravity"),await q.pathExists(F.resolve(e,".cursor"))&&t.push("cursor"),(await q.pathExists(F.resolve(e,"CLAUDE.md"))||await q.pathExists(F.resolve(e,"AGENTS.md")))&&t.push("claude-codex"),t.length>0?t:["antigravity"]}var ct=[{value:"dark-obsidian-technical",label:"Dark Obsidian Technical",hint:"1px hairlines, carbon hue 250, forensic developer/settlement console"},{value:"swiss-typographic-grid",label:"Swiss Typographic Grid",hint:"Light, exposed 1px grid lines, Cabinet Grotesk / Space Grotesk"},{value:"kinetic-industrial-mono",label:"Kinetic Industrial Mono",hint:"Dark, tabular telemetry, JetBrains Mono, amber accents"},{value:"bento-modular-system",label:"Bento Modular System",hint:"Adaptive 12-col bento cells, Satoshi / General Sans"},{value:"spatial-glass-visionos",label:"Spatial Glass VisionOS",hint:"Translucent optical blur, Outfit / DM Sans, specular highlights"},{value:"editorial-serif-paper",label:"Editorial Serif Paper",hint:"Warm bone paper, broadsheet typography, high-craft publication"},{value:"quiet-luxury-atelier",label:"Quiet Luxury Atelier",hint:"Whisper-quiet prestige, Cormorant Garamond / DM Sans, warm ivory"},{value:"warm-artisan-craft",label:"Warm Artisan Craft",hint:"Earthy linen, Fraunces / Cabinet Grotesk, terracotta accents"},{value:"japanese-minimal-zen",label:"Japanese Minimal Zen",hint:"Ma negative space, Noto Serif Display / Work Sans, washi mist"},{value:"scandinavian-warm-minimal",label:"Scandinavian Warm Minimal",hint:"Oat/birch canvas, Familjen Grotesk / DM Sans, spruce accents"},{value:"neo-brutalism",label:"Neo-Brutalist Studio",hint:"Hard 2px borders, stark offset shadows, raw tactile accents"},{value:"retro-tactile-analog",label:"Retro Tactile Analog",hint:"Physical bevels, Space Mono / DM Sans, Teenage Engineering vibe"},{value:"y2k-acid-cyber",label:"Y2K Acid Cyber",hint:"Electric chartreuse on pitch black, VT323 / Syne Mono"},{value:"playful-clay-consumer",label:"Playful Clay Consumer",hint:"Tactile dual-layer shadows, Bricolage Grotesque / Plus Sans"},{value:"vaporwave-crt-terminal",label:"Vaporwave CRT Terminal",hint:"Phosphorescent cyan & magenta on indigo void, scanlines"},{value:"high-trust-fintech-clarity",label:"High-Trust Fintech Clarity",hint:"Enterprise navy, Sora / Public Sans, tabular numbers"},{value:"clinical-biotech-precision",label:"Clinical Biotech Precision",hint:"Sterile lab white, Geist / Space Mono, cold cyan"},{value:"civic-govtech-accessible",label:"Civic Govtech Accessible",hint:"WCAG AAA contrast, Atkinson Hyperlegible / DM Sans"}];z.command("init",{isDefault:!0}).description("Scaffold a design token contract, starter kit, and agent governance rules").option("-a, --agents <agents>",'Target agents (comma-separated or "all": antigravity, cursor, claude-codex, web-builders)').option("-f, --fast","Fast mode with sensible defaults (dark-obsidian-technical, antigravity)").option("-t, --archetype <archetype>","Canonical archetype ID").option("-s, --starter-kit <kit>","Pre-baked starter kit: dashboard, landing-waitlist, mobile-app, data-tool").option("-m, --mode <mode>","Installation mode: modular or single","modular").option("-F, --fonts <mode>",'Font selection mode: A, B, C, keep, or comma-separated "Display,Sans,Mono"').option("-d, --dir <dir>","Target directory",".").option("-y, --yes","Accept defaults without interactive prompts").action(async e=>{let t=F.resolve(process.cwd(),e.dir||"."),s=F.basename(t)||"my-project",r,g;if(e.fonts){let a=e.fonts.trim(),l=a.toUpperCase();if(l==="A"||l==="B"||l==="C")r=l;else if(a.toLowerCase()==="keep")r="keep";else if(a.includes(",")){let o=a.split(",").map(u=>u.trim());r="custom",g={display:o[0]||void 0,sans:o[1]||void 0,mono:o[2]||void 0,source:"user"}}else r="custom",g={display:a,sans:a,source:"user"}}let f=null;if(e.agents&&(e.agents.toLowerCase()==="all"?f=["antigravity","cursor","claude-codex","web-builders"]:f=e.agents.split(",").map(a=>a.trim())),e.fast||e.yes){k.intro(`${b.bgWhite(b.black(" \u26A1 agent-design-skills "))} ${b.dim("v1.1.3 [EXPRESS MODE]")}`);let a=k.spinner();a.start(`Compiling design system in ${t}...`);let l=e.starterKit||"dashboard",o=f||await xe(t),u={projectName:s,targetDir:t,agents:o,archetype:e.archetype||"dark-obsidian-technical",feeling:"urgent-precise",radius:"subtle",blur:"subtle-frost",mode:e.mode||"modular",starterKit:l,fontMode:r,fontOverride:g,customDirection:"Needs to feel like a high-precision developer settlement console, crisp 1px hairlines, zero marketing fluff",productBrief:"High-precision operational workspace and data reconciliation platform",fast:!0},S=await se(u);a.stop(`Scaffolded ${S.createdFiles.length} files successfully.`);for(let w of S.createdFiles)console.log(` ${b.green("\u2714")} ${b.dim(F.relative(t,w))}`);k.outro(b.green(`\u2728 Initialization complete for ${u.agents.join(", ")}. Token contract & starter preview active.`)),console.log(`${b.bold(b.cyan("\u{1F4A1} Agent Blueprint Tip:"))} Tell your AI agent ${b.yellow('"Inspect ./starter-preview.html first before creating components"')} to ensure it reuses the pre-built layout and component architecture!
|
|
638
|
+
`);return}console.clear(),k.intro(`${b.bgWhite(b.black(" \u26A1 agent-design-skills "))} ${b.dim("v1.1.3")}`);let y=await xe(t),i=await J(t),n=await k.group({agents:()=>f?Promise.resolve(f):k.multiselect({message:"Which AI coding agent(s) are you using?",options:[{value:"antigravity",label:"Antigravity",hint:".agent/rules/ & .agent/skills/"},{value:"cursor",label:"Cursor",hint:".cursor/rules/"},{value:"claude-codex",label:"Codex / Claude Code",hint:"CLAUDE.md / AGENTS.md"},{value:"web-builders",label:"Web Builders (v0 / Bolt / Lovable)",hint:"DESIGN-PROMPT.md"}],initialValues:y,required:!0}),archetype:()=>e.archetype?Promise.resolve(e.archetype):k.select({message:"Choose a human-crafted design archetype:",options:ct}),typography:async({results:a})=>{if(r||g)return r||"custom";let l=a.archetype||e.archetype||"dark-obsidian-technical",o=_[l]||_["dark-obsidian-technical"],u=[];if(i&&(i.display||i.sans||i.mono)){let S=[i.display,i.sans,i.mono].filter(Boolean).map(P).join(" / ");u.push({value:"keep",label:"Keep existing project fonts",hint:S})}return u.push({value:"A",label:`Pairing A (Default): ${o.A.display} + ${o.A.sans} + ${o.A.mono}`,hint:"Archetype primary pairing"},{value:"B",label:`Pairing B: ${o.B.display} + ${o.B.sans} + ${o.B.mono}`,hint:"Alternative character"},{value:"C",label:`Pairing C: ${o.C.display} + ${o.C.sans} + ${o.C.mono}`,hint:"Alternative character"},{value:"custom",label:"Custom font families (specify Display, Sans, Mono)",hint:"Type custom Google Fonts or Fontshare families"}),k.select({message:"Select typography & font pairing:",options:u,initialValue:i&&(i.display||i.sans||i.mono)?"keep":"A"})},starterKit:()=>k.select({message:"Choose a token-wired starter kit preview:",options:[{value:"dashboard",label:"High-Density Workspace Dashboard",hint:"Workspace shell, summary strip, data table, drawer"},{value:"landing-waitlist",label:"Editorial Landing & Waitlist",hint:"Narrative hero, live preview artifact, waitlist form"},{value:"mobile-app",label:"Mobile-First Application",hint:"375px\u2013430px frame, thumb nav, bottom sheet"},{value:"data-tool",label:"Split-Pane Query Explorer & Tool",hint:"Split query/inspector, \u2318K command bar, tabular nums"},{value:"none",label:"None (Blank Token Contract)",hint:"Pure tokens and governance rules only"}]}),mode:()=>k.select({message:"Installation mode for skills & rules:",options:[{value:"modular",label:"Modular Skills (Recommended)",hint:"Core rules + task-scoped reference guides"},{value:"single",label:"Single Master File",hint:"Combined master reference file"}]}),feeling:()=>k.select({message:"Select sensory motion & timing vector:",options:[{value:"urgent-precise",label:"Urgent & Precise (110ms / 180ms)",hint:"Forensic, snappy, zero bounce"},{value:"calm",label:"Calm & Measured (140ms / 240ms)",hint:"Literary ease, smooth"},{value:"playful-tactile",label:"Playful & Tactile (80ms / 150ms)",hint:"Punchy press states"},{value:"authoritative",label:"Authoritative (120ms / 200ms)",hint:"Institutional stability"}]}),radius:()=>k.select({message:"Select geometric corner radius scale:",options:[{value:"subtle",label:"Subtle (6px outer / 4px inner)",hint:"Standard technical scale"},{value:"sharp",label:"Sharp (0px outer / 0px inner)",hint:"Zero radius / architectural"},{value:"medium",label:"Medium (10px outer / 6px inner)",hint:"Soft modern SaaS"},{value:"high",label:"High (16px outer / 10px inner)",hint:"Friendly consumer scale"},{value:"pill",label:"Pill (9999px)",hint:"Capsule components"}]}),blur:()=>k.select({message:"Select surface blur depth:",options:[{value:"subtle-frost",label:"Subtle Frost (8px)",hint:"Hairline glass backdrops"},{value:"flat",label:"Flat (0px)",hint:"Zero blur, pure solid fills"},{value:"deep-glass",label:"Deep Glass (20px)",hint:"Heavy frosted glass"}]}),customDirection:()=>k.text({message:"Custom Creative Direction & Anti-Drift Mandate (Section 0):",placeholder:"Needs to feel like a high-precision developer settlement console, crisp 1px hairlines, zero marketing fluff",initialValue:"Needs to feel like a high-precision developer settlement console, crisp 1px hairlines, zero marketing fluff"})},{onCancel:()=>{k.cancel("Setup cancelled."),process.exit(0)}}),c=r||n.typography||"A",d=g;if(n.typography==="keep"&&!d&&i)d=i;else if(n.typography==="custom"&&!d){let a=await k.text({message:'Enter --font-display family (e.g. "Cabinet Grotesk" or "Cormorant Garamond"):',placeholder:"Sora",validate:u=>u?.trim()?void 0:"Display font family is required"});k.isCancel(a)&&(k.cancel("Setup cancelled."),process.exit(0));let l=await k.text({message:'Enter --font-sans family (e.g. "Instrument Sans" or "Public Sans"):',placeholder:"Instrument Sans",validate:u=>u?.trim()?void 0:"Sans font family is required"});k.isCancel(l)&&(k.cancel("Setup cancelled."),process.exit(0));let o=await k.text({message:'Enter --font-mono family (e.g. "Geist Mono" or "JetBrains Mono"):',placeholder:"JetBrains Mono",validate:u=>u?.trim()?void 0:"Mono font family is required"});k.isCancel(o)&&(k.cancel("Setup cancelled."),process.exit(0)),d={display:a.trim(),sans:l.trim(),mono:o.trim(),source:"user"}}let m=k.spinner();m.start("Compiling tokens and governance contract...");let p={projectName:s,targetDir:t,agents:n.agents||f||y,archetype:n.archetype,feeling:n.feeling,radius:n.radius,blur:n.blur,fontMode:c,fontOverride:d,mode:n.mode,starterKit:n.starterKit!=="none"?n.starterKit:void 0,customDirection:n.customDirection},v=await se(p);m.stop(`Compiled ${v.createdFiles.length} files successfully.`);for(let a of v.createdFiles)console.log(` ${b.green("\u2714")} ${b.dim(F.relative(t,a))}`);k.outro(`${b.green("\u2714")} Initialized ${b.bold(p.archetype)} for ${b.cyan(p.agents.join(", "))}`),console.log(`${b.bold(b.cyan("\u{1F4A1} Agent Blueprint Tip:"))} Tell your AI agent ${b.yellow('"Inspect ./starter-preview.html first before creating components"')} to ensure it reuses the pre-built layout and component architecture!
|
|
639
|
+
`)});z.command("lint [dir]").description("Lint directory for hardcoded colors, AI slop, banned copy, and hash freeze integrity").action(async e=>{let t=F.resolve(process.cwd(),e||".");console.log(`${b.bgBlue(b.black(" LINT "))} Scanning ${b.bold(t)}...
|
|
640
|
+
`);let s=await Se(t);if(s.violations.length===0)console.log(`${b.green("\u2714 Pass:")} Scanned ${s.filesScanned} files. Zero design slop or token contract violations found!
|
|
641
|
+
`),process.exit(0);else{console.log(`${b.red("\u2716 Violations detected:")} (${s.violations.length} total)
|
|
642
|
+
`);for(let r of s.violations){let g=r.severity==="error"?b.bgRed(b.black(" ERR ")):b.bgYellow(b.black(" WARN "));console.log(`${g} ${b.bold(r.file)}:${r.line} [${b.cyan(r.rule)}]`),console.log(` ${b.dim(r.message)}`),r.snippet&&console.log(` ${b.dim(">")} ${r.snippet.slice(0,80)}`),console.log("")}console.log(`${b.red("Lint failed.")} Please resolve all errors or annotate with /* @design-exception: [reason] */.
|
|
643
|
+
`),process.exit(1)}});z.command("freeze [dir]").description("Calculate SHA-256 hashes of design tokens and rules, creating .design-skills.lock").action(async e=>{let t=F.resolve(process.cwd(),e||"."),s=k.spinner();s.start(`Freezing design contract in ${t}...`);let r=await ve(t);s.stop(`Freeze complete. Locked ${Object.keys(r.hashes).length} files.`);for(let[g,f]of Object.entries(r.hashes))console.log(` ${b.green("\u{1F512}")} ${g} ${b.dim(`(${f.slice(0,12)}...)`)}`);console.log(`
|
|
644
|
+
Created ${b.bold(".design-skills.lock")}. Modifications will fail lint until unfreeze is run.`)});z.command("unfreeze [dir]").description("Remove .design-skills.lock to allow modifying design tokens and rules").action(async e=>{let t=F.resolve(process.cwd(),e||"."),s=await be(t);console.log(s?`${b.green("\u2714")} Removed ${b.bold(".design-skills.lock")}. Design files are now unlocked for editing.`:`${b.yellow("\u2139")} No active .design-skills.lock found in ${t}.`)});var pt=!!(process.argv[1]&&process.argv[1]!=="[eval]"&&(F.resolve(process.argv[1])===F.resolve(dt(import.meta.url))||process.argv[1].endsWith("index.js")||process.argv[1].endsWith("agent-design-skills")||process.argv[1].endsWith("design-skills")));pt&&z.parse();export{se as compileDesignSystem,ve as freezeProject,Se as lintDirectory,be as unfreezeProject};
|
package/package.json
CHANGED
|
@@ -24,13 +24,14 @@ If the answer is **YES**, **do not render it.**
|
|
|
24
24
|
|
|
25
25
|
---
|
|
26
26
|
|
|
27
|
-
## 2. Mandatory Pre-Flight Gate
|
|
27
|
+
## 2. Mandatory Pre-Flight Gate & Starter Blueprint
|
|
28
28
|
|
|
29
29
|
Before generating, updating, or refactoring any frontend component or view:
|
|
30
30
|
|
|
31
31
|
1. **Verify Token Import:** Ensure `{{TOKENS_PATH}}` is imported into the root layout or application entry point.
|
|
32
|
-
2. **
|
|
33
|
-
3. **
|
|
32
|
+
2. **Inspect Starter Kit Blueprint (`./starter-preview.html`):** Check if `./starter-preview.html` exists in the project root. If present, read it before writing code. It is the living architectural ground truth containing verified layouts, navigation shells, metric strips, and card structures. Adapt its proven HTML/CSS directly into your component hierarchy instead of designing from scratch.
|
|
33
|
+
3. **Read Design Specification:** Inspect `{{DESIGN_DOC_PATH}}` to determine the current `BRIEF STATUS` and project constraints.
|
|
34
|
+
4. **Branch by Brief Status:**
|
|
34
35
|
- **Case A: `BRIEF STATUS: DRAFT` (or ambiguous user prompt)**
|
|
35
36
|
- Do **not** write production UI code yet.
|
|
36
37
|
- Prompt the user with 2–4 concise, architectural clarifying questions.
|
|
@@ -38,9 +39,9 @@ Before generating, updating, or refactoring any frontend component or view:
|
|
|
38
39
|
- Await confirmation or adjustments before proceeding.
|
|
39
40
|
- **Case B: `BRIEF STATUS: LOCKED` (and unambiguous prompt)**
|
|
40
41
|
- Skip preliminary interrogation questions.
|
|
41
|
-
- Begin your response immediately with the standard assumptions confirmation:
|
|
42
|
+
- Begin your response immediately with the standard assumptions confirmation anchored to the starter blueprint:
|
|
42
43
|
```markdown
|
|
43
|
-
> **
|
|
44
|
+
> **Blueprint Anchor:** Extracted from ./starter-preview.html using tokens from {{TOKENS_PATH}}.
|
|
44
45
|
```
|
|
45
46
|
- Proceed directly to code generation.
|
|
46
47
|
|
|
@@ -104,6 +104,7 @@ Every generated screen must respect these strict viewport budgets:
|
|
|
104
104
|
- **Animation Budget ($\le 2$):** No more than 2 decorative animated elements may be active simultaneously in the viewport. `[aria-busy="true"]` loading skeletons are functional and exempt.
|
|
105
105
|
- **Metric Strip Architecture:** Strictly ban 3 equal-width stat boxes in a row. Workspaces must use an inline horizontal metric strip with 1px vertical hairlines (`var(--border-hairline)`) or an asymmetric 2-pane split.
|
|
106
106
|
- **Universal Container Cardinality & Overview Row Discipline (Match Data Slice to Container Intent):** In overview screens, summary sections, or any section with directional navigation (`< >` / `View all`), constrain the rendered items to a **single row** that matches the grid column count (e.g., `.slice(0, columns)` or a single-row `flex overflow-x-auto` track). Never dump an entire 10–20 item mock array into a summary shelf causing accidental multi-row walls of cards; reserve multi-row wrapping strictly for dedicated full-index or catalog views.
|
|
107
|
+
- **Starter Kit Blueprint Fidelity (`./starter-preview.html`):** When `./starter-preview.html` is present in the workspace, agents must treat it as the canonical structural anchor. New pages, subviews, drawers, and modals must reuse its layout grid, header architecture, sidebar/dock geometry, and card primitives rather than inventing disparate layouts.
|
|
107
108
|
- **Context Boundary (Operational vs. Marketing):** Active app consoles must render live operational data (batch volume, unreconciled variance, pending row count). Never embed static marketing or compliance statements (e.g. SOC2 certifications or throughput capacity claims) inside workspace views.
|
|
108
109
|
- **Badge & Indicator Discipline (Zero Unrequested Badges Law):** NEVER place pill badges, status chips, or uppercase tag boxes inside app headers, navbars, hero sections, or card headers (e.g., ban `PRO v2.4`, `STABLE`, `SUB-10MS`, `60 FPS`). Cards must use plain text headings or no header at all. Tags/badges are ONLY permitted inside repeating data table cells or list rows to indicate item-level record status (e.g., `Settled`, `Discrepancy`, `Active`), strictly capped at max 1 badge per row.
|
|
109
110
|
- **Clean Media & Artwork Law (Never Overlay Corner Status Pills on Images, Artwork, or Video Thumbnails):**
|