292 lines
5.0 KiB
Markdown
292 lines
5.0 KiB
Markdown
<!-- BEGIN:nextjs-agent-rules -->
|
|
|
|
# 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.
|
|
|
|
<!-- END:nextjs-agent-rules -->
|
|
|
|
# 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 tenext 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 tenext Home 9 as closely as possible while maintaining clean architecture and long-term maintainability.
|