@vudovn/antigravity-kit 1.0.1

package/templates/web/src/components/Footer.tsx

@@ -0,0 +1,74 @@
+// Social Icons
+const GitHubIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+);
+
+const HeartIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4 text-red-500">
+        <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
+    </svg>
+);
+
+const CoffeeIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+        <path fillRule="evenodd" d="M3.75 6a.75.75 0 0 1 .75-.75h13.5a.75.75 0 0 1 0 1.5H4.5a.75.75 0 0 1-.75-.75ZM3.75 12a.75.75 0 0 1 .75-.75h13.5a.75.75 0 0 1 0 1.5H4.5a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
+        <path d="M5.25 9.75a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5h-9ZM3.75 18a.75.75 0 0 1 .75-.75h9a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1-.75-.75ZM18.75 7.5a2.25 2.25 0 0 0 0 4.5h.75a.75.75 0 0 0 .75-.75v-3a.75.75 0 0 0-.75-.75h-.75Z" />
+    </svg>
+);
+
+export default function Footer() {
+    return (
+        <footer className="border-t border-[var(--color-border)] py-12">
+            <div className="container-content px-4">
+                <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+                    {/* Made with love */}
+                    <div className="flex items-center gap-2 text-[var(--color-text-secondary)]">
+                        <span>Made with</span>
+                        <HeartIcon />
+                        <span>by</span>
+                        <a
+                            href="https://github.com/vudovn"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-white hover:text-[var(--color-accent)] transition-colors cursor-pointer"
+                        >
+                            VudoVN
+                        </a>
+                    </div>
+
+                    {/* Links */}
+                    <div className="flex items-center gap-4">
+                        {/* GitHub */}
+                        <a
+                            href="https://github.com/vudovn/antigravity-kit"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-2 rounded-lg bg-[var(--color-bg-card)] border border-[var(--color-border)] hover:border-[var(--color-border-hover)] transition-colors cursor-pointer"
+                            aria-label="GitHub Repository"
+                        >
+                            <GitHubIcon />
+                        </a>
+
+                        {/* Buy me a coffee */}
+                        <a
+                            href="https://img.vietqr.io/image/mbbank-0779330918-compact2.jpg"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-400 hover:bg-amber-500/20 transition-colors cursor-pointer"
+                        >
+                            <CoffeeIcon />
+                            <span className="text-sm">Buy me a coffee</span>
+                        </a>
+                    </div>
+                </div>
+
+                {/* Copyright */}
+                <div className="mt-8 text-center text-[var(--color-text-muted)] text-sm">
+                    © {new Date().getFullYear()} Antigravity Kit. MIT License.
+                </div>
+            </div>
+        </footer>
+    );
+}

package/templates/web/src/components/Hero.tsx

