@vudovn/antigravity-kit 1.0.1

package/templates/web/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.1.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.2",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/templates/web/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/templates/web/src/app/globals.css

@@ -0,0 +1,276 @@
+@import "tailwindcss";
+
+/* ========================================
+   ANTIGRAVITY KIT - DESIGN SYSTEM
+   Dark Theme with Glassmorphism
+   ======================================== */
+
+@theme {
+    /* Colors */
+    --color-bg-base: #050505;
+    --color-bg-card: rgba(255, 255, 255, 0.05);
+    --color-bg-navbar: rgba(0, 0, 0, 0.6);
+    --color-accent: #3B82F6;
+    --color-accent-hover: #60A5FA;
+    --color-accent-glow: rgba(59, 130, 246, 0.2);
+    --color-text-primary: #FFFFFF;
+    --color-text-secondary: #A1A1AA;
+    --color-text-muted: #71717A;
+    --color-border: rgba(255, 255, 255, 0.1);
+    --color-border-hover: rgba(255, 255, 255, 0.2);
+
+    /* Gradients */
+    --gradient-accent: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+    --gradient-glow: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
+
+    /* Shadows */
+    --shadow-glow: 0 0 60px rgba(59, 130, 246, 0.3);
+    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* Base styles */
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    background-color: var(--color-bg-base);
+    color: var(--color-text-primary);
+    min-height: 100vh;
+}
+
+/* Selection */
+::selection {
+    background-color: var(--color-accent);
+    color: white;
+}
+
+/* Gradient Text */
+.gradient-text {
+    background: var(--gradient-accent);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Glass Card */
+.glass-card {
+    background: var(--color-bg-card);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    transition: all 0.2s ease;
+}
+
+.glass-card:hover {
+    border-color: var(--color-border-hover);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* Glass Navbar */
+.glass-navbar {
+    background: var(--color-bg-navbar);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--color-border);
+}
+
+/* Background Glow */
+.bg-glow {
+    position: absolute;
+    width: 600px;
+    height: 600px;
+    background: var(--gradient-glow);
+    filter: blur(80px);
+    pointer-events: none;
+    z-index: 0;
+}
+
+.bg-glow-accent {
+    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
+}
+
+.bg-glow-purple {
+    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
+}
+
+/* Button Primary */
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    background: var(--color-accent);
+    color: white;
+    font-weight: 500;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    background: var(--color-accent-hover);
+    transform: translateY(-1px);
+}
+
+/* Button Secondary */
+.btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    background: transparent;
+    color: var(--color-text-primary);
+    font-weight: 500;
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.btn-secondary:hover {
+    background: var(--color-bg-card);
+    border-color: var(--color-border-hover);
+}
+
+/* Badge */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border);
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+}
+
+.badge-accent {
+    background: var(--color-accent-glow);
+    border-color: rgba(59, 130, 246, 0.3);
+    color: var(--color-accent-hover);
+}
+
+/* Section */
+.section {
+    position: relative;
+    padding: 5rem 1.5rem;
+}
+
+@media (min-width: 768px) {
+    .section {
+        padding: 6rem 2rem;
+    }
+}
+
+/* Container */
+.container-content {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Heading Styles */
+.heading-xl {
+    font-size: clamp(2.5rem, 6vw, 4rem);
+    font-weight: 700;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+}
+
+.heading-lg {
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+}
+
+.heading-md {
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+/* Body Text */
+.text-body {
+    color: var(--color-text-secondary);
+    line-height: 1.7;
+}
+
+/* Icon wrapper */
+.icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    background: var(--color-accent-glow);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    border-radius: 0.75rem;
+    color: var(--color-accent);
+}
+
+/* Code Block */
+.code-block {
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    font-family: var(--font-geist-mono);
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+    overflow-x: auto;
+}
+
+/* Animations */
+@keyframes float {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes pulse-glow {
+
+    0%,
+    100% {
+        opacity: 0.5;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+.animate-float {
+    animation: float 6s ease-in-out infinite;
+}
+
+.animate-pulse-glow {
+    animation: pulse-glow 4s ease-in-out infinite;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-bg-base);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-border-hover);
+}

package/templates/web/src/app/layout.tsx

@@ -0,0 +1,55 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Antigravity Kit - AI Agent Capability Expansion Toolkit",
+  description:
+    "A comprehensive collection of skills, rules, and workflows to supercharge AI coding assistants for Antigravity. 35+ skills, 10 rules, 57 UI Styles, production-ready workflows.",
+  keywords: [
+    "AI agent",
+    "Antigravity kit",
+    "Antigravity skill",
+    "Antigravity rule",
+    "Antigravity workflow",
+    "Antigravity agent",
+    "Antigravity ide",
+    "coding assistant",
+    "skills",
+    "workflows",
+    "developer tools",
+  ],
+  authors: [{ name: "VudoVN", url: "https://github.com/vudovn" }],
+  openGraph: {
+    title: "Antigravity Kit - AI Agent Capability Expansion Toolkit",
+    description:
+      "35+ skills, 10 rules, 57 UI Styles, production-ready workflows for AI coding assistants for Antigravity.",
+    type: "website",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/templates/web/src/app/page.tsx

@@ -0,0 +1,23 @@
+import Navbar from "@/components/Navbar";
+import Hero from "@/components/Hero";
+import Features from "@/components/Features";
+import Skills from "@/components/Skills";
+import HowItWorks from "@/components/HowItWorks";
+import Credits from "@/components/Credits";
+import Footer from "@/components/Footer";
+
+export default function Home() {
+  return (
+    <>
+      <Navbar />
+      <main>
+        <Hero />
+        <Features />
+        <Skills />
+        <HowItWorks />
+        <Credits />
+      </main>
+      <Footer />
+    </>
+  );
+}

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

@@ -0,0 +1,162 @@
+// External Link Icon
+const ExternalLinkIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
+        <path fillRule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clipRule="evenodd" />
+        <path fillRule="evenodd" d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z" clipRule="evenodd" />
+    </svg>
+);
+
+// UI UX Icon
+const PaletteIcon = () => (
+    <svg
+        viewBox="0 0 48 48"
+        fill="none"
+        className="w-6 h-6 min-[400px]:w-7 min-[400px]:h-7 sm:w-8 sm:h-8"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <defs>
+            <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stopColor="#2563EB" />
+                <stop offset="50%" stopColor="#3B82F6" />
+                <stop offset="100%" stopColor="#F97316" />
+            </linearGradient>
+            <linearGradient id="innerGradient" x1="0%" y1="100%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#F97316" />
+                <stop offset="100%" stopColor="#2563EB" />
+            </linearGradient>
+        </defs>
+        <circle
+            cx={24}
+            cy={24}
+            r={22}
+            stroke="url(#logoGradient)"
+            strokeWidth={3}
+            fill="none"
+        />
+        <rect
+            x={14}
+            y={14}
+            width={12}
+            height={12}
+            rx={2}
+            fill="url(#logoGradient)"
+            opacity="0.9"
+        />
+        <rect
+            x={18}
+            y={18}
+            width={12}
+            height={12}
+            rx={2}
+            fill="url(#innerGradient)"
+            opacity="0.8"
+        />
+        <rect
+            x={22}
+            y={22}
+            width={12}
+            height={12}
+            rx={2}
+            fill="url(#logoGradient)"
+            opacity="0.9"
+        />
+        <circle cx={36} cy={12} r={2} fill="#F97316" />
+        <circle cx={12} cy={36} r="1.5" fill="#3B82F6" />
+    </svg>
+
+);
+
+// ClaudeKit Icon
+const CpuChipIcon = () => (
+    <img src="/images/claudekit.png" />
+);
+
+const credits = [
+    {
+        icon: <PaletteIcon />,
+        name: "UI UX Pro Max",
+        description:
+            "Design Intelligence for Claude Code - 50 styles, 21 color palettes, 50 font pairings, 20 chart types",
+        link: "https://ui-ux-pro-max-skill.nextlevelbuilder.io/",
+        color: "",
+    },
+    {
+        icon: <CpuChipIcon />,
+        name: "ClaudeKit",
+        description:
+            "Production-ready AI subagents, workflows, and integrations for software development",
+        link: "https://claudekit.cc/",
+        color: "",
+    },
+];
+
+export default function Credits() {
+    return (
+        <section id="credits" className="section relative overflow-hidden">
+            {/* Background Glow */}
+            <div className="bg-glow bg-glow-purple left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2" />
+
+            <div className="container-content relative z-10">
+                {/* Section Header */}
+                <div className="text-center mb-12">
+                    <h2 className="heading-lg mb-4">
+                        Built Upon <span className="gradient-text">Amazing Tools</span>
+                    </h2>
+                    <p className="text-body max-w-2xl mx-auto">
+                        Special thanks to the creators of these incredible projects that
+                        make Antigravity Kit possible.
+                    </p>
+                </div>
+
+                {/* Credit Cards */}
+                <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+                    {credits.map((credit, index) => (
+                        <a
+                            key={index}
+                            href={credit.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="glass-card p-6 group cursor-pointer block"
+                        >
+                            {/* Icon with gradient background */}
+                            <div
+                                className={`
+                  w-16 h-16 rounded-xl mb-4 flex items-center justify-center
+                  bg-gradient-to-br ${credit.color} text-white
+                `}
+                            >
+                                {credit.icon}
+                            </div>
+
+                            {/* Name with external link */}
+                            <div className="flex items-center gap-2 mb-2">
+                                <h3 className="heading-md">{credit.name}</h3>
+                                <ExternalLinkIcon />
+                            </div>
+
+                            {/* Description */}
+                            <p className="text-body text-sm">{credit.description}</p>
+
+                            {/* Link hint */}
+                            <div className="mt-4 text-sm text-[var(--color-accent)] flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                Visit project
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
+                                    className="w-4 h-4"
+                                >
+                                    <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>
+                            </div>
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

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

@@ -0,0 +1,92 @@
+// SVG Icons
+const BrainIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="w-6 h-6"
+    >
+        <path d="M11.645 20.91l-.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 BookOpenIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="w-6 h-6"
+    >
+        <path d="M11.25 4.533A9.707 9.707 0 0 0 6 3a9.735 9.735 0 0 0-3.25.555.75.75 0 0 0-.5.707v14.25a.75.75 0 0 0 1 .707A8.237 8.237 0 0 1 6 18.75c1.995 0 3.823.707 5.25 1.886V4.533ZM12.75 20.636A8.214 8.214 0 0 1 18 18.75c.966 0 1.89.166 2.75.47a.75.75 0 0 0 1-.708V4.262a.75.75 0 0 0-.5-.707A9.735 9.735 0 0 0 18 3a9.707 9.707 0 0 0-5.25 1.533v16.103Z" />
+    </svg>
+);
+
+const BoltIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="w-6 h-6"
+    >
+        <path
+            fillRule="evenodd"
+            d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+const features = [
+    {
+        icon: <BrainIcon />,
+        title: "35+ Domain Skills",
+        description:
+            "Expert knowledge in React, Next.js, Node.js, databases, testing, DevOps, and more. The agent automatically applies relevant expertise.",
+    },
+    {
+        icon: <BookOpenIcon />,
+        title: "10 Behavior Rules",
+        description:
+            "Structured guidelines that direct agent behavior including task classification, communication style, and quality checklists.",
+    },
+    {
+        icon: <BoltIcon />,
+        title: "Production Workflows",
+        description:
+            "Step-by-step procedures for common tasks. Invoke with slash commands like /request or /ui-ux-pro-max.",
+    },
+];
+
+export default function Features() {
+    return (
+        <section id="features" className="section">
+            <div className="container-content">
+                {/* Section Header */}
+                <div className="text-center mb-16">
+                    <h2 className="heading-lg mb-4">
+                        Everything You Need to{" "}
+                        <span className="gradient-text">Level Up</span>
+                    </h2>
+                    <p className="text-body max-w-2xl mx-auto">
+                        A complete toolkit combining skills, rules, and workflows to
+                        transform your AI coding assistant into a domain expert.
+                    </p>
+                </div>
+
+                {/* Feature Cards */}
+                <div className="grid md:grid-cols-3 gap-6">
+                    {features.map((feature, index) => (
+                        <div
+                            key={index}
+                            className="glass-card p-6 cursor-pointer"
+                        >
+                            <div className="icon-wrapper mb-4">{feature.icon}</div>
+                            <h3 className="heading-md mb-3">{feature.title}</h3>
+                            <p className="text-body text-sm">{feature.description}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}