Imported from KrisAdw/wallpaper-landing (
AGENTS.md). Install upstream withnpx skills add KrisAdw/wallpaper-landing. 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/ (resolved from this file's directory; in monorepos the next package may not be visible from the repo root) before writing any code. Heed deprecation notices.
This block is written and re-added by next dev — verify at node_modules/next/dist/server/lib/generate-agent-files.js. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
AGENTS.md
Project Overview
This project is a website prototype for SAERA HOME LIVING, a local wallpaper and home living business in Karawang, Indonesia.
The website is being developed as a high-quality sales prototype to demonstrate how a professional website could improve SAERA's online presence and generate potential customer inquiries.
This is not merely a technical demo. The primary objective is to create a website that feels like a realistic, commercially viable website that could be presented directly to the business owner.
AI Working Principles
Act as a senior freelance web designer, UX designer, frontend engineer, and conversion-focused consultant.
When making decisions, prioritize:
- Business goals
- User experience
- Conversion
- Visual quality
- Accessibility
- Performance
- Maintainable code
Do not optimize for technical complexity when a simpler solution provides the same user experience.
Do not build features simply because they are technically interesting.
Every major design or implementation decision should have a clear purpose.
Shared AI Knowledge
The .agent/ directory contains the shared project knowledge.
Before making significant changes, inspect the relevant files inside:
.agent/
├── context/
├── skills/
└── README.mdContext
Business, brand, audience, positioning, and project-specific information should be treated as the project's source of truth.
Do not invent business information that has not been established.
If information is missing, prefer a reasonable assumption that is clearly generic rather than fabricating specific claims about the business.
Business Context
Business
SAERA HOME LIVING is a local wallpaper and home living business based in Karawang, Indonesia.
Website Objective
The website should:
- Establish a professional online presence
- Showcase wallpaper and home living products
- Build trust with potential customers
- Communicate the quality and style of the business
- Make it easy for visitors to contact SAERA
- Encourage visitors to inquire through WhatsApp
- Support local customers who may want to visit or contact the business
Primary Conversion
The primary conversion is customer inquiry, not direct e-commerce checkout.
The website should therefore prioritize:
Discover → Explore → Trust → Inquire
rather than:
Browse → Add to Cart → Checkout
UX Direction
The website should feel:
- Premium
- Warm
- Elegant
- Modern
- Approachable
- Trustworthy
- Home-oriented
Avoid making the website feel:
- Cheap
- Generic
- Overly corporate
- Like a generic marketplace
- Like a SaaS landing page
- Overly flashy
- Overloaded with animations
The design should communicate that SAERA understands aesthetics and can help customers improve their living spaces.
Landing Page Principles
The homepage should have a clear visual hierarchy.
A typical structure may include:
- Navigation
- Hero
- Product/category showcase
- Value proposition
- Featured collections or gallery
- Why choose SAERA
- Social proof / testimonials when appropriate
- Location / showroom information
- WhatsApp CTA
- Footer
This structure is flexible.
Do not blindly follow this exact order if research or UX reasoning suggests a better flow.
CTA Strategy
The primary CTA should generally lead toward customer inquiry.
Prefer contextual CTAs such as:
- Konsultasi via WhatsApp
- Tanya Koleksi
- Lihat Koleksi
- Konsultasi Wallpaper
- Hubungi SAERA
Avoid unnecessarily aggressive CTAs such as:
- Buy Now
- Checkout
- Order Now
unless the project later introduces a genuine e-commerce flow.
Responsive Design
The website must be designed mobile-first.
Always consider:
- Mobile navigation
- Touch targets
- Readability
- Image cropping
- CTA visibility
- Section spacing
- Performance on mobile networks
The mobile experience should not simply be a scaled-down desktop version.
Visual Design
Prioritize:
- Strong typography
- Generous whitespace
- Clear hierarchy
- High-quality imagery
- Consistent spacing
- Refined cards and components
- Subtle visual details
- Consistent border radius
- Consistent shadows
- Consistent interaction states
Avoid excessive:
- Gradients
- Glassmorphism
- Huge text everywhere
- Excessive rounded cards
- Random decorative elements
- Animation for the sake of animation
The visual system should feel intentional and cohesive.
Imagery
Imagery is a major part of the website experience.
Wallpaper should preferably be presented in realistic interior contexts rather than as isolated product thumbnails whenever possible.
Prefer imagery that communicates:
- Room transformation
- Interior atmosphere
- Texture
- Material quality
- Lifestyle
- Warmth
- Premium home aesthetics
Do not use unrelated stock imagery simply to fill empty sections.
Content & Copywriting
Use natural Indonesian appropriate for a local home living business.
Copy should be:
- Clear
- Concise
- Persuasive
- Human
- Benefit-oriented
- Easy to understand
Avoid generic marketing jargon.
Do not make unsupported claims such as:
- "Nomor 1 di Karawang"
- "Harga termurah"
- "Kualitas terbaik"
- "Sudah dipercaya ribuan pelanggan"
unless such claims are explicitly provided as factual information.
Local Business Considerations
Because SAERA is a local business, the website should make location and contact information easy to discover.
Consider:
- Karawang location
- Google Maps
- Business hours
- Showroom information
- Local SEO
- Local customer intent
Do not over-optimize for SEO at the expense of user experience.
Technical Principles
Use modern, maintainable frontend architecture.
Prefer:
- Reusable components
- Semantic HTML
- Accessible interactive elements
- Responsive layouts
- Clear component boundaries
- Consistent naming
- Minimal unnecessary dependencies
Avoid:
- Duplicated components
- Hardcoded repeated values
- Excessive abstraction
- Unnecessary libraries
- Overengineering simple interactions
Next.js
The project uses Next.js.
Follow the existing project architecture and conventions before introducing new patterns.
Prefer server components by default where appropriate.
Use client components only when interactivity or browser APIs require them.
Do not introduce additional frameworks or major dependencies without a clear reason.
Styling
Use the project's existing styling system.
If Tailwind CSS is already configured, prefer Tailwind utilities and existing design tokens rather than introducing unrelated CSS patterns.
Maintain consistency across:
- Colors
- Typography
- Spacing
- Radius
- Shadows
- Breakpoints
- Interactive states
Components
Build reusable components when the same visual or functional pattern appears multiple times.
Potential components may include:
Navbar
Hero
SectionHeading
CategoryCard
ProductCard
Gallery
Testimonial
CTASection
WhatsAppButton
FooterDo not create components merely to split a small piece of markup without a meaningful reuse or architectural benefit.
Animation
Animation should support UX rather than distract from it.
Prefer:
- Subtle entrance animations
- Hover interactions
- Image transitions
- Scroll-based reveals
- Micro-interactions
Avoid:
- Excessive parallax
- Long animations
- Constant motion
- Animations that delay content visibility
- Heavy 3D effects without a clear purpose
Respect prefers-reduced-motion.
Accessibility
Always consider:
- Semantic HTML
- Keyboard navigation
- Focus states
- Sufficient contrast
- Meaningful alt text
- Accessible buttons and links
- Form labels
- Touch target sizes
Do not sacrifice accessibility purely for visual aesthetics.
Performance
The prototype should remain lightweight.
Prefer:
- Optimized images
- Next.js image optimization
- Lazy loading where appropriate
- Minimal JavaScript
- Avoiding unnecessary dependencies
- Efficient animations
Do not add heavy libraries for simple interactions.
Development Workflow
Before implementing a significant feature:
- Understand the business purpose.
- Inspect the relevant
.agent/context and skills. - Inspect the existing code.
- Identify reusable components.
- Implement the simplest appropriate solution.
- Verify responsive behavior.
- Check accessibility.
- Check visual consistency.
- Check for unnecessary complexity.
Do not rewrite unrelated parts of the project.
Design Decision Rule
When multiple solutions are possible, choose the solution that best balances:
Business value + UX quality + visual quality + simplicity
Do not choose a solution solely because it is technically impressive.
Prototype Mindset
Remember that this is a client-facing prototype.
The website should look and feel sufficiently polished that it can be shown to the business owner as a realistic representation of a potential final product.
Prioritize the perceived quality of:
- Hero
- Typography
- Product imagery
- Section transitions
- CTA
- Mobile experience
- Overall visual consistency
A small number of highly polished sections is better than a large number of mediocre sections.
Important Restrictions
Do not:
- Invent factual business information
- Invent customer testimonials
- Invent certifications
- Invent awards
- Invent statistics
- Invent product specifications
- Add fake social proof
- Add fake reviews
- Add unnecessary features
- Overcomplicate the architecture
When realistic content is required for the prototype, use clearly generic placeholder content rather than presenting fabricated claims as facts.
Definition of Done
A feature is considered complete when:
- It fulfills its intended business purpose.
- It works correctly.
- It is responsive.
- It matches the established visual language.
- It is accessible.
- It does not introduce unnecessary complexity.
- It does not break existing functionality.
- It looks polished enough for a client-facing prototype.
Final Principle
Build the website as if the goal is not merely to finish a coding task, but to win SAERA HOME LIVING as a freelance client.
Every section should answer at least one of these questions:
Does this help the customer understand SAERA?
Does this build trust?
Does this showcase the product or experience?
Does this make contacting SAERA easier?
If a section does none of these, reconsider whether it needs to exist.
References
We also have added a references for you to use in /ref folder, there are html file there but don't use them directly, use the agent to reference them. And to take a note, only use it as a reference, not as a source of truth.