winter-super-cli 2026.6.20 → 2026.6.22

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>
+  );
+}

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

@@ -0,0 +1,240 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
+import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
+
+export default function ThreeCanvas() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const sceneRef = useRef<THREE.Scene | null>(null);
+  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
+  const animationIdRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Scene setup
+    const scene = new THREE.Scene();
+    sceneRef.current = scene;
+
+    // Camera
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    camera.position.z = 30;
+
+    // Renderer
+    const renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      antialias: true,
+    });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    containerRef.current.appendChild(renderer.domElement);
+    rendererRef.current = renderer;
+
+    // Particles
+    const particlesGeometry = new THREE.BufferGeometry();
+    const particlesCount = 3000;
+    const positions = new Float32Array(particlesCount * 3);
+    const colors = new Float32Array(particlesCount * 3);
+
+    const colorBlue = new THREE.Color(0x0007cd);
+    const colorCyan = new THREE.Color(0x00d4ff);
+    const colorWhite = new THREE.Color(0xffffff);
+
+    for (let i = 0; i < particlesCount; i++) {
+      const i3 = i * 3;
+      positions[i3] = (Math.random() - 0.5) * 100;
+      positions[i3 + 1] = (Math.random() - 0.5) * 100;
+      positions[i3 + 2] = (Math.random() - 0.5) * 100;
+
+      const mixColor =
+        Math.random() > 0.5 ? colorBlue : Math.random() > 0.5 ? colorCyan : colorWhite;
+      colors[i3] = mixColor.r;
+      colors[i3 + 1] = mixColor.g;
+      colors[i3 + 2] = mixColor.b;
+    }
+
+    particlesGeometry.setAttribute(
+      "position",
+      new THREE.BufferAttribute(positions, 3)
+    );
+    particlesGeometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+
+    const particlesMaterial = new THREE.PointsMaterial({
+      size: 0.15,
+      vertexColors: true,
+      transparent: true,
+      opacity: 0.6,
+      blending: THREE.AdditiveBlending,
+    });
+
+    const particlesMesh = new THREE.Points(
+      particlesGeometry,
+      particlesMaterial
+    );
+    scene.add(particlesMesh);
+
+    // Floating geometric shapes
+    const shapes: THREE.Mesh[] = [];
+    const geometries = [
+      new THREE.IcosahedronGeometry(1, 0),
+      new THREE.OctahedronGeometry(1, 0),
+      new THREE.TetrahedronGeometry(1, 0),
+    ];
+
+    const material = new THREE.MeshBasicMaterial({
+      color: 0x0007cd,
+      wireframe: true,
+      transparent: true,
+      opacity: 0.3,
+    });
+
+    for (let i = 0; i < 15; i++) {
+      const geometry =
+        geometries[Math.floor(Math.random() * geometries.length)];
+      const mesh = new THREE.Mesh(geometry, material.clone());
+      mesh.position.set(
+        (Math.random() - 0.5) * 60,
+        (Math.random() - 0.5) * 60,
+        (Math.random() - 0.5) * 40
+      );
+      mesh.rotation.set(
+        Math.random() * Math.PI,
+        Math.random() * Math.PI,
+        Math.random() * Math.PI
+      );
+      mesh.userData = {
+        rotationSpeed: {
+          x: (Math.random() - 0.5) * 0.01,
+          y: (Math.random() - 0.5) * 0.01,
+          z: (Math.random() - 0.5) * 0.01,
+        },
+        floatSpeed: Math.random() * 0.5 + 0.5,
+        floatOffset: Math.random() * Math.PI * 2,
+      };
+      shapes.push(mesh);
+      scene.add(mesh);
+    }
+
+    // Text "Antony Nguyễn" - loaded asynchronously
+    let textMesh: THREE.Mesh | null = null;
+    let textLoaded = false;
+
+    const loadFont = () => {
+      const loader = new FontLoader();
+      loader.load(
+        "https://threejs.org/examples/fonts/helvetiker_bold.typeface.json",
+        (font) => {
+          const textGeometry = new TextGeometry("Antony Nguyễn", {
+            font: font,
+            size: 3,
+            height: 0.5,
+            curveSegments: 12,
+            bevelEnabled: true,
+            bevelThickness: 0.03,
+            bevelSize: 0.02,
+            bevelSegments: 5,
+          });
+
+          textGeometry.computeBoundingBox();
+          const centerOffset = new THREE.Vector3();
+          textGeometry.boundingBox?.getCenter(centerOffset);
+          textGeometry.translate(-centerOffset.x, -centerOffset.y, -centerOffset.z);
+
+          const textMaterial = new THREE.MeshPhongMaterial({
+            color: 0xffffff,
+            specular: 0x0007cd,
+            shininess: 100,
+            transparent: true,
+            opacity: 0.9,
+          });
+
+          textMesh = new THREE.Mesh(textGeometry, textMaterial);
+          textMesh.position.set(0, 8, 0);
+          scene.add(textMesh);
+          textLoaded = true;
+        },
+        undefined,
+        (error) => {
+          console.log("Font loading failed, using fallback text");
+          textLoaded = true;
+        }
+      );
+    };
+
+    loadFont();
+
+    // Mouse interaction
+    const mouse = { x: 0, y: 0 };
+    const handleMouseMove = (event: MouseEvent) => {
+      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+
+    // Resize handler
+    const handleResize = () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    };
+    window.addEventListener("resize", handleResize);
+
+    // Animation
+    let time = 0;
+    const animate = () => {
+      animationIdRef.current = requestAnimationFrame(animate);
+      time += 0.01;
+
+      // Rotate particles
+      particlesMesh.rotation.y += 0.0005;
+      particlesMesh.rotation.x += 0.0002;
+
+      // Animate shapes
+      shapes.forEach((shape) => {
+        shape.rotation.x += shape.userData.rotationSpeed.x;
+        shape.rotation.y += shape.userData.rotationSpeed.y;
+        shape.rotation.z += shape.userData.rotationSpeed.z;
+
+        const floatY = Math.sin(time * shape.userData.floatSpeed + shape.userData.floatOffset) * 0.5;
+        shape.position.y += floatY * 0.01;
+      });
+
+      // Camera follows mouse slightly
+      camera.position.x += (mouse.x * 5 - camera.position.x) * 0.02;
+      camera.position.y += (mouse.y * 5 - camera.position.y) * 0.02;
+      camera.lookAt(scene.position);
+
+      // Text rotation
+      if (textMesh) {
+        textMesh.rotation.y = Math.sin(time * 0.5) * 0.3;
+        textMesh.position.y = 8 + Math.sin(time) * 0.5;
+      }
+
+      renderer.render(scene, camera);
+    };
+
+    animate();
+
+    // Cleanup
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("resize", handleResize);
+      if (animationIdRef.current) {
+        cancelAnimationFrame(animationIdRef.current);
+      }
+      renderer.dispose();
+      if (containerRef.current && renderer.domElement) {
+        containerRef.current.removeChild(renderer.domElement);
+      }
+    };
+  }, []);
+
+  return <div ref={containerRef} className="three-canvas" />;
+}

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

