winter-super-cli 2026.5.15

package/resources/local/agents.md/components/ExampleListSection.tsx

@@ -0,0 +1,188 @@
+import React from "react";
+
+// GitHub language colors for badge backgrounds
+const LANG_BG_COLORS: Record<string, string> = {
+  "TypeScript": "#3178c6",
+  "Java": "#b07219",
+  "Python": "#3572a5",
+  "Rust": "#dea584",
+  "C++": "#f34b7d",
+};
+
+interface RepoCardProps {
+  /** e.g. "openai/codex" */
+  name: string;
+  /** Short 1-2 line summary */
+  description: string;
+  /** Primary language */
+  language: string;
+}
+
+/** Hard-coded examples used for the marketing page. */
+const REPOS: RepoCardProps[] = [
+  {
+    name: "openai/codex",
+    description: "General-purpose CLI tooling for AI coding agents.",
+    language: "Rust",
+  },
+  {
+    name: "apache/airflow",
+    description:
+      "Platform to programmatically author, schedule, and monitor workflows.",
+    language: "Python",
+  },
+  {
+    name: "temporalio/sdk-java",
+    description:
+      "Java SDK for Temporal, workflow orchestration defined in code.",
+    language: "Java",
+  },
+  {
+    name: "PlutoLang/Pluto",
+    description: "A superset of Lua 5.4 with a focus on general-purpose programming.",
+    language: "C++",
+  },
+];
+
+interface ExampleListSectionProps {
+  contributorsByRepo?: Record<string, { avatars: string[]; total: number }>;
+  standalone?: boolean; // if false wraps with its own section
+}
+
+const InnerGrid = ({
+  contributorsByRepo = {},
+}: {
+  contributorsByRepo: Record<string, { avatars: string[]; total: number }>;
+}) => (
+  <>
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {REPOS.map((repo, key) => (
+        <ExampleCard
+          key={repo.name}
+          repo={repo}
+          avatars={contributorsByRepo[repo.name]?.avatars ?? []}
+          hideOnSmall={key > 3}
+          hideOnMedium={key > 2}
+          totalContributors={
+            contributorsByRepo[repo.name]?.total ??
+            contributorsByRepo[repo.name]?.avatars.length ??
+            0
+          }
+        />
+      ))}
+    </div>
+    <div className="flex justify-center mt-6">
+      <a
+        href="https://github.com/search?q=path%3AAGENTS.md+NOT+is%3Afork+NOT+is%3Aarchived&type=code"
+        className="text-base font-medium underline hover:no-underline"
+      >
+        View 60k+ examples on GitHub
+      </a>
+    </div>
+  </>
+);
+
+const ExampleListSection = ({
+  contributorsByRepo = {},
+  standalone = false,
+}: ExampleListSectionProps) => {
+  if (standalone) {
+    return (
+      <div className="max-w-6xl mx-auto">
+        <InnerGrid contributorsByRepo={contributorsByRepo} />
+      </div>
+    );
+  }
+
+  return (
+    <section className="px-6 pb-12 -mt-36">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="text-3xl font-semibold mb-6">Who uses AGENTS.md?</h2>
+        <InnerGrid contributorsByRepo={contributorsByRepo} />
+      </div>
+    </section>
+  );
+};
+
+interface ExampleCardPropsExtended {
+  repo: RepoCardProps;
+  avatars?: string[];
+  totalContributors?: number;
+  hideOnSmall?: boolean;
+  hideOnMedium?: boolean;
+}
+
+function ExampleCard({
+  repo,
+  avatars = [],
+  totalContributors = 0,
+  hideOnSmall = false,
+  hideOnMedium = false,
+}: ExampleCardPropsExtended) {
+  // Show top 3 contributors; ensure highest-ranked appears rightmost.
+  const orderedAvatars = avatars.slice(0, 3).reverse();
+  // Badge background color based on GitHub language colors
+  const badgeBg = LANG_BG_COLORS[repo.language] ?? "#6b7280";
+
+  return (
+    <a
+      href={`https://github.com/${repo.name}/blob/-/AGENTS.md`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`lg:aspect-video bg-white dark:bg-black border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm flex flex-col justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
+        hideOnSmall
+          ? "hidden lg:flex"
+          : hideOnMedium
+          ? "flex md:hidden lg:flex"
+          : ""
+      }`}
+    >
+      <div>
+        <h3
+          className="font-semibold text-lg leading-snug truncate"
+          title={repo.name}
+        >
+          {repo.name}
+        </h3>
+        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          {repo.description}
+        </p>
+      </div>
+
+      <div className="flex items-end justify-between mt-4">
+        <span
+          className="text-xs font-semibold px-2 py-0.5 rounded"
+          style={{ backgroundColor: badgeBg, color: "#fff" }}
+        >
+          {repo.language}
+        </span>
+        <div className="flex items-center justify-center">
+          <div className="flex items-center justify-center -space-x-2">
+            {orderedAvatars.length > 0
+              ? orderedAvatars.map((url, i) => (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    key={i}
+                    src={url}
+                    alt="Contributor avatar"
+                    className="w-6 h-6 rounded-full ring-2 ring-white dark:ring-gray-900 object-cover block shrink-0"
+                  />
+                ))
+              : Array.from({ length: 3 }).map((_, i) => (
+                  <span
+                    key={i}
+                    aria-hidden
+                    className="w-6 h-6 rounded-full bg-gray-300 dark:bg-gray-700 ring-2 ring-white dark:ring-gray-900 block shrink-0"
+                  />
+                ))}
+          </div>
+          <span className="ml-2 text-xs font-semibold px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 translate-y-[1px]">
+            + {totalContributors}
+          </span>
+        </div>
+      </div>
+    </a>
+  );
+}
+
+export default ExampleListSection;

