From 51417706cd4442e9b7dc3210725643a36fab1257 Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Mon, 20 Apr 2026 18:45:34 +0800
Subject: [PATCH] fix: accessibility, reduced motion, and anti-pattern cleanup

- Add global :focus-visible indicator (P0: keyboard users can now see focus)
- Remove outline-none from all inputs (rely on global focus-visible)
- Wrap all CSS animations in prefers-reduced-motion: no-preference
- GlowMesh renders static gradient fallback for reduced-motion users
- Add ARIA labels/roles to spinners, decorative SVGs, icon buttons
- Add focus trap + role=dialog to onboarding modal
- Add semantic <nav> and <footer> landmarks
- Remove banned gradient text CSS classes (.text-gradient, .text-gradient-blue)
- Remove backdrop-blur-sm from 13/14 surfaces (kept only on modal overlay)
- Replace animate-bounce with animate-pulse on skeleton dots
- Restyle SkillPreview to match dark/sharp aesthetic (was using light-mode vars)
- Fix unescaped entity in onboarding modal

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 src/app/[...skillPath]/page.tsx     | 19 +++---
 src/app/dashboard/page.tsx          | 24 ++++----
 src/app/globals.css                 | 93 ++++++++++++-----------------
 src/app/page.tsx                    | 36 +++++------
 src/app/settings/page.tsx           | 12 ++--
 src/components/config-panel.tsx     | 11 ++--
 src/components/glow-mesh.tsx        | 34 +++++++++--
 src/components/launch-progress.tsx  | 10 ++--
 src/components/onboarding-modal.tsx | 66 ++++++++++++++------
 src/components/provider-config.tsx  | 14 +++--
 src/components/sandbox-skeleton.tsx | 24 ++++----
 src/components/session-control.tsx  |  8 +--
 src/components/site-header.tsx      | 25 ++++----
 src/components/skill-preview.tsx    | 24 ++++----
 src/components/skill-tree.tsx       |  2 +-
 15 files changed, 220 insertions(+), 182 deletions(-)

diff --git a/src/app/[...skillPath]/page.tsx b/src/app/[...skillPath]/page.tsx
index f2ae9bc..45cf122 100644
--- a/src/app/[...skillPath]/page.tsx
+++ b/src/app/[...skillPath]/page.tsx
@@ -221,6 +221,7 @@ export default function SkillPage({
     }
   };
 