@@ -0,0 +1,117 @@
+// SVG Icons
+const ArrowRightIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        className="w-5 h-5"
+    >
+        <path
+            fillRule="evenodd"
+            d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+const GitHubIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="w-5 h-5"
+    >
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+);
+
+const SparklesIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="w-4 h-4"
+    >
+        <path
+            fillRule="evenodd"
+            d="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+// Stats data
+const stats = [
+    { value: "35+", label: "Skills" },
+    { value: "10", label: "Rules" },
+    { value: "57", label: "UI Styles" },
+];
+
+export default function Hero() {
+    return (
+        <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-24 pb-16">
+            {/* Background Glows */}
+            <div className="bg-glow bg-glow-accent top-0 left-1/2 -translate-x-1/2 -translate-y-1/4 animate-pulse-glow" />
+            <div className="bg-glow bg-glow-purple top-1/4 right-0 translate-x-1/4" />
+
+            <div className="container-content relative z-10 text-center px-4">
+                {/* Badge */}
+                <div className="inline-flex items-center gap-2 mb-8">
+                    <span className="badge badge-accent">
+                        <SparklesIcon />
+                        AI Agent Toolkit
+                    </span>
+                </div>
+
+                {/* Headline */}
+                <h1 className="heading-xl mb-6 max-w-4xl mx-auto">
+                    <span className="gradient-text">Supercharge</span> Your AI Coding
+                    Assistant for Antigravity
+                </h1>
+
+                {/* Subheadline */}
+                <p className="text-body text-lg md:text-xl max-w-2xl mx-auto mb-10">
+                    A comprehensive collection of{" "}
+                    <span className="text-white font-medium">skills</span>,{" "}
+                    <span className="text-white font-medium">rules</span>, and{" "}
+                    <span className="text-white font-medium">workflows</span> to expand
+                    the capabilities of AI coding agents.
+                </p>
+
+                {/* CTA Buttons */}
+                <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
+                    <a href="#how-it-works" className="btn-primary">
+                        Get Started
+                        <ArrowRightIcon />
+                    </a>
+                    <a
+                        href="https://github.com/vudovn/antigravity-kit"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="btn-secondary"
+                    >
+                        <GitHubIcon />
+                        View on GitHub
+                    </a>
+                </div>
+
+                {/* Stats */}
+                <div className="flex flex-wrap items-center justify-center gap-8 md:gap-12">
+                    {stats.map((stat) => (
+                        <div key={stat.label} className="text-center">
+                            <div className="text-3xl md:text-4xl font-bold text-white mb-1">
+                                {stat.value}
+                            </div>
+                            <div className="text-sm text-[var(--color-text-secondary)]">
+                                {stat.label}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* Bottom Gradient Fade */}
+            <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[var(--color-bg-base)] to-transparent pointer-events-none" />
+        </section>
+    );
+}

package/templates/web/src/components/HowItWorks.tsx

@@ -0,0 +1,96 @@
+// Step Icons
+const FolderIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+        <path d="M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z" />
+    </svg>
+);
+
+const CommandLineIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+        <path fillRule="evenodd" d="M2.25 6a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V6Zm3.97.97a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 0 1-1.06-1.06l1.72-1.72-1.72-1.72a.75.75 0 0 1 0-1.06Zm4.28 4.28a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z" clipRule="evenodd" />
+    </svg>
+);
+
+const RocketLaunchIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+        <path fillRule="evenodd" d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 0 1 .75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 0 1 9.75 22.5a.75.75 0 0 1-.75-.75v-4.131A15.838 15.838 0 0 1 6.382 15H2.25a.75.75 0 0 1-.75-.75 6.75 6.75 0 0 1 7.815-6.666ZM15 6.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" clipRule="evenodd" />
+        <path d="M5.26 17.242a.75.75 0 1 0-.897-1.203 5.243 5.243 0 0 0-2.05 5.022.75.75 0 0 0 .625.627 5.243 5.243 0 0 0 5.022-2.051.75.75 0 1 0-1.202-.897 3.744 3.744 0 0 1-3.008 1.51c0-1.23.592-2.323 1.51-3.008Z" />
+    </svg>
+);
+
+const steps = [
+    {
+        icon: <FolderIcon />,
+        title: "Clone the Repository",
+        description: "Get the toolkit from GitHub",
+        code: "git clone https://github.com/vudovn/antigravity-kit.git",
+    },
+    {
+        icon: <CommandLineIcon />,
+        title: "Copy to Your Project",
+        description: "Add the .agent folder to your workspace",
+        code: "cp -r antigravity-kit/.agent your-project/",
+    },
+    {
+        icon: <RocketLaunchIcon />,
+        title: "Start Using",
+        description: "Skills auto-apply, invoke workflows with slash commands",
+        code: "Your prompt",
+    },
+];
+
+export default function HowItWorks() {
+    return (
+        <section id="how-it-works" className="section relative overflow-hidden">
+            {/* Background Glow */}
+            <div className="bg-glow bg-glow-accent right-0 top-0 translate-x-1/2" />
+
+            <div className="container-content relative z-10">
+                {/* Section Header */}
+                <div className="text-center mb-16">
+                    <h2 className="heading-lg mb-4">
+                        Get Started in <span className="gradient-text">3 Steps</span>
+                    </h2>
+                    <p className="text-body max-w-2xl mx-auto">
+                        Simple installation process to unlock powerful AI agent
+                        capabilities in your project.
+                    </p>
+                </div>
+
+                {/* Steps */}
+                <div className="grid md:grid-cols-3 gap-8">
+                    {steps.map((step, index) => (
+                        <div key={index} className="relative">
+                            {/* Step Number */}
+                            <div className="absolute -top-4 -left-4 w-8 h-8 rounded-full bg-[var(--color-accent)] flex items-center justify-center text-white font-bold text-sm">
+                                {index + 1}
+                            </div>
+
+                            <div className="glass-card p-6 h-full">
+                                {/* Icon */}
+                                <div className="icon-wrapper mb-4">{step.icon}</div>
+
+                                {/* Title */}
+                                <h3 className="heading-md mb-2">{step.title}</h3>
+
+                                {/* Description */}
+                                <p className="text-body text-sm mb-4">{step.description}</p>
+
+                                {/* Code Block */}
+                                <div className="code-block">
+                                    <code className="text-[var(--color-accent)]">{step.code}</code>
+                                </div>
+                            </div>
+
+                            {/* Connector Line (not on last item) */}
+                            {index < steps.length - 1 && (
+                                <div className="hidden md:block absolute top-1/2 -right-4 w-8 h-[2px] bg-[var(--color-border)]" />
+                            )}
+                        </div>
+                    ))}
+                </div>
+
+            </div>
+        </section>
+    );
+}

