Imported from AndyAnh174/Profile-Portfolio-AndyAnh (AGENTS.md). Install upstream with npx skills add AndyAnh174/Profile-Portfolio-AndyAnh. Copyright stays with the author.

This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in node_modules/next/dist/docs/ before writing any code. Heed deprecation notices.

Frontend Design & UI Excellence Rules

1. Aesthetic Direction & Quality Standards

• No Generic "AI Slop": Never default to plain, corporate templates with generic purple-to-blue gradients or low-contrast gray cards.
• Intentional Design Systems: Commit to a specific visual theme (Dark Luxe, Minimalist Editorial, Neobrutalism, Bento Grid, High-Tech Glassmorphism) for every page or component.
• Typography: Pair high-character typography (e.g. Syne, Clash Display, Plus Jakarta Sans, Outfit, JetBrains Mono) with balanced weights and tracking.
• Color Harmony: Follow the 60-30-10 rule. Use deep dark tones, crisp accents, and high contrast for accessibility.
• Micro-Interactions: Use smooth hover effects, spring physics, subtle cursor reactions, and entrance stagger animations.

2. Component Libraries & Local UI Assets

• React Bits (Local Library): Located at D:\profile\ui-project:
  • Starter Animation Components: D:\profile\ui-project\reactbits-starter-main\tw\ (101 interactive animation components in Tailwind + Framer Motion / Shaders).
  • Pro Section Blocks: D:\profile\ui-project\reactbits-pro-main\ (158 complete sections across 21 categories including hero, features, pricing, navigation, footer, cta, stats, social-proof, etc.).
  • Always check and pull from these folders before coding complex sections or animations from scratch.
• Magic UI (@magicui):
  • Use the configured magicuidesign-mcp tools or components.json registry (@magicui: https://magicui.design/r/{name}) to discover and install modern Magic UI components (BentoGrid, Marquee, RetroGrid, BorderBeam, Particles, etc.).
• Shadcn UI:
  • Base UI components (Button, Dialog, Dropdown, Tabs, etc.) should follow Shadcn patterns and tokens defined in components.json.

3. DevOps & Cloud Infrastructure Theme Guidelines

• Design Specification: Always consult and strictly adhere to DESIGN.md.
• Core Theme: High-Tech Control Plane & Live Observability Dashboard.
• Key Visual Metaphors:
  • CI/CD Pipelines (Interactive stages: Lint -> Test -> Build -> Security Scan -> GitOps Deploy -> Monitoring).
  • Multi-Cloud Infrastructure (AWS, GCP, Kubernetes, Terraform, ArgoCD, Prometheus, Grafana).
  • Telemetry badges, live simulated system status (SLA 99.999%, Latency, CPU/Memory gauges), and interactive CLI terminal commands.
• Component Synergy: Combine Magic UI (animated-beam, bento-grid, terminal, number-ticker, marquee) with React Bits (globe.tsx, glitch-text.tsx, silk-waves.tsx, depth-card.tsx, simple-graph.tsx) from D:\profile\ui-project.