+  // Invalid path
   if (!isValidPath) {
     return (
       <main className="relative min-h-screen bg-[#0a0a0a] flex flex-col overflow-hidden">
@@ -228,7 +229,7 @@ export default function SkillPage({
         <SiteHeader />
         <div className="flex-1 flex items-center justify-center relative z-10 px-6">
           <div className="flex flex-col items-center animate-fade-in">
-            <div className="text-white font-semibold mb-2">Invalid skill path</div>
+            <h1 className="text-white font-semibold mb-2">Invalid skill path</h1>
             <div className="text-white/50 text-sm mb-6">Expected format: /owner/repo/skill-name</div>
             <Link href="/" className="px-6 py-3 bg-white text-black text-sm font-medium hover:bg-white/90 transition-colors">Go home</Link>
           </div>
@@ -248,15 +249,15 @@ export default function SkillPage({
       <div className="flex-1 flex items-center justify-center relative z-10 px-6">
         <div className="w-full max-w-[640px]">
           {phase === "config" && !authLoaded && (
-            <div className="flex items-center justify-center py-20">
-              <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" />
+            <div className="flex items-center justify-center py-20" role="status" aria-label="Loading">
+              <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" aria-hidden="true" />
             </div>
           )}
 
           {phase === "config" && authLoaded && !isSignedIn && (
             <div className="animate-fade-in">
-              <div className="border border-white/20 bg-black/40 backdrop-blur-sm p-8 text-center">
-                <svg className="w-10 h-10 mx-auto mb-4 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <div className="border border-white/20 bg-black/40 p-8 text-center">
+                <svg className="w-10 h-10 mx-auto mb-4 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                 </svg>
                 <h2 className="text-lg font-semibold text-white/90 mb-2">Sign in to continue</h2>
@@ -269,8 +270,8 @@ export default function SkillPage({
           )}
 
           {phase === "config" && isSignedIn && keysLoading && (
-            <div className="flex items-center justify-center py-20">
-              <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" />
+            <div className="flex items-center justify-center py-20" role="status" aria-label="Loading keys">
+              <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" aria-hidden="true" />
             </div>
           )}
 
@@ -289,8 +290,8 @@ export default function SkillPage({
           )}
 
           {phase === "config" && readyToAutoLaunch && (
-            <div className="flex items-center justify-center py-20">
-              <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" />
+            <div className="flex items-center justify-center py-20" role="status" aria-label="Preparing launch">
+              <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" aria-hidden="true" />
             </div>
           )}
 
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 9cfd34e..b788ea9 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -72,25 +72,27 @@ export default function DashboardPage() {
     await removeSandbox({ sandboxId });
   };
 
+  // Loading state
   if (!isLoaded) {
     return (
       <main className="relative min-h-screen bg-[#0a0a0a] flex flex-col overflow-hidden">
         <GlowMesh />
         <SiteHeader />
-        <div className="flex-1 flex items-center justify-center">
-          <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" />
+        <div className="flex-1 flex items-center justify-center" role="status" aria-label="Loading">
+          <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" aria-hidden="true" />
         </div>
       </main>
     );
   }
 
+  // Not signed in
   if (!isSignedIn) {
     return (
       <main className="relative min-h-screen bg-[#0a0a0a] flex flex-col overflow-hidden">
         <GlowMesh />
         <SiteHeader />
         <div className="flex-1 flex items-center justify-center relative z-10 px-6">
-          <div className="border border-white/20 bg-black/40 backdrop-blur-sm p-8 text-center max-w-md">
+          <div className="border border-white/20 bg-black/40 p-8 text-center max-w-md">
             <h2 className="text-lg font-semibold text-white/90 mb-2">Sign in to view dashboard</h2>
             <p className="text-sm text-white/50 mb-6">Manage your active sandbox sessions.</p>
             <SignInButton mode="modal">
@@ -143,6 +145,7 @@ export default function DashboardPage() {
     return "text-yellow-400/70";
   };
 
+  // Main dashboard content
   return (
     <main className="relative min-h-screen bg-[#0a0a0a] flex flex-col overflow-hidden">
       <GlowMesh />
@@ -158,12 +161,12 @@ export default function DashboardPage() {
           </div>
 
           {sandboxList === undefined ? (
-            <div className="flex items-center justify-center py-20">
-              <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" />
+            <div className="flex items-center justify-center py-20" role="status" aria-label="Loading sandboxes">
+              <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" aria-hidden="true" />
             </div>
           ) : sandboxList.length === 0 ? (
-            <div className="border border-white/10 bg-black/40 backdrop-blur-sm p-12 text-center">
-              <svg className="w-12 h-12 mx-auto mb-4 text-white/20" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
+            <div className="border border-white/10 bg-black/40 p-12 text-center">
+              <svg className="w-12 h-12 mx-auto mb-4 text-white/20" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1} aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
               </svg>
               <h2 className="text-lg font-semibold text-white/60 mb-2">No active sandboxes</h2>
@@ -173,7 +176,7 @@ export default function DashboardPage() {
               </a>
             </div>
           ) : (
-            <div className="space-y-3">
+            <div className="space-y-3" role="list" aria-label="Active sandboxes">
               {sandboxList.map((sb) => {
                 const live = liveInfo[sb.sandboxId];
                 const displayState = live?.state ?? sb.state;
@@ -186,11 +189,12 @@ export default function DashboardPage() {
                 return (
                   <div
                     key={sb._id}
-                    className="border border-white/10 bg-black/40 backdrop-blur-sm px-6 py-4"
+                    role="listitem"
+                    className="border border-white/10 bg-black/40 px-6 py-4"
                   >
                     <div className="flex items-start justify-between gap-4">
                       <div className="flex items-start gap-4 min-w-0 flex-1">
-                        <div className={`w-2.5 h-2.5 rounded-full shrink-0 mt-1.5 ${stateColor(displayState)}`} />
+                        <div className={`w-2.5 h-2.5 rounded-full shrink-0 mt-1.5 ${stateColor(displayState)}`} aria-hidden="true" />
                         <div className="min-w-0 flex-1">
                           <div className="font-mono text-sm text-white/80 truncate">
                             {sb.skillPath}
diff --git a/src/app/globals.css b/src/app/globals.css
index be933f2..4efe3f4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -54,45 +54,52 @@ body {
   color: var(--text-primary);
 }
 
-@keyframes fade-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
+:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
 }
 
-@keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes fade-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
 
-@keyframes slide-in-right {
-  from { opacity: 0; transform: translateX(-16px); }
-  to { opacity: 1; transform: translateX(0); }
-}
+  @keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
 
-@keyframes pulse-dot {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 1; }
-}
+  @keyframes slide-in-right {
+    from { opacity: 0; transform: translateX(-16px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
 
-@keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
+  @keyframes pulse-dot {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 1; }
+  }
 
-.animate-fade-in {
-  animation: fade-in 0.5s ease-out both;
-}
+  @keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+  }
 
-.animate-fade-in-up {
-  animation: fade-in-up 0.6s ease-out both;
-}
+  .animate-fade-in {
+    animation: fade-in 0.5s ease-out both;
+  }
 
-.animate-slide-in-right {
-  animation: slide-in-right 0.4s ease-out both;
-}
+  .animate-fade-in-up {
+    animation: fade-in-up 0.6s ease-out both;
+  }
 
-.animate-blink {
-  animation: blink 1s step-end infinite;
+  .animate-slide-in-right {
+    animation: slide-in-right 0.4s ease-out both;
+  }
+
+  .animate-blink {
+    animation: blink 1s step-end infinite;
+  }
 }
 
 .delay-100 { animation-delay: 100ms; }
@@ -101,29 +108,3 @@ body {
 .delay-400 { animation-delay: 400ms; }
 .delay-500 { animation-delay: 500ms; }
 .delay-600 { animation-delay: 600ms; }
-
-.card {
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  transition: all 0.2s ease;
-}
-
-.card:hover {
-  border-color: var(--border-accent);
-  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.06);
-}
-
-.text-gradient {
-  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.text-gradient-blue {
-  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 49bd71d..c11de77 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,20 +15,14 @@ function Footer() {
   return (
     <footer className="relative z-10 border-t border-white/10">
       <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
-        <div className="flex items-center gap-6">
+        <nav aria-label="Footer links" className="flex items-center gap-6">
           <a
             href="https://skills.sh"
             target="_blank"
             rel="noopener noreferrer"
             className="flex items-center gap-2 text-sm text-white/50 hover:text-white/80 transition-colors"
           >
-            <svg
-              className="w-4 h-4"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={1.5}
-            >
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -43,13 +37,7 @@ function Footer() {
             rel="noopener noreferrer"
             className="flex items-center gap-2 text-sm text-white/50 hover:text-white/80 transition-colors"
           >
-            <svg
-              className="w-4 h-4"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={1.5}
-            >
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -64,12 +52,12 @@ function Footer() {
             rel="noopener noreferrer"
             className="flex items-center gap-2 text-sm text-white/50 hover:text-white/80 transition-colors"
           >
-            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
               <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
             </svg>
             GitHub
           </a>
-        </div>
+        </nav>
 
         <span className="text-sm text-white/30">ReScience Lab Inc.</span>
       </div>
@@ -174,14 +162,17 @@ export default function Home() {
           <form
             onSubmit={handleSubmit}
             className="w-full max-w-[640px] animate-fade-in-up delay-300"
+            role="search"
           >
+            <label htmlFor="skill-url-input" className="sr-only">Skill URL</label>
             <div className="flex items-center bg-white overflow-hidden shadow-2xl shadow-black/30">
               <input
+                id="skill-url-input"
                 type="text"
                 value={url}
                 onChange={(e) => setUrl(e.target.value)}
                 placeholder="https://skills.sh/owner/repo/skill-name"
-                className="flex-1 px-5 py-3.5 text-[#111] text-sm font-mono bg-transparent outline-none placeholder:text-gray-400"
+                className="flex-1 px-5 py-3.5 text-[#111] text-sm font-mono bg-transparent placeholder:text-gray-400"
               />
               <button
                 type="submit"
@@ -191,7 +182,7 @@ export default function Home() {
               </button>
             </div>
             {urlError && (
-              <div className="mt-3 px-4 py-2.5 bg-red-500/10 border border-red-500/20 text-red-400 text-xs font-mono">
+              <div className="mt-3 px-4 py-2.5 bg-red-500/10 border border-red-500/20 text-red-400 text-xs font-mono" role="alert">
                 {urlError}
               </div>
             )}
@@ -201,9 +192,10 @@ export default function Home() {
             <div className="flex items-center justify-between">
               <button
                 onClick={() => { setPhase("input"); setTreeData(null); setTreeError(null); setIsRateLimited(false); }}
+                aria-label="Change URL"
                 className="flex items-center gap-2 text-sm text-white/40 hover:text-white/70 transition-colors"
               >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                 </svg>
                 Change URL
@@ -214,8 +206,8 @@ export default function Home() {
             </div>
 
             {treeLoading ? (
-              <div className="border border-white/10 bg-white/[0.02] px-6 py-10 flex flex-col items-center">
-                <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin mb-4" />
+              <div className="border border-white/10 bg-white/[0.02] px-6 py-10 flex flex-col items-center" role="status" aria-label="Fetching skill structure">
+                <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin mb-4" aria-hidden="true" />
                 <span className="text-sm text-white/40">Fetching skill structure...</span>
               </div>
             ) : treeData ? (
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index b6e2926..922d6dd 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -18,8 +18,8 @@ export default function SettingsPage() {
       <main className="relative min-h-screen bg-[#0a0a0a] flex flex-col overflow-hidden">
         <GlowMesh />
         <SiteHeader />
-        <div className="flex-1 flex items-center justify-center">
-          <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" />
+        <div className="flex-1 flex items-center justify-center" role="status" aria-label="Loading">
+          <div className="w-8 h-8 rounded-full border-2 border-white/10 border-t-white/50 animate-spin" aria-hidden="true" />
         </div>
       </main>
     );
@@ -31,7 +31,7 @@ export default function SettingsPage() {
         <GlowMesh />
         <SiteHeader />
         <div className="flex-1 flex items-center justify-center relative z-10 px-6">
-          <div className="border border-white/20 bg-black/40 backdrop-blur-sm p-8 text-center max-w-md">
+          <div className="border border-white/20 bg-black/40 p-8 text-center max-w-md">
             <h2 className="text-lg font-semibold text-white/90 mb-2">Sign in to manage settings</h2>
             <p className="text-sm text-white/50 mb-6">
               Your API keys will be encrypted and stored securely in your account.
@@ -137,7 +137,7 @@ function SettingsForm({
             </div>
           </div>
 
-          <div className="border border-white/20 bg-black/40 backdrop-blur-sm mb-4">
+          <div className="border border-white/20 bg-black/40 mb-4">
             <div className="px-6 py-5 border-b border-white/10">
               <div className="flex items-center gap-3">
                 <h2 className="text-base font-semibold text-white/90">Sandbox</h2>
@@ -157,7 +157,7 @@ function SettingsForm({
                   value={sandboxKey}
                   onChange={(e) => setSandboxKey(e.target.value)}
                   placeholder="dtn_..."
-                  className="w-full px-4 py-2.5 pr-12 bg-white/5 border border-white/10 text-white/90 text-sm font-mono outline-none focus:border-white/30 transition-colors placeholder:text-white/20"
+                  className="w-full px-4 py-2.5 pr-12 bg-white/5 border border-white/10 text-white/90 text-sm font-mono focus:border-white/30 transition-colors placeholder:text-white/20"
                 />
                 <button
                   onClick={() => setShowSandboxKey(!showSandboxKey)}
@@ -171,7 +171,7 @@ function SettingsForm({
 
           <div className="border border-green-500/20 bg-green-500/5 px-5 py-3 mb-4">
             <div className="flex items-center gap-2">
-              <svg className="w-4 h-4 text-green-400/60 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <svg className="w-4 h-4 text-green-400/60 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
               </svg>
               <span className="text-xs text-green-400/60">
diff --git a/src/components/config-panel.tsx b/src/components/config-panel.tsx
index 1195415..400f4f4 100644
--- a/src/components/config-panel.tsx
+++ b/src/components/config-panel.tsx
@@ -117,15 +117,16 @@ function ConfigPanelForm({
     <div className="animate-fade-in">
       <button
         onClick={onBack}
+        aria-label="Go back"
         className="flex items-center gap-2 text-sm text-white/40 hover:text-white/70 transition-colors mb-6"
       >
-        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
           <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
         </svg>
         Back
       </button>
 
-      <div className="border border-white/20 bg-black/40 backdrop-blur-sm mb-4">
+      <div className="border border-white/20 bg-black/40 mb-4">
         <div className="px-6 py-5 border-b border-white/10">
           <h2 className="text-base font-semibold text-white/90">LLM Provider</h2>
         </div>
@@ -148,7 +149,7 @@ function ConfigPanelForm({
         </div>
       </div>
 
-      <div className="border border-white/20 bg-black/40 backdrop-blur-sm mb-4">
+      <div className="border border-white/20 bg-black/40 mb-4">
         <div className="px-6 py-5 border-b border-white/10">
           <div className="flex items-center gap-3">
             <h2 className="text-base font-semibold text-white/90">Sandbox</h2>
@@ -168,7 +169,7 @@ function ConfigPanelForm({
               value={sandboxKey}
               onChange={(e) => setSandboxKey(e.target.value)}
               placeholder="dtn_..."
-              className="w-full px-4 py-2.5 pr-12 bg-white/5 border border-white/10 text-white/90 text-sm font-mono outline-none focus:border-white/30 transition-colors placeholder:text-white/20"
+              className="w-full px-4 py-2.5 pr-12 bg-white/5 border border-white/10 text-white/90 text-sm font-mono focus:border-white/30 transition-colors placeholder:text-white/20"
             />
             <button
               onClick={() => setShowSandboxKey(!showSandboxKey)}
@@ -182,7 +183,7 @@ function ConfigPanelForm({
 
       <div className="border border-green-500/20 bg-green-500/5 px-5 py-3 mb-4">
         <div className="flex items-center gap-2">
-          <svg className="w-4 h-4 text-green-400/60 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <svg className="w-4 h-4 text-green-400/60 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
             <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
           </svg>
           <span className="text-xs text-green-400/60">
diff --git a/src/components/glow-mesh.tsx b/src/components/glow-mesh.tsx
index c7fdbe6..a4df0ae 100644
--- a/src/components/glow-mesh.tsx
+++ b/src/components/glow-mesh.tsx
@@ -1,6 +1,19 @@
 "use client";
 
-import { useRef, useEffect, useCallback } from "react";
+import { useRef, useEffect, useCallback, useSyncExternalStore } from "react";
+
+const motionQuery = "(prefers-reduced-motion: reduce)";
+function subscribeMotion(cb: () => void) {
+  const mq = window.matchMedia(motionQuery);
+  mq.addEventListener("change", cb);
+  return () => mq.removeEventListener("change", cb);
+}
+function getMotionSnapshot() {
+  return window.matchMedia(motionQuery).matches;
+}
+function getMotionServerSnapshot() {
+  return false;
+}
 
 interface GlowNode {
   x: number;
@@ -23,6 +36,7 @@ export function GlowMesh() {
   const maskRef = useRef<HTMLImageElement | null>(null);
   const mouseRef = useRef<{ x: number; y: number }>({ x: -1000, y: -1000 });
   const rafRef = useRef<number>(0);
+  const reducedMotion = useSyncExternalStore(subscribeMotion, getMotionSnapshot, getMotionServerSnapshot);
 
   const init = useCallback(() => {
     const canvas = canvasRef.current;
@@ -72,6 +86,7 @@ export function GlowMesh() {
   }, []);
 
   useEffect(() => {
+    if (reducedMotion) return;
     init();
     window.addEventListener("resize", init);
 
@@ -172,7 +187,18 @@ export function GlowMesh() {
       window.removeEventListener("resize", init);
       cancelAnimationFrame(rafRef.current);
     };
-  }, [init]);
-
-  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />;
+  }, [init, reducedMotion]);
+
+  if (reducedMotion) {
+    return (
+      <div
+        className="absolute inset-0 w-full h-full"
+        style={{
+          background: "radial-gradient(ellipse at 50% 40%, rgba(40, 80, 140, 0.15) 0%, transparent 70%)",
+        }}
+      />
+    );
+  }
+
+  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" aria-hidden="true" />;
 }
diff --git a/src/components/launch-progress.tsx b/src/components/launch-progress.tsx
index 2c0bc15..3caf40d 100644
--- a/src/components/launch-progress.tsx
+++ b/src/components/launch-progress.tsx
@@ -37,20 +37,20 @@ export function LaunchProgress({
 
   return (
     <div className="animate-fade-in">
-      <div className="border border-white/20 bg-black/40 backdrop-blur-sm p-8">
+      <div className="border border-white/20 bg-black/40 p-8">
         <div className="flex items-center gap-3 mb-8">
-          <div className="w-2 h-2 rounded-full bg-blue-400 animate-pulse" />
+          <div className="w-2 h-2 rounded-full bg-blue-400 animate-pulse" aria-hidden="true" />
           <h2 className="text-base font-semibold text-white/90">
             Launching Agent Session
           </h2>
           {usedSnapshot && (
-            <span className="ml-auto text-[10px] font-mono text-emerald-400/60 bg-emerald-500/10 px-2 py-0.5 rounded-full">
+            <span className="ml-auto text-[10px] font-mono text-emerald-400/60 bg-emerald-500/10 px-2 py-0.5">
               snapshot
             </span>
           )}
         </div>
 
-        <div className="relative ml-1 mb-8">
+        <div className="relative ml-1 mb-8" role="status" aria-label={`Launch progress: ${steps[currentIdx]?.label ?? state}`}>
           {steps.map((step, i) => {
             const isActive = step.key === state;
             const isDone = currentIdx > i;
@@ -98,7 +98,7 @@ export function LaunchProgress({
         </div>
 
         {state === "error" && (
-          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20">
+          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20" role="alert">
             <div className="text-sm text-red-400 font-medium mb-1">Launch failed</div>
             <div className="text-sm text-white/60">{error || "Unknown error"}</div>
           </div>
diff --git a/src/components/onboarding-modal.tsx b/src/components/onboarding-modal.tsx
index 87ba9c5..1cffc98 100644
--- a/src/components/onboarding-modal.tsx
+++ b/src/components/onboarding-modal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import { PROVIDERS, type Provider } from "@/lib/providers/registry";
 import { useKeyStore } from "@/hooks/use-key-store";
 import { ProviderTabs, ModelSelector, ApiKeyInput } from "@/components/provider-config";
@@ -15,6 +15,7 @@ export function OnboardingModal({ onComplete }: { onComplete: () => void }) {
   const [showSandboxKey, setShowSandboxKey] = useState(false);
   const [saving, setSaving] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
 
   const handleProviderChange = (id: string) => {
     const p = PROVIDERS.find((p) => p.id === id);
@@ -44,17 +45,44 @@ export function OnboardingModal({ onComplete }: { onComplete: () => void }) {
     }
   };
 
+  const trapFocus = useCallback((e: KeyboardEvent) => {
+    if (e.key !== "Tab" || !modalRef.current) return;
+    const focusable = modalRef.current.querySelectorAll<HTMLElement>(
+      'button:not([disabled]), input:not([disabled]), select:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener("keydown", trapFocus);
+    return () => document.removeEventListener("keydown", trapFocus);
+  }, [trapFocus]);
+
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm px-4">
-      <div className="w-full max-w-lg border border-white/20 bg-[#0a0a0a] shadow-2xl">
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm px-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="onboarding-title"
+    >
+      <div ref={modalRef} className="w-full max-w-lg border border-white/20 bg-[#0a0a0a] shadow-2xl">
         <div className="px-6 py-5 border-b border-white/10">
-          <h2 className="text-lg font-semibold text-white/90">Welcome to TrySkills.sh</h2>
+          <h2 id="onboarding-title" className="text-lg font-semibold text-white/90">Welcome to TrySkills.sh</h2>
           <p className="text-sm text-white/40 mt-1">
             Set up your API keys to start trying skills. Takes about 2 minutes.
           </p>
         </div>
 
-        <div className="px-6 py-2 border-b border-white/10">
+        <div className="px-6 py-2 border-b border-white/10" aria-hidden="true">
           <div className="flex items-center gap-1">
             {[1, 2, 3].map((s) => (
               <div key={s} className="flex items-center gap-1 flex-1">
@@ -75,9 +103,9 @@ export function OnboardingModal({ onComplete }: { onComplete: () => void }) {
           {step === 1 && (
             <div className="space-y-4 animate-fade-in">
               <div className="flex items-center gap-3 mb-2">
-                <div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-sm font-semibold text-white/60">1</div>
+                <div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-sm font-semibold text-white/60" aria-hidden="true">1</div>
                 <div>
-                  <div className="text-sm font-medium text-white/90">Get a Daytona Sandbox Key</div>
+                  <h3 className="text-sm font-medium text-white/90">Get a Daytona Sandbox Key</h3>
                   <div className="text-xs text-white/40">Free $200 credits, no credit card needed</div>
                 </div>
               </div>
@@ -88,33 +116,35 @@ export function OnboardingModal({ onComplete }: { onComplete: () => void }) {
                 rel="noopener noreferrer"
                 className="flex items-center gap-3 px-4 py-3 bg-white/5 border border-white/10 hover:border-white/30 transition-all group"
               >
-                <svg className="w-5 h-5 text-white/40 group-hover:text-white/70 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <svg className="w-5 h-5 text-white/40 group-hover:text-white/70 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                 </svg>
                 <div className="flex-1">
                   <div className="text-sm text-white/70 group-hover:text-white transition-colors">Open Daytona Dashboard</div>
                   <div className="text-xs text-white/30">app.daytona.io/dashboard/keys</div>
                 </div>
-                <svg className="w-4 h-4 text-white/20 group-hover:text-white/50 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <svg className="w-4 h-4 text-white/20 group-hover:text-white/50 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                 </svg>
               </a>
 
               <div>
-                <label className="block text-xs text-white/50 uppercase tracking-wider mb-2">
+                <label htmlFor="sandbox-key-input" className="block text-xs text-white/50 uppercase tracking-wider mb-2">
                   Paste your Daytona API Key
                 </label>
                 <div className="relative">
                   <input
+                    id="sandbox-key-input"
                     type={showSandboxKey ? "text" : "password"}
                     value={sandboxKey}
                     onChange={(e) => setSandboxKey(e.target.value)}
                     placeholder="dtn_..."
-                    className="w-full px-4 py-2.5 pr-12 bg-white/5 border border-white/10 text-white/90 text-sm font-mono outline-none focus:border-white/30 transition-colors placeholder:text-white/20"
+                    className="w-full px-4 py-2.5 pr-12 bg-white/5 border border-white/10 text-white/90 text-sm font-mono focus:border-white/30 transition-colors placeholder:text-white/20"
                     autoFocus
                   />
                   <button
                     onClick={() => setShowSandboxKey(!showSandboxKey)}
+                    aria-label={showSandboxKey ? "Hide API key" : "Show API key"}
                     className="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors text-xs"
                   >
                     {showSandboxKey ? "Hide" : "Show"}
@@ -127,9 +157,9 @@ export function OnboardingModal({ onComplete }: { onComplete: () => void }) {
           {step === 2 && (
             <div className="space-y-4 animate-fade-in">
               <div className="flex items-center gap-3 mb-2">
-                <div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-sm font-semibold text-white/60">2</div>
+                <div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-sm font-semibold text-white/60" aria-hidden="true">2</div>
                 <div>
-                  <div className="text-sm font-medium text-white/90">Configure your LLM Provider</div>
+                  <h3 className="text-sm font-medium text-white/90">Configure your LLM Provider</h3>
                   <div className="text-xs text-white/40">Choose a provider and paste your API key</div>
                 </div>
               </div>
@@ -150,14 +180,14 @@ export function OnboardingModal({ onComplete }: { onComplete: () => void }) {
                 rel="noopener noreferrer"
                 className="flex items-center gap-3 px-4 py-3 bg-white/5 border border-white/10 hover:border-white/30 transition-all group"
               >
-                <svg className="w-5 h-5 text-white/40 group-hover:text-white/70 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <svg className="w-5 h-5 text-white/40 group-hover:text-white/70 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                 </svg>
                 <div className="flex-1">
                   <div className="text-sm text-white/70 group-hover:text-white transition-colors">Get {provider.name} API Key</div>
                   <div className="text-xs text-white/30">{provider.keyUrl.replace("https://", "")}</div>
                 </div>
-                <svg className="w-4 h-4 text-white/20 group-hover:text-white/50 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <svg className="w-4 h-4 text-white/20 group-hover:text-white/50 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                 </svg>
               </a>
@@ -169,7 +199,7 @@ export function OnboardingModal({ onComplete }: { onComplete: () => void }) {
               />
 
               {saveError && (
-                <div className="p-3 bg-red-500/10 border border-red-500/20 text-xs text-red-400">
+                <div className="p-3 bg-red-500/10 border border-red-500/20 text-xs text-red-400" role="alert">
                   {saveError}
                 </div>
               )}
@@ -178,11 +208,11 @@ export function OnboardingModal({ onComplete }: { onComplete: () => void }) {
 
           {step === 3 && (
             <div className="space-y-4 animate-fade-in text-center py-4">
-              <svg className="w-12 h-12 mx-auto text-green-400/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <svg className="w-12 h-12 mx-auto text-green-400/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
               <div>
-                <div className="text-lg font-semibold text-white/90 mb-1">You're all set!</div>
+                <div className="text-lg font-semibold text-white/90 mb-1">You&apos;re all set!</div>
                 <div className="text-sm text-white/50">
                   Your keys are encrypted and saved. You can now try any skill instantly.
                 </div>
diff --git a/src/components/provider-config.tsx b/src/components/provider-config.tsx
index d94419d..18151c1 100644
--- a/src/components/provider-config.tsx
+++ b/src/components/provider-config.tsx
@@ -12,20 +12,22 @@ export function ProviderTabs({
   onChange: (id: string) => void;
 }) {
   return (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-1">
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-1" role="radiogroup" aria-label="LLM provider">
       {PROVIDERS.map((p) => {
         const Icon = p.Icon;
         return (
         <button
           key={p.id}
           onClick={() => onChange(p.id)}
+          role="radio"
+          aria-checked={activeId === p.id}
           className={`px-3 py-2 text-xs font-medium transition-all flex items-center justify-center gap-1.5 ${
             activeId === p.id
               ? "bg-white text-black"
               : "bg-white/5 text-white/60 hover:bg-white/10"
           }`}
         >
-          <Icon size={14} className={`${activeId === p.id ? "text-black" : "text-white/60"}`} />
+          <Icon size={14} className={`${activeId === p.id ? "text-black" : "text-white/60"}`} aria-hidden="true" />
           {p.name}
         </button>
         );
@@ -51,7 +53,7 @@ export function ModelSelector({
           value={value}
           onChange={(e) => onChange(e.target.value)}
           placeholder={`e.g. ${provider.models[0]}`}
-          className="w-full px-4 py-2.5 bg-white/5 border border-white/10 text-white/90 text-sm font-mono outline-none focus:border-white/30 transition-colors placeholder:text-white/20"
+          className="w-full px-4 py-2.5 bg-white/5 border border-white/10 text-white/90 text-sm font-mono focus:border-white/30 transition-colors placeholder:text-white/20"
         />
         <datalist id={`models-${provider.id}`}>
           {provider.models.map((m) => (
@@ -66,7 +68,7 @@ export function ModelSelector({
     <select
       value={value}
       onChange={(e) => onChange(e.target.value)}
-      className="w-full px-4 py-2.5 bg-white/5 border border-white/10 text-white/90 text-sm font-mono outline-none focus:border-white/30 transition-colors appearance-none cursor-pointer"
+      className="w-full px-4 py-2.5 bg-white/5 border border-white/10 text-white/90 text-sm font-mono focus:border-white/30 transition-colors appearance-none cursor-pointer"
     >
       {provider.models.map((m) => (
         <option key={m} value={m} className="bg-[#111] text-white">{m}</option>
@@ -123,7 +125,7 @@ export function ApiKeyInput({
             value={value}
             onChange={(e) => { onChange(e.target.value); setResult(null); }}
             placeholder={`${provider.keyPrefix}...`}
-            className="w-full px-4 py-2.5 pr-12 bg-white/5 border border-white/10 text-white/90 text-sm font-mono outline-none focus:border-white/30 transition-colors placeholder:text-white/20"
+            className="w-full px-4 py-2.5 pr-12 bg-white/5 border border-white/10 text-white/90 text-sm font-mono focus:border-white/30 transition-colors placeholder:text-white/20"
           />
           <button
             onClick={() => setVisible(!visible)}
@@ -182,7 +184,7 @@ export function ProviderSection({
   return (
     <div className={`border transition-colors ${
       isActive ? "border-white/30" : "border-white/10"
-    } bg-black/40 backdrop-blur-sm`}>
+    } bg-black/40`}>
       <button
         onClick={onToggleExpand}
         className="w-full px-5 py-4 flex items-center justify-between"
diff --git a/src/components/sandbox-skeleton.tsx b/src/components/sandbox-skeleton.tsx
index 0cd4ffe..a51ad7c 100644
--- a/src/components/sandbox-skeleton.tsx
+++ b/src/components/sandbox-skeleton.tsx
@@ -3,11 +3,11 @@
 export function SandboxSkeleton({ skillName }: { skillName: string }) {
   return (
     <div className="animate-fade-in w-full">
-      <div className="border border-white/10 bg-black/60 backdrop-blur-sm rounded-lg overflow-hidden">
+      <div className="border border-white/10 bg-black/60 overflow-hidden">
         {/* Header bar */}
         <div className="flex items-center justify-between px-4 py-3 border-b border-white/10 bg-white/[0.02]">
           <div className="flex items-center gap-2">
-            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" aria-hidden="true" />
             <span className="text-xs font-mono text-white/50">
               {skillName}
             </span>
@@ -18,23 +18,23 @@ export function SandboxSkeleton({ skillName }: { skillName: string }) {
         </div>
 
         {/* Chat area skeleton */}
-        <div className="p-6 space-y-4 min-h-[320px]">
+        <div className="p-6 space-y-4 min-h-[320px]" role="status" aria-label="Loading agent session">
           {/* System message */}
           <div className="flex gap-3">
             <div className="w-6 h-6 rounded-full bg-white/5 shrink-0" />
             <div className="space-y-2 flex-1">
-              <div className="h-3 bg-white/5 rounded w-3/4 animate-pulse" />
-              <div className="h-3 bg-white/5 rounded w-1/2 animate-pulse" style={{ animationDelay: "100ms" }} />
+              <div className="h-3 bg-white/5 w-3/4 animate-pulse" />
+              <div className="h-3 bg-white/5 w-1/2 animate-pulse" style={{ animationDelay: "100ms" }} />
             </div>
           </div>
 
           {/* Thinking indicator */}
           <div className="flex gap-3 mt-6">
             <div className="w-6 h-6 rounded-full bg-white/5 shrink-0" />
-            <div className="flex items-center gap-1 py-2">
-              <div className="w-1.5 h-1.5 rounded-full bg-white/20 animate-bounce" style={{ animationDelay: "0ms" }} />
-              <div className="w-1.5 h-1.5 rounded-full bg-white/20 animate-bounce" style={{ animationDelay: "150ms" }} />
-              <div className="w-1.5 h-1.5 rounded-full bg-white/20 animate-bounce" style={{ animationDelay: "300ms" }} />
+            <div className="flex items-center gap-1.5 py-2">
+              <div className="w-1.5 h-1.5 rounded-full bg-white/20 animate-pulse" />
+              <div className="w-1.5 h-1.5 rounded-full bg-white/20 animate-pulse" style={{ animationDelay: "200ms" }} />
+              <div className="w-1.5 h-1.5 rounded-full bg-white/20 animate-pulse" style={{ animationDelay: "400ms" }} />
             </div>
           </div>
         </div>
@@ -42,12 +42,12 @@ export function SandboxSkeleton({ skillName }: { skillName: string }) {
         {/* Input area (disabled) */}
         <div className="px-4 py-3 border-t border-white/10">
           <div className="flex items-center gap-3">
-            <div className="flex-1 h-10 rounded bg-white/[0.03] border border-white/10 flex items-center px-3">
+            <div className="flex-1 h-10 bg-white/[0.03] border border-white/10 flex items-center px-3">
               <span className="text-xs text-white/20">
                 Agent is starting up...
               </span>
             </div>
-            <div className="w-10 h-10 rounded bg-white/5 flex items-center justify-center">
+            <div className="w-10 h-10 bg-white/5 flex items-center justify-center" aria-hidden="true">
               <svg className="w-4 h-4 text-white/15" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
               </svg>
@@ -59,7 +59,7 @@ export function SandboxSkeleton({ skillName }: { skillName: string }) {
       {/* Status bar below */}
       <div className="mt-3 flex items-center px-1">
         <div className="flex items-center gap-2">
-          <div className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
+          <div className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" aria-hidden="true" />
           <span className="text-[11px] text-white/30">Setting up environment...</span>
         </div>
       </div>
diff --git a/src/components/session-control.tsx b/src/components/session-control.tsx
index 8cf56b9..3822c54 100644
--- a/src/components/session-control.tsx
+++ b/src/components/session-control.tsx
@@ -37,19 +37,19 @@ export function SessionControl({
 
   return (
     <div className="animate-fade-in">
-      <div className="border border-white/20 bg-black/40 backdrop-blur-sm p-8">
+      <div className="border border-white/20 bg-black/40 p-8">
         <div className="flex items-center gap-4 mb-4">
-          <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse" />
+          <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse" aria-hidden="true" />
           <h2 className="text-lg font-semibold text-white/90">
             Sandbox Running
           </h2>
-          <span className="ml-auto font-mono text-sm text-white/40">
+          <span className="ml-auto font-mono text-sm text-white/40" role="timer" aria-label={`Elapsed time: ${formatTime(elapsed)}`}>
             {formatTime(elapsed)}
           </span>
         </div>
 
         {/* Cost + Auto-stop bar */}
-        <div className="flex items-center justify-between mb-6 px-3 py-2 bg-white/[0.03] border border-white/8 rounded text-xs">
+        <div className="flex items-center justify-between mb-6 px-3 py-2 bg-white/[0.03] border border-white/8 text-xs">
           <div className="flex items-center gap-3">
             <span className="text-white/40">
               Cost: <span className="text-white/70 font-mono">${cost}</span>
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index d6f71a6..6cc7c43 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -7,9 +7,9 @@ import { SignInButton, UserButton, Show } from "@clerk/nextjs";
 export function SiteHeader({ breadcrumb }: { breadcrumb?: string }) {
   return (
     <header className="fixed top-0 left-0 right-0 z-50">
-      <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
-        <Link href="/" className="flex items-center gap-2.5">
-          <Image src="/logo.svg" alt="TrySkills.sh" width={28} height={28} />
+      <nav aria-label="Main navigation" className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
+        <Link href="/" className="flex items-center gap-2.5 focus-visible:outline-offset-4">
+          <Image src="/logo.svg" alt="" width={28} height={28} aria-hidden="true" />
           <span
             className="text-white/90 text-lg"
             style={{ fontFamily: "var(--font-bilbo)" }}
@@ -24,12 +24,12 @@ export function SiteHeader({ breadcrumb }: { breadcrumb?: string }) {
               {breadcrumb}
             </span>
           )}
-          <nav className="flex items-center gap-6">
+          <div className="flex items-center gap-6">
             <a
               href="https://skills.sh"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-white/60 hover:text-white transition-colors"
+              className="text-sm text-white/60 hover:text-white transition-colors focus-visible:outline-offset-4"
             >
               Skills
             </a>
@@ -37,7 +37,7 @@ export function SiteHeader({ breadcrumb }: { breadcrumb?: string }) {
               href="https://agentskills.io/specification"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-white/60 hover:text-white transition-colors hidden sm:block"
+              className="text-sm text-white/60 hover:text-white transition-colors hidden sm:block focus-visible:outline-offset-4"
             >
               Docs
             </a>
@@ -45,9 +45,10 @@ export function SiteHeader({ breadcrumb }: { breadcrumb?: string }) {
               href="https://github.com/ReScienceLab/TrySkills"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center gap-2 text-sm text-white/60 hover:text-white transition-colors"
+              aria-label="GitHub repository"
+              className="flex items-center gap-2 text-sm text-white/60 hover:text-white transition-colors focus-visible:outline-offset-4"
             >
-              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                 <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
               </svg>
               <span className="hidden sm:inline">GitHub</span>
@@ -63,13 +64,13 @@ export function SiteHeader({ breadcrumb }: { breadcrumb?: string }) {
             <Show when="signed-in">
               <Link
                 href="/dashboard"
-                className="text-sm text-white/60 hover:text-white transition-colors"
+                className="text-sm text-white/60 hover:text-white transition-colors focus-visible:outline-offset-4"
               >
                 Dashboard
               </Link>
               <Link
                 href="/settings"
-                className="text-sm text-white/60 hover:text-white transition-colors"
+                className="text-sm text-white/60 hover:text-white transition-colors focus-visible:outline-offset-4"
               >
                 Settings
               </Link>
@@ -81,9 +82,9 @@ export function SiteHeader({ breadcrumb }: { breadcrumb?: string }) {
                 }}
               />
             </Show>
-          </nav>
+          </div>
         </div>
-      </div>
+      </nav>
     </header>
   );
 }
diff --git a/src/components/skill-preview.tsx b/src/components/skill-preview.tsx
index 54e4103..dc91bf0 100644
--- a/src/components/skill-preview.tsx
+++ b/src/components/skill-preview.tsx
@@ -19,19 +19,19 @@ export function SkillPreview({
 }) {
   return (
     <div className="animate-fade-in">
-      <div className="card p-8 mb-6">
+      <div className="border border-white/20 bg-black/40 p-8 mb-6">
         <div className="flex items-start gap-5">
-          <div className="w-16 h-16 rounded-xl bg-[var(--accent-subtle)] flex items-center justify-center text-3xl shrink-0">
+          <div className="w-14 h-14 bg-white/5 border border-white/10 flex items-center justify-center text-2xl shrink-0">
             {meta.icon || "\u26A1"}
           </div>
           <div className="flex-1">
-            <h1 className="text-2xl font-bold text-[var(--text-primary)] mb-1">
+            <h1 className="text-2xl font-bold text-white/90 mb-1">
               {meta.name || skillName}
             </h1>
-            <div className="text-sm text-[var(--text-muted)] mb-3">
+            <div className="text-sm text-white/40 mb-3">
               by {owner}/{repo}
               {meta.version && (
-                <span className="ml-2 text-[var(--text-tertiary)]">
+                <span className="ml-2 text-white/30">
                   v{meta.version}
                 </span>
               )}
@@ -39,7 +39,7 @@ export function SkillPreview({
                 <span className="ml-2">{meta.installs} installs</span>
               )}
             </div>
-            <p className="text-[var(--text-secondary)] leading-relaxed">
+            <p className="text-white/60 leading-relaxed">
               {meta.description}
             </p>
           </div>
@@ -47,14 +47,14 @@ export function SkillPreview({
       </div>
 
       {body && (
-        <div className="card p-8 mb-6">
-          <h2 className="text-sm font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-4">
+        <div className="border border-white/20 bg-black/40 p-8 mb-6">
+          <h2 className="text-sm font-semibold text-white/40 uppercase tracking-wider mb-4">
             Skill Documentation
           </h2>
-          <div className="prose prose-sm max-w-none text-[var(--text-secondary)] leading-relaxed whitespace-pre-wrap">
+          <div className="prose prose-sm max-w-none text-white/60 leading-relaxed whitespace-pre-wrap">
             {body.slice(0, 2000)}
             {body.length > 2000 && (
-              <span className="text-[var(--text-muted)]">
+              <span className="text-white/30">
                 ... ({Math.round(body.length / 1000)}K chars)
               </span>
             )}
@@ -64,9 +64,9 @@ export function SkillPreview({
 
       <button
         onClick={onLaunch}
-        className="w-full py-4 rounded-xl bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white font-semibold text-lg transition-all duration-200 hover:shadow-xl hover:shadow-[var(--accent)]/20 active:scale-[0.98] shadow-sm"
+        className="w-full py-4 bg-white text-black font-semibold text-lg transition-all hover:bg-white/90 active:scale-[0.98]"
       >
-        Configure & Launch
+        Configure &amp; Launch
       </button>
     </div>
   );
diff --git a/src/components/skill-tree.tsx b/src/components/skill-tree.tsx
index 67f9536..5e2dc13 100644
--- a/src/components/skill-tree.tsx
+++ b/src/components/skill-tree.tsx
@@ -57,7 +57,7 @@ export function SkillTree({
   resolvedPath: string;
 }) {
   return (
-    <div className="border border-white/20 bg-black/40 backdrop-blur-sm">
+    <div className="border border-white/20 bg-black/40">
       <div className="px-4 py-3 border-b border-white/10 flex items-center justify-between">
         <span className="font-mono text-xs text-white/50">
           {resolvedPath}