package/templates/web/src/components/Navbar.tsx

@@ -0,0 +1,87 @@
+import Link from "next/link";
+
+// SVG Icons
+const RocketIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="w-6 h-6"
+    >
+        <path
+            fillRule="evenodd"
+            d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 0 1 .75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 0 1 9.75 22.5a.75.75 0 0 1-.75-.75v-4.131A15.838 15.838 0 0 1 6.382 15H2.25a.75.75 0 0 1-.75-.75 6.75 6.75 0 0 1 7.815-6.666ZM15 6.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
+            clipRule="evenodd"
+        />
+        <path d="M5.26 17.242a.75.75 0 1 0-.897-1.203 5.243 5.243 0 0 0-2.05 5.022.75.75 0 0 0 .625.627 5.243 5.243 0 0 0 5.022-2.051.75.75 0 1 0-1.202-.897 3.744 3.744 0 0 1-3.008 1.51c0-1.23.592-2.323 1.51-3.008Z" />
+    </svg>
+);
+
+const GitHubIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="w-5 h-5"
+    >
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+);
+
+export default function Navbar() {
+    return (
+        <nav className="fixed top-4 left-4 right-4 z-50">
+            <div className="glass-navbar rounded-full max-w-4xl mx-auto px-6 py-3 flex items-center justify-between">
+                {/* Logo */}
+                <Link href="/" className="flex items-center gap-2 cursor-pointer">
+                    <div className="text-[var(--color-accent)]">
+                        {/* <RocketIcon /> */}
+                        <img src="/images/logo.png" alt="Logo" className="w-5" />
+                    </div>
+                    <span className="font-semibold text-lg hidden sm:inline">
+                        Antigravity Kit
+                    </span>
+                </Link>
+
+                {/* Navigation Links */}
+                <div className="hidden md:flex items-center gap-6">
+                    <a
+                        href="#features"
+                        className="text-[var(--color-text-secondary)] hover:text-white transition-colors cursor-pointer"
+                    >
+                        Features
+                    </a>
+                    <a
+                        href="#skills"
+                        className="text-[var(--color-text-secondary)] hover:text-white transition-colors cursor-pointer"
+                    >
+                        Skills
+                    </a>
+                    <a
+                        href="#how-it-works"
+                        className="text-[var(--color-text-secondary)] hover:text-white transition-colors cursor-pointer"
+                    >
+                        How It Works
+                    </a>
+                    <a
+                        href="#credits"
+                        className="text-[var(--color-text-secondary)] hover:text-white transition-colors cursor-pointer"
+                    >
+                        Credits
+                    </a>
+                </div>
+
+                {/* GitHub Link */}
+                <a
+                    href="https://github.com/vudovn/antigravity-kit"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-bg-card)] border border-[var(--color-border)] hover:border-[var(--color-border-hover)] transition-colors cursor-pointer"
+                >
+                    <GitHubIcon />
+                    <span className="hidden sm:inline text-sm">GitHub</span>
+                </a>
+            </div>
+        </nav>
+    );
+}

