Skip to content

Commit 17275e9

Browse files
ouyangyipengouyangyipeng
committed
💄 ui: redesign hero to left-text + right-code layout with XML skill demo
- Hero: left-text + right-code (Nexa-style), showing XML-compiled SKILL.md → Claude Code - Annotations: XML semantic layering, Anti-Skill constraints, HITL flags - Gain badge: +12.2pp Pass Rate on Claude Code - Contributor: Xianwei Zhang → Advisor & Corresponding Author - Responsive: mobile stacks vertically
1 parent e84dd2b commit 17275e9

1 file changed

Lines changed: 80 additions & 25 deletions

File tree

‎website/index.html‎

Lines changed: 80 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,37 @@
1414
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
1515
<link rel="stylesheet" href="common.css">
1616
<style>
17-
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:8rem 2rem 6rem}
18-
.hero-content{max-width:900px}
19-
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.25);border-radius:9999px;padding:.4rem 1.2rem;font-size:.8rem;font-weight:500;color:#a78bfa;margin-bottom:2rem;animation:fadeInUp .6s ease}
17+
.hero{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;padding:100px 2rem 80px}
18+
.hero-inner{max-width:1280px;width:100%;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
19+
.hero-left{display:flex;flex-direction:column}
20+
.hero-logo-img{width:64px;height:64px;border-radius:14px;box-shadow:0 4px 20px rgba(124,58,237,.3);margin-bottom:24px}
21+
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.25);border-radius:9999px;padding:.4rem 1.2rem;font-size:.8rem;font-weight:500;color:#a78bfa;margin-bottom:24px;width:fit-content;animation:fadeInUp .6s ease}
2022
.hero-badge .dot{width:6px;height:6px;background:#22c55e;border-radius:50%;animation:pulse 2s infinite}
21-
.hero h1{font-size:clamp(2.8rem,7vw,5.5rem);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin-bottom:1.5rem;animation:fadeInUp .6s .1s ease both}
23+
.hero h1{font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:24px;color:#fff;animation:fadeInUp .6s .1s ease both}
2224
.hero h1 .gradient-text{background:linear-gradient(135deg,#a78bfa 0%,#6366f1 30%,#22d3ee 70%,#a78bfa 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite}
23-
.hero-subtitle{font-size:clamp(1.1rem,2vw,1.35rem);color:#a1a1aa;max-width:650px;margin:0 auto 2.5rem;font-weight:400;line-height:1.7;animation:fadeInUp .6s .2s ease both}
24-
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeInUp .6s .3s ease both}
25-
.hero-stats{display:flex;gap:3rem;justify-content:center;margin-top:4rem;animation:fadeInUp .6s .4s ease both}
25+
.hero-subtitle{font-size:1.1rem;color:#a1a1aa;max-width:520px;margin-bottom:32px;font-weight:400;line-height:1.65;animation:fadeInUp .6s .2s ease both}
26+
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px;animation:fadeInUp .6s .3s ease both}
27+
.hero-stats{display:flex;gap:2.5rem;margin-top:8px;animation:fadeInUp .6s .4s ease both}
2628
.hero-stat{text-align:center}
27-
.hero-stat-value{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,#a78bfa,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
28-
.hero-stat-label{font-size:.8rem;color:#71717a;margin-top:.25rem;text-transform:uppercase;letter-spacing:.08em}
29+
.hero-stat-value{font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,#a78bfa,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
30+
.hero-stat-label{font-size:.75rem;color:#71717a;margin-top:.25rem;text-transform:uppercase;letter-spacing:.08em}
31+
.hero-right{position:relative}
32+
.hero-code{border-radius:16px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5)}
33+
.hero-code-header{display:flex;align-items:center;gap:8px;padding:12px 18px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
34+
.hero-code-dot{width:10px;height:10px;border-radius:50%}
35+
.hero-code-dot.r{background:#ff5f57}.hero-code-dot.y{background:#febc2e}.hero-code-dot.g{background:#28c840}
36+
.hero-code-label{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:#71717a}
37+
.hero-code pre{padding:20px;margin:0;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:.76rem;line-height:1.75;color:#e0e0e0}
38+
.hero-code .kw{color:#c792ea}.hero-code .str{color:#c3e88d}.hero-code .cm{color:#546e7a;font-style:italic}.hero-code .fn{color:#82aaff}.hero-code .tp{color:#ffcb6b}.hero-code .tag{color:#89ddff}
39+
.hero-annotations{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
40+
.hero-anno{position:absolute;display:flex;align-items:flex-start;gap:10px;font-size:.8rem;color:#a78bfa;font-weight:500;opacity:0;animation:annoIn .6s cubic-bezier(.16,1,.3,1) forwards}
41+
.hero-anno:nth-child(1){top:18%;right:-200px;animation-delay:.8s}
42+
.hero-anno:nth-child(2){top:52%;right:-200px;animation-delay:1.2s}
43+
.hero-anno:nth-child(3){top:78%;right:-200px;animation-delay:1.6s}
44+
.hero-anno-line{width:50px;height:1px;background:#7c3aed;margin-top:9px;flex-shrink:0}
45+
.hero-anno-dot{width:5px;height:5px;border-radius:50%;background:#7c3aed;margin-top:7px;flex-shrink:0;box-shadow:0 0 8px rgba(124,58,237,.6)}
46+
@keyframes annoIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
47+
.hero-gain-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:9999px;padding:6px 16px;font-size:.82rem;font-weight:600;color:#22c55e;margin-top:16px;width:fit-content}
2948
.problem-solution{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem}
3049
.ps-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:1.25rem;padding:2.5rem;transition:all .3s}
3150
.ps-card:hover{border-color:rgba(139,92,246,.3);background:rgba(139,92,246,.04)}
@@ -66,7 +85,7 @@
6685
.contributor-card .role{font-size:.8rem;color:#a78bfa;margin-bottom:.5rem}
6786
.contributor-card a{color:#a1a1aa;text-decoration:none;font-size:.8rem;transition:color .2s}
6887
.contributor-card a:hover{color:#22d3ee}
69-
@media(max-width:768px){.problem-solution{grid-template-columns:1fr}.pipeline{flex-direction:column;gap:.5rem}.pipeline-arrow{transform:rotate(90deg)}.hero-stats{flex-direction:column;gap:1.5rem}.complexity-formula{font-size:1.1rem}}
88+
@media(max-width:768px){.hero-inner{grid-template-columns:1fr;gap:40px}.hero-right{order:-1}.hero-annotations{display:none}.problem-solution{grid-template-columns:1fr}.pipeline{flex-direction:column;gap:.5rem}.pipeline-arrow{transform:rotate(90deg)}.hero-stats{flex-direction:column;gap:1.5rem}.complexity-formula{font-size:1.1rem}}
7089
</style>
7190
</head>
7291
<body>
@@ -86,21 +105,57 @@
86105
</nav>
87106

88107
<section class="hero">
89-
<div class="hero-content">
90-
<div style="margin-bottom:1.5rem"><img src="logo.png" alt="SkCC" height="64" width="64" style="border-radius:14px;box-shadow:0 4px 20px rgba(124,58,237,.3)"></div>
91-
<div class="hero-badge"><span class="dot"></span> ACM CAIS 2026 — AgentSkills'26 Workshop</div>
92-
<h1><span class="gradient-text">Compilation for Skills:</span><br>Capable, Portable, and Securable</h1>
93-
<p class="hero-subtitle">SkCC is a compiler for LLM agents. Author skills once as SKILL.md, compile to Claude Code, Codex, Gemini CLI & Kimi CLI — with built-in security hardening.</p>
94-
<div class="hero-actions">
95-
<a href="install.html" class="btn btn-primary">Get Started</a>
96-
<a href="https://github.com/Nexa-Language/Skill-Compiler" class="btn btn-secondary">View on GitHub</a>
97-
<a href="https://arxiv.org/abs/2605.03353" class="btn btn-secondary" target="_blank" style="border-color:rgba(34,211,238,.3);color:#22d3ee">📄 Read Paper (arXiv)</a>
108+
<div class="hero-inner">
109+
<div class="hero-left">
110+
<img src="logo.png" alt="SkCC" class="hero-logo-img">
111+
<div class="hero-badge"><span class="dot"></span> ACM CAIS 2026 — AgentSkills'26 Workshop</div>
112+
<h1><span class="gradient-text">Compilation for Skills:</span><br>Capable, Portable, and Securable</h1>
113+
<p class="hero-subtitle">SkCC is a compiler for LLM agents. Author skills once as <strong>SKILL.md</strong>, compile to Claude Code, Codex, Gemini CLI & Kimi CLI — with built-in security hardening.</p>
114+
<div class="hero-actions">
115+
<a href="install.html" class="btn btn-primary">Get Started</a>
116+
<a href="https://github.com/Nexa-Language/Skill-Compiler" class="btn btn-secondary">View on GitHub</a>
117+
<a href="https://arxiv.org/abs/2605.03353" class="btn btn-secondary" target="_blank" style="border-color:rgba(34,211,238,.3);color:#22d3ee">📄 Read Paper (arXiv)</a>
118+
</div>
119+
<div class="hero-stats">
120+
<div class="hero-stat"><div class="hero-stat-value">+13.5<span style="font-size:1rem">pp</span></div><div class="hero-stat-label">Pass Rate Gain</div></div>
121+
<div class="hero-stat"><div class="hero-stat-value"><10<span style="font-size:1rem">ms</span></div><div class="hero-stat-label">Compilation</div></div>
122+
<div class="hero-stat"><div class="hero-stat-value">94.8<span style="font-size:1rem">%</span></div><div class="hero-stat-label">Security Coverage</div></div>
123+
<div class="hero-stat"><div class="hero-stat-value">4</div><div class="hero-stat-label">Frameworks</div></div>
124+
</div>
98125
</div>
99-
<div class="hero-stats">
100-
<div class="hero-stat"><div class="hero-stat-value">+13.5<span style="font-size:1rem">pp</span></div><div class="hero-stat-label">Pass Rate Gain</div></div>
101-
<div class="hero-stat"><div class="hero-stat-value"><10<span style="font-size:1rem">ms</span></div><div class="hero-stat-label">Compilation</div></div>
102-
<div class="hero-stat"><div class="hero-stat-value">94.8<span style="font-size:1rem">%</span></div><div class="hero-stat-label">Security Coverage</div></div>
103-
<div class="hero-stat"><div class="hero-stat-value">4</div><div class="hero-stat-label">Frameworks</div></div>
126+
<div class="hero-right">
127+
<div class="hero-code">
128+
<div class="hero-code-header">
129+
<span class="hero-code-dot r"></span><span class="hero-code-dot y"></span><span class="hero-code-dot g"></span>
130+
<span class="hero-code-label">SKILL.md → SkCC → Claude Code</span>
131+
</div>
132+
<pre><span class="cm"><!-- Compiled for Claude Code — XML Semantic Layering --></span>
133+
<span class="tag"><agent_skill></span>
134+
<span class="tag"><metadata></span>
135+
<span class="tag"><name></span>database-migration<span class="tag"></name></span>
136+
<span class="tag"><security_level></span>high<span class="tag"></security_level></span>
137+
<span class="tag"></metadata></span>
138+
<span class="tag"><execution_steps></span>
139+
<span class="tag"><step</span> <span class="kw">order</span>=<span class="str">"1"</span> <span class="kw">critical</span>=<span class="str">"true"</span><span class="tag">></span>
140+
Validate schema compatibility
141+
<span class="tag"></step></span>
142+
<span class="tag"><step</span> <span class="kw">order</span>=<span class="str">"2"</span><span class="tag">></span>
143+
Execute migration with rollback plan
144+
<span class="tag"></step></span>
145+
<span class="tag"></execution_steps></span>
146+
<span class="tag"><strict_constraints></span>
147+
<span class="tag"><anti_pattern</span> <span class="kw">source</span>=<span class="str">"anti-skill-injector"</span><span class="tag">></span>
148+
No destructive DB ops without confirmation
149+
<span class="tag"></anti_pattern></span>
150+
<span class="tag"></strict_constraints></span>
151+
<span class="tag"></agent_skill></span></pre>
152+
</div>
153+
<div class="hero-annotations">
154+
<div class="hero-anno"><span class="hero-anno-dot"></span><span class="hero-anno-line"></span>XML semantic layering — Claude's preferred format</div>
155+
<div class="hero-anno"><span class="hero-anno-dot"></span><span class="hero-anno-line"></span>Anti-Skill constraints injected at compile time</div>
156+
<div class="hero-anno"><span class="hero-anno-dot"></span><span class="hero-anno-line"></span>Critical steps flagged for HITL confirmation</div>
157+
</div>
158+
<div class="hero-gain-badge">📈 +12.2pp Pass Rate on Claude Code</div>
104159
</div>
105160
</div>
106161
</section>
@@ -151,7 +206,7 @@ <h1><span class="gradient-text">Compilation for Skills:</span><br>Capable, Porta
151206
<div class="contributor-card reveal"><div class="avatar">O</div><h4>Yipeng Ouyang</h4><div class="role">Lead Author</div><a href="https://ouyangyipeng.github.io/" target="_blank">ouyangyipeng.github.io</a></div>
152207
<div class="contributor-card reveal"><div class="avatar">G</div><h4>Yuhao Gu</h4><div class="role">Author</div><a href="https://yhgu2000.github.io/" target="_blank">yhgu2000.github.io</a></div>
153208
<div class="contributor-card reveal"><div class="avatar">X</div><h4>Yi Xiao</h4><div class="role">Author</div><span style="font-size:.8rem;color:#71717a">—</span></div>
154-
<div class="contributor-card reveal"><div class="avatar">Z</div><h4>Xianwei Zhang</h4><div class="role">Author</div><a href="https://xianweiz.github.io/" target="_blank">xianweiz.github.io</a></div>
209+
<div class="contributor-card reveal"><div class="avatar">Z</div><h4>Xianwei Zhang</h4><div class="role">Advisor & Corresponding Author</div><a href="https://xianweiz.github.io/" target="_blank">xianweiz.github.io</a></div>
155210
</div>
156211
</div>
157212
</section>

0 commit comments

Comments
 (0)