Add animated mesh gradient hero with overlay content

- Add @paper-design/shaders for WebGL mesh gradient effect
- Create hero-shader.js with liquid ink gradient (grayscale palette)
- Add overlay content: title, tagline, and CTA on shader
- Update hero section structure and styling
- Fix accessibility: gallery dot buttons, toggle ARIA attributes
- Fix undefined --color-terracotta CSS variable
- Update distribution structure for Codex/Cursor skills

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

scripts/lib/transformers/claude-code.js

@@ -79,11 +79,18 @@ export function transformClaudeCode(commands, skills, distDir, patterns = null)
   for (const skill of skills) {
     const skillDir = path.join(skillsDir, skill.name);
 
-    const frontmatter = generateYamlFrontmatter({
+    const frontmatterObj = {
       name: skill.name,
       description: skill.description,
-      ...(skill.license && { license: skill.license })
-    });
+    };
+
+    // Add optional fields if present
+    if (skill.license) frontmatterObj.license = skill.license;
+    if (skill.compatibility) frontmatterObj.compatibility = skill.compatibility;
+    if (skill.metadata) frontmatterObj.metadata = skill.metadata;
+    if (skill.allowedTools) frontmatterObj['allowed-tools'] = skill.allowedTools;
+
+    const frontmatter = generateYamlFrontmatter(frontmatterObj);
 
     let body = skill.body;