@@ -0,0 +1,64 @@
+import Section from "@/components/Section";
+import React from "react";
+import ClipboardIcon from "@/components/icons/ClipboardIcon";
+import UserIcon from "@/components/icons/UserIcon";
+import LinkIcon from "@/components/icons/LinkIcon";
+
+export default function WhySection() {
+  return (
+    <Section
+      id="why"
+      title="Why AGENTS.md?"
+      className="pt-24 pb-12"
+      center
+      maxWidthClass="max-w-3xl"
+    >
+      <div className="space-y-4">
+        <p className="mb-4">
+          README.md files are for humans: quick starts, project descriptions,
+          and contribution guidelines.
+        </p>
+        <p className="mb-4">
+          AGENTS.md complements this by containing the extra, sometimes detailed
+          context coding agents need: build steps, tests, and conventions that
+          might clutter a README or aren&rsquo;t relevant to human contributors.
+        </p>
+        <p className="mb-4">We intentionally kept it separate to:</p>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-3">
+            <ClipboardIcon />
+            <p>
+              <span className="font-semibold block">
+                Give agents a clear, predictable place for instructions.
+              </span>
+            </p>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <UserIcon />
+            <p>
+              <span className="font-semibold block">
+                Keep READMEs concise and focused on human contributors.
+              </span>
+            </p>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <LinkIcon />
+            <p>
+              <span className="font-semibold block">
+                Provide precise, agent-focused guidance that complements
+                existing README and docs.
+              </span>
+            </p>
+          </div>
+        </div>
+        <p>
+          Rather than introducing another proprietary file, we chose a name and
+          format that could work for anyone. If you&rsquo;re building or using
+          coding agents and find this helpful, feel free to adopt it.
+        </p>
+      </div>
+    </Section>
+  );
+}

package/resources/local/agents.md/components/icons/ClipboardIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export default function ClipboardIcon({ className = "w-6 h-6 flex-shrink-0" }) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 2.25h6a.75.75 0 01.75.75v1.5h1.5A2.25 2.25 0 0120.25 6.75v12A2.25 2.25 0 0118 21h-12a2.25 2.25 0 01-2.25-2.25v-12A2.25 2.25 0 016 4.5h1.5V3a.75.75 0 01.75-.75z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 12h6m-6 4h6"
+      />
+    </svg>
+  );
+}
+