package/templates/web/src/components/Skills.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useState } from "react";
+
+// Category Icons
+const CodeIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
+        <path fillRule="evenodd" d="M14.447 3.026a.75.75 0 0 1 .527.921l-4.5 16.5a.75.75 0 0 1-1.448-.394l4.5-16.5a.75.75 0 0 1 .921-.527ZM16.72 6.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 0 1 0-1.06Zm-9.44 0a.75.75 0 0 1 0 1.06L2.56 12l4.72 4.72a.75.75 0 0 1-1.06 1.06L.97 12.53a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z" clipRule="evenodd" />
+    </svg>
+);
+
+const ServerIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
+        <path d="M4.08 5.227A3 3 0 0 1 6.979 3H17.02a3 3 0 0 1 2.9 2.227l2.113 7.926A5.228 5.228 0 0 0 18.75 12H5.25a5.228 5.228 0 0 0-3.284 1.153L4.08 5.227Z" />
+        <path fillRule="evenodd" d="M5.25 13.5a3.75 3.75 0 1 0 0 7.5h13.5a3.75 3.75 0 1 0 0-7.5H5.25Zm10.5 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm3.75-.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" clipRule="evenodd" />
+    </svg>
+);
+
+const CircleStackIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
+        <path d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875Z" />
+        <path d="M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.283 8.283 0 0 0 1.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.285 8.285 0 0 0 1.897 1.384C6.809 12.164 9.315 12.75 12 12.75Z" />
+        <path d="M12 18.75c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 0 0 1.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 0 0 1.897 1.384C6.809 18.164 9.315 18.75 12 18.75Z" />
+    </svg>
+);
+
+const BeakerIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
+        <path fillRule="evenodd" d="M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z" clipRule="evenodd" />
+    </svg>
+);
+
+const CloudIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
+        <path fillRule="evenodd" d="M4.5 9.75a6 6 0 0 1 11.573-2.226 3.75 3.75 0 0 1 4.133 4.303A4.5 4.5 0 0 1 18 20.25H6.75a5.25 5.25 0 0 1-2.23-10.004 6.072 6.072 0 0 1-.02-.496Z" clipRule="evenodd" />
+    </svg>
+);
+
+const SparklesIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
+        <path fillRule="evenodd" d="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5Z" clipRule="evenodd" />
+    </svg>
+);
+
+// Skills data by category
+const skillCategories = [
+    {
+        id: "frontend",
+        name: "Frontend",
+        icon: <CodeIcon />,
+        skills: [
+            { name: "react-expert", description: "React 18/19, hooks, patterns, performance" },
+            { name: "nextjs-expert", description: "App Router, Server Components, SSR" },
+            { name: "css-expert", description: "CSS architecture, responsive, design systems" },
+            { name: "state-management-expert", description: "Redux, Zustand, React Query" },
+            { name: "ui-ux-pro-max", description: "50 styles, 21 palettes, 50 font pairings" },
+        ],
+    },
+    {
+        id: "backend",
+        name: "Backend",
+        icon: <ServerIcon />,
+        skills: [
+            { name: "nodejs-expert", description: "Async patterns, modules, performance" },
+            { name: "nestjs-expert", description: "Module architecture, DI, testing" },
+            { name: "rest-api-expert", description: "RESTful design, HTTP semantics" },
+            { name: "auth-expert", description: "JWT, OAuth 2.0, RBAC, security" },
+        ],
+    },
+    {
+        id: "database",
+        name: "Database",
+        icon: <CircleStackIcon />,
+        skills: [
+            { name: "prisma-expert", description: "Schema design, migrations, queries" },
+            { name: "database-expert", description: "General database optimization" },
+            { name: "postgres-expert", description: "PostgreSQL-specific patterns" },
+            { name: "mongodb-expert", description: "MongoDB document modeling" },
+        ],
+    },
+    {
+        id: "testing",
+        name: "Testing",
+        icon: <BeakerIcon />,
+        skills: [
+            { name: "testing-expert", description: "General testing strategies" },
+            { name: "jest-expert", description: "Jest framework, mocking" },
+            { name: "vitest-expert", description: "Vitest, Vite integration" },
+            { name: "playwright-expert", description: "E2E testing, browser automation" },
+        ],
+    },
+    {
+        id: "devops",
+        name: "DevOps",
+        icon: <CloudIcon />,
+        skills: [
+            { name: "devops-expert", description: "CI/CD, infrastructure" },
+            { name: "docker-expert", description: "Containerization, Compose" },
+            { name: "github-actions-expert", description: "GitHub Actions workflows" },
+            { name: "git-expert", description: "Git workflows, conflicts" },
+        ],
+    },
+    {
+        id: "quality",
+        name: "Code Quality",
+        icon: <SparklesIcon />,
+        skills: [
+            { name: "code-review", description: "Comprehensive code review" },
+            { name: "refactoring-expert", description: "Code smell detection" },
+            { name: "typescript-expert", description: "TypeScript patterns, type system" },
+            { name: "accessibility-expert", description: "WCAG compliance, a11y" },
+        ],
+    },
+];
+
+export default function Skills() {
+    const [activeCategory, setActiveCategory] = useState("frontend");
+
+    const currentCategory = skillCategories.find((c) => c.id === activeCategory);
+
+    return (
+        <section id="skills" className="section relative overflow-hidden">
+            {/* Background Glow */}
+            <div className="bg-glow bg-glow-purple left-0 top-1/2 -translate-y-1/2 -translate-x-1/2" />
+
+            <div className="container-content relative z-10">
+                {/* Section Header */}
+                <div className="text-center mb-12">
+                    <h2 className="heading-lg mb-4">
+                        <span className="gradient-text">35+</span> Domain Expert Skills
+                    </h2>
+                    <p className="text-body max-w-2xl mx-auto">
+                        The agent automatically identifies and uses the appropriate skill
+                        for each task, bringing domain expertise to every interaction.
+                    </p>
+                </div>
+
+                {/* Category Tabs */}
+                <div className="flex flex-wrap justify-center gap-2 mb-8">
+                    {skillCategories.map((category) => (
+                        <button
+                            key={category.id}
+                            onClick={() => setActiveCategory(category.id)}
+                            className={`
+                flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium
+                transition-all duration-200 cursor-pointer
+                ${activeCategory === category.id
+                                    ? "bg-[var(--color-accent)] text-white"
+                                    : "bg-[var(--color-bg-card)] text-[var(--color-text-secondary)] border border-[var(--color-border)] hover:border-[var(--color-border-hover)]"
+                                }
+              `}
+                        >
+                            {category.icon}
+                            {category.name}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Skills Grid */}
+                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {currentCategory?.skills.map((skill, index) => (
+                        <div
+                            key={index}
+                            className="glass-card p-4 cursor-pointer"
+                        >
+                            <code className="text-[var(--color-accent)] text-sm font-mono">
+                                {skill.name}
+                            </code>
+                            <p className="text-body text-sm mt-2">{skill.description}</p>
+                        </div>
+                    ))}
+                </div>
+
+                {/* More Skills Note */}
+                <p className="text-center text-[var(--color-text-muted)] text-sm mt-8">
+                    + many more specialized skills for AI SDK, Vite, Webpack, and advanced
+                    debugging
+                </p>
+            </div>
+        </section>
+    );
+}

package/templates/web/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}