npm - @vudovn/antigravity-kit - Versions diffs - 1.0.1 → 1.0.5 - Mend

@vudovn/antigravity-kit 1.0.1 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md +6 -47
package/bin/index.js +45 -0
package/package.json +39 -38
package/templates/.agent/skills/vue-expert/SKILL.md +374 -0
package/templates/web/README.md +36 -36
package/templates/web/eslint.config.mjs +18 -18
package/templates/web/next.config.ts +8 -8
package/templates/web/package-lock.json +6549 -6549
package/templates/web/package.json +26 -26
package/templates/web/postcss.config.mjs +7 -7
package/templates/web/public/images/ux-ui-pro-max.svg +1 -0
package/templates/web/src/app/globals.css +390 -275
package/templates/web/src/app/layout.tsx +55 -55
package/templates/web/src/app/page.tsx +23 -23
package/templates/web/src/components/Credits.tsx +29 -119
package/templates/web/src/components/Features.tsx +112 -55
package/templates/web/src/components/Footer.tsx +73 -45
package/templates/web/src/components/Hero.tsx +246 -75
package/templates/web/src/components/HowItWorks.tsx +99 -56
package/templates/web/src/components/Navbar.tsx +48 -70
package/templates/web/src/components/Skills.tsx +84 -115
package/templates/web/tsconfig.json +34 -34
package/templates/web/public/images/antigravity-kit-logo.png +0 -0

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

@@ -1,55 +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>
-  );
-}
+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 CHANGED Viewed

@@ -1,23 +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 />
-    </>
-  );
-}
+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 CHANGED Viewed

@@ -1,4 +1,4 @@
-// External Link Icon
+// 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" />
@@ -6,153 +6,63 @@ const ExternalLinkIcon = () => (
     </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",
+        description: "Design Intelligence - 50 styles, 21 palettes, 50 font pairings",
         link: "https://ui-ux-pro-max-skill.nextlevelbuilder.io/",
-        color: "",
+        badge: "Design",
+        icon: "/images/ux-ui-pro-max.svg"
     },
     {
-        icon: <CpuChipIcon />,
         name: "ClaudeKit",
-        description:
-            "Production-ready AI subagents, workflows, and integrations for software development",
+        description: "Production-ready AI subagents and workflows",
         link: "https://claudekit.cc/",
-        color: "",
+        badge: "AI",
+        icon: "/images/claudekit.png"
     },
 ];
 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 id="credits" className="py-20 px-4 border-t border-[var(--color-border)]">
+            <div className="max-w-3xl mx-auto">
                 {/* Section Header */}
                 <div className="text-center mb-12">
-                    <h2 className="heading-lg mb-4">
-                        Built Upon <span className="gradient-text">Amazing Tools</span>
+                    <p className="text-[#c084fc] font-mono text-sm mb-3">// CREDITS</p>
+                    <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                        Built upon <span className="text-[#22c55e]">amazing</span> tools
                     </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 className="text-[var(--color-text-secondary)]">
+                        Special thanks to the creators of these projects.
                     </p>
                 </div>
                 {/* Credit Cards */}