package/resources/local/agents.md/components/ExamplesSection.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Section from "@/components/Section";
+import CodeExample from "@/components/CodeExample";
+import ExampleListSection from "@/components/ExampleListSection";
+
+interface ExamplesSectionProps {
+  contributorsByRepo: Record<string, { avatars: string[]; total: number }>;
+}
+
+export default function ExamplesSection({ contributorsByRepo }: ExamplesSectionProps) {
+  return (
+    <Section id="examples" title="Examples" className="py-12" center>
+      {/* Wide code example */}
+      <div className="mb-4">
+        <CodeExample compact />
+      </div>
+
+      {/* Repo cards */}
+      <ExampleListSection contributorsByRepo={contributorsByRepo} standalone />
+    </Section>
+  );
+}

package/resources/local/agents.md/components/FAQSection.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import Section from "@/components/Section";
+import CodeExample from "@/components/CodeExample";
+
+interface FAQItem {
+  question: string;
+  answer: React.ReactNode;
+}
+
+export default function FAQ() {
+  const faqItems: FAQItem[] = [
+    {
+      question: "Are there required fields?",
+      answer:
+        "No. AGENTS.md is just standard Markdown. Use any headings you like; the agent simply parses the text you provide.",
+    },
+    {
+      question: "What if instructions conflict?",
+      answer:
+        "The closest AGENTS.md to the edited file wins; explicit user chat prompts override everything.",
+    },
+    {
+      question: "Will the agent run testing commands found in AGENTS.md automatically?",
+      answer:
+        "Yes—if you list them. The agent will attempt to execute relevant programmatic checks and fix failures before finishing the task.",
+    },
+    {
+      question: "Can I update it later?",
+      answer: "Absolutely. Treat AGENTS.md as living documentation.",
+    },
+    {
+      question: "How do I migrate existing docs to AGENTS.md?",
+      answer: (
+        <>
+          <p className="mb-2">
+            Rename existing files to AGENTS.md and create symbolic links for backward compatibility:
+          </p>
+          <div className="w-full flex justify-center">
+            <CodeExample
+              code="mv AGENT.md AGENTS.md && ln -s AGENTS.md AGENT.md"
+              compact
+              heightClass="min-h-[48px]"
+              centerVertically
+            />
+          </div>
+        </>
+      ),
+    },
+    {
+      question: "How do I configure Aider?",
+      answer: (
+        <>
+          <p className="mb-2">
+            Configure Aider to use AGENTS.md in <code>.aider.conf.yml</code>:
+          </p>
+          <div className="w-full flex justify-center">
+            <CodeExample
+              code="read: AGENTS.md"
+              compact
+              heightClass="min-h-[48px]"
+              centerVertically
+            />
+          </div>
+        </>
+      ),
+    },
+    {
+      question: "How do I configure Gemini CLI?",
+      answer: (
+        <>
+          <p className="mb-2">
+            Configure Gemini CLI to use AGENTS.md in <code>.gemini/settings.json</code>:
+          </p>
+          <div className="w-full flex justify-center">
+            <CodeExample
+              code='{
+  "context": {
+    "fileName": "AGENTS.md"
+  },
+}'
+              compact
+              heightClass="min-h-[48px]"
+              centerVertically
+            />
+          </div>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <Section
+      id="faq"
+      title="FAQ"
+      className="py-20"
+      center
+      maxWidthClass="max-w-3xl"
+    >
+      <div className="space-y-8 max-w-4xl mx-auto">
+        {faqItems.map((item, index) => (
+          <div key={index}>
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+              {item.question}
+            </h3>
+            <div className="text-gray-600 dark:text-gray-400 leading-relaxed">
+              {item.answer}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}

package/resources/local/agents.md/components/Footer.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function Footer() {
+  return (
+    <footer className="px-6 py-12 text-center text-sm text-gray-600 dark:text-gray-400 mt-24 bg-gray-50 dark:bg-gray-900/40 border-t border-gray-100 dark:border-gray-800">
+      <p>
+        Copyright © AGENTS.md a Series of LF Projects, LLC
+        <br />
+        For web site terms of use, trademark policy and other project policies please see{" "}
+        <a href="https://lfprojects.org" target="_blank" className="underline hover:no-underline">
+          https://lfprojects.org
+        </a>
+        .
+      </p>
+    </footer>
+  );
+}

package/resources/local/agents.md/components/Hero.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+
+const ThreeCanvas = dynamic(() => import("./ThreeCanvas"), { ssr: false });
+
+export default function Hero() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
+  return (
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
+      {/* Three.js Background */}
+      <div className="three-canvas">
+        <ThreeCanvas />
+      </div>
+
+      {/* Spotlight Glow Effects */}
+      <div
+        className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        style={{
+          width: "800px",
+          height: "800px",
+          background:
+            "radial-gradient(circle, rgba(26, 38, 255, 0.3) 0%, transparent 70%)",
+          filter: "blur(100px)",
+          animation: "pulse-glow 4s ease-in-out infinite",
+        }}
+      />
+      <div
+        className="absolute bottom-1/4 right-1/4"
+        style={{
+          width: "400px",
+          height: "400px",
+          background:
+            "radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%)",
+          filter: "blur(80px)",
+          animation: "pulse-glow 5s ease-in-out infinite 1s",
+        }}
+      />
+
+      {/* Main Content */}
+      <div className="relative z-10 text-center px-6 max-w-5xl mx-auto">
+        {/* Badge */}
+        <div
+          className={`inline-flex items-center gap-2 mb-8 ${
+            isVisible ? "fade-in-up" : "opacity-0"
+          }`}
+        >
+          <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+          <span className="badge-pill">Available for opportunities</span>
+        </div>
+
+        {/* Name with 3D Effect */}
+        <h1
+          className={`text-6xl md:text-8xl font-bold mb-6 tracking-tight ${
+            isVisible ? "fade-in-up stagger-1" : "opacity-0"
+          }`}
+          style={{
+            background: "linear-gradient(135deg, #ffffff 0%, #a8a8a8 100%)",
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            textShadow: "0 0 60px rgba(26, 38, 255, 0.5)",
+          }}
+        >
+          Antony Nguyễn
+        </h1>
+
+        {/* Title */}
+        <p
+          className={`text-xl md:text-2xl text-[var(--color-body)] mb-4 ${
+            isVisible ? "fade-in-up stagger-2" : "opacity-0"
+          }`}
+        >
+          <span className="text-white">Staff Software Engineer</span>
+          <span className="mx-3 text-[var(--color-muted)]">•</span>
+          <span>8+ Years Experience</span>
+        </p>
+
+        {/* Tagline */}
+        <p
+          className={`text-lg text-[var(--color-muted)] mb-12 max-w-2xl mx-auto ${
+            isVisible ? "fade-in-up stagger-3" : "opacity-0"
+          }`}
+        >
+          Building scalable systems and leading high-performance teams.
+          Passionate about clean architecture and developer experience.
+        </p>
+
+        {/* Terminal Mockup */}
+        <div
+          className={`terminal-window max-w-3xl mx-auto mb-12 ${
+            isVisible ? "fade-in-up stagger-4" : "opacity-0"
+          }`}
+        >
+          <div className="terminal-header">
+            <div className="terminal-dot bg-red-500" />
+            <div className="terminal-dot bg-yellow-500" />
+            <div className="terminal-dot bg-green-500" />
+            <span className="ml-4 text-xs text-[var(--color-muted)] font-mono">
+              antony@portfolio ~ bash
+            </span>
+          </div>
+          <div className="terminal-content text-left">
+            <p>
+              <span className="code-comment"># Welcome to my digital space</span>
+            </p>
+            <p className="mt-2">
+              <span className="text-[var(--color-accent-cyan)]">❯</span>{" "}
+              <span className="code-function">whoami</span>
+            </p>
+            <p className="text-white">antony-nguyen</p>
+            <p className="mt-2">
+              <span className="text-[var(--color-accent-cyan)]">❯</span>{" "}
+              <span className="code-function">cat</span>{" "}
+              <span className="code-string">skills.json</span>
+            </p>
+            <p>
+              <span className="code-variable">&quot;expertise&quot;</span>:{" "}
+              <span className="code-string">
+                [&quot;System Design&quot;, &quot;TypeScript&quot;, &quot;React&quot;,
+                &quot;Node.js&quot;, &quot;AWS&quot;, &quot;Leadership&quot;]
+              </span>
+            </p>
+            <p className="mt-2">
+              <span className="text-[var(--color-accent-cyan)]">❯</span>{" "}
+              <span className="code-function">cat</span>{" "}
+              <span className="code-string">achievements.md</span>
+            </p>
+            <p>
+              <span className="text-[var(--color-success)]">✓</span> Built
+              systems serving{" "}
+              <span className="code-number">10M+</span> users
+            </p>
+            <p>
+              <span className="text-[var(--color-success)]">✓</span> Led teams
+              of{" "}
+              <span className="code-number">15+</span> engineers
+            </p>
+            <p>
+              <span className="text-[var(--color-success)]">✓</span> Open source
+              contributor with{" "}
+              <span className="code-number">2.5k+</span> stars
+            </p>
+            <p className="mt-2">
+              <span className="text-[var(--color-accent-cyan)]">❯</span>{" "}
+              <span className="animate-pulse">_</span>
+            </p>
+          </div>
+        </div>
+
+        {/* CTA Buttons */}
+        <div
+          className={`flex flex-wrap justify-center gap-4 ${
+            isVisible ? "fade-in-up stagger-5" : "opacity-0"
+          }`}
+        >
+          <a href="#projects" className="btn-primary">
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 14l-7 7m0 0l-7-7m7 7V3"
+              />
+            </svg>
+            View Projects
+          </a>
+          <a href="#contact" className="btn-secondary">
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              />
+            </svg>
+            Get in Touch
+          </a>
+          <a
+            href="https://github.com/antony-nguyen"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn-outline"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <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>
+            GitHub
+          </a>
+        </div>
+
+        {/* Scroll Indicator */}
+        <div
+          className={`absolute bottom-8 left-1/2 -translate-x-1/2 ${
+            isVisible ? "fade-in-up stagger-6" : "opacity-0"
+          }`}
+        >
+          <div className="flex flex-col items-center gap-2 text-[var(--color-muted)]">
+            <span className="text-xs uppercase tracking-widest">Scroll</span>
+            <div className="w-6 h-10 border-2 border-[var(--color-muted)] rounded-full flex justify-center pt-2">
+              <div
+                className="w-1.5 h-3 bg-[var(--color-primary)] rounded-full animate-bounce"
+                style={{ animationDuration: "1.5s" }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/resources/local/agents.md/components/HowToUseSection.tsx

@@ -0,0 +1,66 @@
+import Section from "@/components/Section";
+import React from "react";
+
+export default function HowToUseSection() {
+  const steps = [
+    {
+      title: "Add AGENTS.md",
+      body: (
+        <>
+          Create an AGENTS.md file at the root of the repository. Most
+          coding agents can even scaffold one for you if you ask nicely.
+        </>
+      ),
+    },
+    {
+      title: "Cover what matters",
+      body: (
+        <>
+          <p className="mb-2">Add sections that help an agent work effectively with your project. Popular choices:</p>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li>Project overview</li>
+            <li>Build and test commands</li>
+            <li>Code style guidelines</li>
+            <li>Testing instructions</li>
+            <li>Security considerations</li>
+          </ul>
+        </>
+      ),
+    },
+    {
+      title: "Add extra instructions",
+      body: "Commit messages or pull request guidelines, security gotchas, large datasets, deployment steps: anything you’d tell a new teammate belongs here too.",
+    },
+    {
+      title: "Large monorepo? Use nested AGENTS.md files for subprojects",
+      body: (
+        <>
+          Place another AGENTS.md inside each package. Agents automatically read the nearest file in the directory tree, so the closest one takes precedence and every subproject can ship tailored instructions. For example, at time of writing the main OpenAI repo has 88 AGENTS.md files.
+        </>
+      ),
+    },
+  ];
+
+
+  return (
+    <Section
+      title="How to use AGENTS.md?"
+      className="py-12"
+      center
+      maxWidthClass="max-w-3xl"
+    >
+      <div className="space-y-6 text-left">
+        {steps.map((s, idx) => (
+          <div key={idx}>
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+              {idx + 1}. {s.title}
+            </h3>
+            <div className="text-gray-700 dark:text-gray-300">
+              {s.body}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}

package/resources/local/agents.md/components/Section.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+export type SectionProps = React.PropsWithChildren<{
+  id?: string;
+  className?: string;
+  title: string;
+  /**
+   * Center the heading and inner content horizontally (text-center).
+   */
+  center?: boolean;
+  /**
+   * Tailwind max-width utility to override the default container width.
+   * e.g. "max-w-4xl".  Defaults to "max-w-6xl".
+   */
+  maxWidthClass?: string;
+}>;
+
+export default function Section({
+  className = "",
+  id,
+  title,
+  children,
+  center = false,
+  maxWidthClass = "max-w-6xl",
+}: SectionProps) {
+  const containerClasses = `${maxWidthClass} mx-auto flex flex-col gap-6`;
+
+  return (
+    <section id={id} className={className + " px-6"}>
+      <div className={containerClasses}>
+        <h2
+          className={`text-3xl font-semibold tracking-tight ${center ? "mx-auto text-center" : ""}`}
+        >
+          {title}
+        </h2>
+        {/* prose class is useful for markdown-like content. For centered sections we don't want automatic left
+            margin on headings, so we keep it unconditionally; centering is handled by parent flex alignment. */}
+        <div className="prose prose-neutral dark:prose-invert max-w-none">
+          {children}
+        </div>
+      </div>
+    </section>
+  );
+}