tenext-next/AGENTS.md

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.

Code Maintainability Rules

This project must remain understandable by:

• Freshers
• Frontend developers
• Backend developers
• New team members

Rules:

1. No component may exceed 400 lines.
2. No page file may exceed 300 lines.
3. No CSS file may exceed 500 lines.
4. Prefer Tailwind utilities over custom CSS.
5. Avoid duplicated styles.
6. Create reusable UI components.
7. Use meaningful file names.
8. Keep folder depth shallow.
9. Avoid massive utility/helper files.
10. Every component should have a single responsibility.

If a file becomes too large, split it into smaller components immediately.

Code readability is more important than clever implementations.

Design System Rules

Single Source of Truth

Common design values must be centralized.

Do NOT hardcode the same values across multiple sections.

Create shared design tokens for:

• Colors
• Typography
• Border Radius
• Shadows
• Container Widths
• Section Spacing
• Button Styles
• Animation Presets

Color System

All colors must come from a shared theme file.

Examples:

• Primary
• Secondary
• Accent
• Background
• Surface
• Border

Do not repeat hex values throughout the project.

Changing a color in one place should update the entire site.

Typography System

Create shared typography styles.

Examples:

• Hero Title
• Section Title
• Card Title
• Body Text
• Small Text

Do not redefine font sizes in every section.

Changing typography tokens should update all matching sections.

Shared Components

If multiple sections use the same UI pattern:

• Card
• Button
• Badge
• Section Header
• CTA Block
• Statistic Counter

Create one reusable component.

Do not duplicate markup.

A change in one component should update every instance.

Shared Section Layout

Create common section spacing tokens.

Examples:

• sectionPaddingY
• sectionPaddingX
• containerWidth

All sections must use the same spacing system.

Avoid custom padding per section unless intentionally required by the reference.

Consistent Container System

All major sections must use the same container.

Examples:

• Container
• PageContainer
• SectionContainer

Do not create unique widths for every section.

Shared Animation System

Create reusable animation presets.

Examples:

• fadeUp
• staggerChildren
• scaleIn
• slideIn

Do not redefine animations in every component.

Shared Image System

Common image styles should be reusable.

Examples:

• cardImage
• heroImage
• avatarImage

Avoid repeating image styling logic.

Global Change Rule

If the same pattern exists in multiple sections, do not update only one section.

Examples:

• Hero Title
• About Title
• Feature Title

Update the shared source.

The change must automatically propagate everywhere the pattern is used.

Spacing Consistency Rule

Top, Bottom, Left, and Right spacing must follow the same design system.

Avoid random values such as:

• 72px
• 94px
• 113px
• 147px

Use predefined spacing tokens only.

The entire site should feel visually consistent.

AGENTS.md

Mission

Recreate the Aiero Home 9 experience with maximum visual fidelity while keeping the codebase maintainable and production-ready.

Agent Behavior

Before making changes:

• Analyze existing component
• Compare against reference
• Identify exact mismatch
• Apply minimal fix

Do not perform large rewrites unless explicitly requested.

Priority Order

1. Layout Accuracy
2. Spacing Accuracy
3. Typography Accuracy
4. Image Placement
5. Responsiveness
6. Animation
7. Refactoring

Hero Analysis Checklist

Verify:

• Hero height
• Hero width
• Artwork scale
• Artwork position
• Heading width
• Heading line breaks
• CTA placement
• Scroll indicator position
• Navbar alignment

Card Analysis Checklist

Verify:

• Border radius
• Padding
• Image crop
• Text spacing
• Card proportions
• Responsive behavior

Forbidden Actions

Do NOT:

• Replace sections without approval
• Change color system globally
• Introduce new layouts
• Remove existing functionality
• Rewrite working components

Preferred Workflow

Step 1: Identify mismatch.

Step 2: Describe mismatch.

Step 3: Implement targeted fix.

Step 4: Verify visually.

Step 5: Move to next issue.

Visual Fidelity Standard

Target:

95%+ match to reference.

Every change should improve:

• Layout
• Alignment
• Proportions
• Visual balance

Avoid subjective redesign decisions.

Reference fidelity is more important than personal preference.

Code Quality Rules

• TypeScript strict
• Reusable components
• Clean props
• No duplicated code
• No inline magic values
• Use Tailwind consistently

Final Goal

Build a production-quality Next.js implementation that visually matches Aiero Home 9 as closely as possible while maintaining clean architecture and long-term maintainability.