-                <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+                <div className="grid md:grid-cols-2 gap-4">
                     {credits.map((credit, index) => (
                         <a
                             key={index}
                             href={credit.link}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="glass-card p-6 group cursor-pointer block"
+                            className="group p-5 rounded-xl bg-[var(--color-bg-card)] border border-[var(--color-border)] hover:border-[var(--color-accent)] transition-all cursor-pointer"
                         >
-                            {/* 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>
+                            <div className="flex items-start justify-between mb-3">
+                                <div className="flex items-center gap-2">
+                                    <span className="text-white font-medium flex items-center gap-2">
+                                        <img src={credit.icon} alt={credit.name} className="w-6 h-6" />
+                                        {credit.name}
+                                    </span>
+                                    <span className="text-xs px-2 py-0.5 rounded bg-[#1e1e1e] text-[#64748b] font-mono">
+                                        {credit.badge}
+                                    </span>
+                                </div>
                                 <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>
+                            <p className="text-sm text-[var(--color-text-secondary)]">
+                                {credit.description}
+                            </p>
                         </a>
                     ))}
                 </div>

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

@@ -1,88 +1,145 @@
-// 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" />
+// Feature icons
+const CodeIcon = () => (
+    <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.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 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" />
+const StackIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+        <path d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z" />
+        <path d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z" />
+        <path d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z" />
     </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"
-        />
+const BugIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+        <path fillRule="evenodd" d="M8.478 1.6a.75.75 0 0 1 .273 1.026 3.72 3.72 0 0 0-.425 1.121c.058.058.118.114.18.168A4.491 4.491 0 0 1 12 2.25a4.491 4.491 0 0 1 3.497 1.668c.06-.054.12-.11.178-.167a3.717 3.717 0 0 0-.426-1.125.75.75 0 1 1 1.298-.752 5.22 5.22 0 0 1 .671 2.046.75.75 0 0 1-.187.582c-.241.27-.505.52-.787.749a4.494 4.494 0 0 1 .216 2.1c-.106.792-.753 1.649-1.46 1.649-.707 0-1.354-.857-1.46-1.65a4.494 4.494 0 0 1 .216-2.099c-.281-.23-.545-.48-.786-.75a.75.75 0 0 1-.187-.581 5.22 5.22 0 0 1 .67-2.047.75.75 0 0 1 1.027-.273ZM9.75 6.75a.75.75 0 0 0 0 1.5h.008a.75.75 0 0 0 0-1.5H9.75Zm3.75 0a.75.75 0 0 0 0 1.5h.007a.75.75 0 0 0 0-1.5h-.007ZM7.251 10.314a.75.75 0 0 1 0 1.06l-.126.127a2.25 2.25 0 0 0-.657 1.59v.286a2.25 2.25 0 0 0 .657 1.59l.126.127a.75.75 0 0 1-1.06 1.06l-.127-.126a3.75 3.75 0 0 1-1.096-2.65v-.286a3.75 3.75 0 0 1 1.096-2.651l.127-.127a.75.75 0 0 1 1.06 0Zm9.499 0a.75.75 0 0 1 1.06 0l.127.127a3.75 3.75 0 0 1 1.096 2.65v.286a3.75 3.75 0 0 1-1.096 2.651l-.127.127a.75.75 0 0 1-1.06-1.061l.126-.127a2.25 2.25 0 0 0 .657-1.59v-.286a2.25 2.25 0 0 0-.657-1.59l-.126-.127a.75.75 0 0 1 0-1.06Zm-7.5 3.186a.75.75 0 0 1 0 1.5h-.007a.75.75 0 0 1 0-1.5h.007Zm4.5 0a.75.75 0 0 1 0 1.5h-.008a.75.75 0 0 1 0-1.5h.008ZM12 16.5a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Z" clipRule="evenodd" />
+    </svg>
+);
+const DocumentIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+        <path fillRule="evenodd" d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z" clipRule="evenodd" />
+        <path d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
+    </svg>
+);
+const PaletteIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+        <path fillRule="evenodd" d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.5-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z" 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: <CodeIcon />,
+        title: "Super-Coder Skills",
+        description: "Directives that help the Agent write Clean Code, following SOLID and DRY principles from the first output.",
+        color: "#c084fc",
+        tags: ["Clean Code", "SOLID", "DRY"],
+    },
+    {
+        icon: <StackIcon />,
+        title: "Tech-Stack Specifics",
+        description: "Specialized skills for Modern Web (React/Next.js, Node/NestJS, Tailwind CSS, ...) – areas where default Agents often fall short.",
+        color: "#22c55e",
+        tags: ["React", "Next.js", "NestJS", "..."],
     },
     {
-        icon: <BookOpenIcon />,
-        title: "10 Behavior Rules",
-        description:
-            "Structured guidelines that direct agent behavior including task classification, communication style, and quality checklists.",
+        icon: <BugIcon />,
+        title: "QA & Debugging",
+        description: "Automate error review workflows and write proper Unit Tests.",
+        color: "#f97316",
+        tags: ["Unit Test", "Debug", "QA"],
     },
     {
-        icon: <BoltIcon />,
-        title: "Production Workflows",
-        description:
-            "Step-by-step procedures for common tasks. Invoke with slash commands like /request or /ui-ux-pro-max.",
+        icon: <DocumentIcon />,
+        title: "Documentation Auto",
+        description: "Transform code into technical documentation with a single command.",
+        color: "#3b82f6",
+        tags: ["Auto Docs", "README", "API Docs"],
+    },
+    {
+        icon: <PaletteIcon />,
+        title: "Design Intelligence",
+        description: "Integrates diverse UI style library from UI UX Pro Max.",
+        color: "#ec4899",
+        tags: ["50+ Styles", "21 Palettes", "UI/UX"],
+    },
+    {
+        icon: null, // Coming soon
+        title: "Coming Soon",
+        description: "More features are on the way. Stay tuned for updates!",
+        color: "#64748b",
+        tags: ["TBD"],
+        comingSoon: true,
     },
 ];
 export default function Features() {
     return (
-        <section id="features" className="section">
-            <div className="container-content">
+        <section id="features" className="py-20 px-4 border-t border-[var(--color-border)]">
+            <div className="max-w-5xl mx-auto">
                 {/* 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>
+                    <p className="text-[#c084fc] font-mono text-sm mb-3">// FEATURES</p>
+                    <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                        What&apos;s in the <span className="text-[#22c55e]">Kit?</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 className="text-[var(--color-text-secondary)] max-w-xl mx-auto">
+                        A comprehensive toolkit to supercharge your AI coding assistant.
                     </p>
                 </div>
-                {/* Feature Cards */}
-                <div className="grid md:grid-cols-3 gap-6">
+                {/* Feature Cards Grid */}
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
                     {features.map((feature, index) => (
                         <div
                             key={index}
-                            className="glass-card p-6 cursor-pointer"
+                            className={`group p-6 rounded-xl transition-all ${feature.comingSoon
+                                    ? "border-2 border-dashed border-[var(--color-border)] bg-transparent opacity-60"
+                                    : "bg-[var(--color-bg-card)] border border-[var(--color-border)] hover:border-[var(--color-border-hover)]"
+                                }`}
                         >
-                            <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>
+                            {/* Icon */}
+                            <div
+                                className="w-12 h-12 rounded-lg flex items-center justify-center mb-4"
+                                style={{
+                                    backgroundColor: `${feature.color}15`,
+                                    color: feature.color
+                                }}
+                            >
+                                {feature.comingSoon ? (
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+                                        <path fillRule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z" clipRule="evenodd" />
+                                    </svg>
+                                ) : feature.icon}
+                            </div>
+                            {/* Title */}
+                            <h3 className="text-lg font-semibold text-white mb-2">
+                                {feature.title}
+                            </h3>
+                            {/* Description */}
+                            <p className="text-sm text-[var(--color-text-secondary)] mb-4 leading-relaxed">
+                                {feature.description}
+                            </p>
+                            {/* Tags */}
+                            <div className="flex flex-wrap gap-1.5">
+                                {feature.tags.map((tag, i) => (
+                                    <span
+                                        key={i}
+                                        className="text-xs px-2 py-0.5 rounded bg-[#1e1e1e] font-mono"
+                                        style={{ color: feature.color }}
+                                    >
+                                        {tag}
+                                    </span>
+                                ))}
+                            </div>
                         </div>
                     ))}
                 </div>