umi-stamping

Imported from Kelvintan127/umi-stamping (AGENTS.md). Install upstream with npx skills add Kelvintan127/umi-stamping. Copyright stays with the author.

AGENTS.md

Project

This repository contains the UMI Stamping corporate website.

Repository: https://github.com/Kelvintan127/umi-stamping

Official website and content source of truth: https://www.umistamping.com/

Primary Objective

Continue and improve the existing UMI Stamping website.

Do NOT rebuild the project from scratch.

Preserve useful existing implementation, architecture, components, styling, assets, and functionality unless there is a clear technical reason to change them.

The final website should feel like a:

• Premium industrial corporate website
• Modern manufacturing company website
• Professional engineering-focused website
• Clean and sophisticated digital experience
• High-quality responsive website

Content Source of Truth

The official UMI Stamping website is the primary source for company information and content:

https://www.umistamping.com/

Use official information for:

• Company profile
• About UMI
• Products
• Capabilities
• Manufacturing
• Industries
• Manufacturing process
• Quality
• Certifications
• Facilities
• Engineering
• Contact information
• Company facts
• CTA content

Critical Rule

NEVER invent:

• Company facts
• Production capacity
• Certifications
• Customers
• Industries
• Locations
• Technology claims
• Awards
• Numbers
• Business claims

If information is not available from the official source, do not fabricate it.

Before Changing Code

Always inspect the existing project first.

Understand:

1. Framework and version
2. Project structure
3. Routing
4. Component architecture
5. Styling system
6. Animation system
7. Existing dependencies
8. Existing assets
9. Existing pages
10. Existing sections
11. Existing responsive behavior

Run the project locally when possible and inspect the current UI before making significant changes.

Development Philosophy

Prefer:

• Reusing existing components
• Reusing existing utilities
• Reusing existing assets
• Small focused changes
• Maintainable architecture
• Type-safe implementation
• Semantic HTML
• Accessible components
• Responsive layouts
• Performance-conscious implementation

Avoid unnecessary:

• Dependencies
• Abstractions
• Duplicate components
• Large rewrites
• Breaking architectural changes

If an existing component can be improved instead of replaced, prefer improving it.

Design Direction

The website should communicate:

Precision + Engineering + Manufacturing + Reliability + Technology

Visual direction:

• Premium
• Minimal
• Industrial
• Modern
• Technical
• Professional
• Strong typography
• Strong visual hierarchy
• Generous whitespace
• High-quality imagery
• Subtle motion
• Clear CTA

Avoid:

• Generic SaaS aesthetics
• Excessive gradients
• Excessive rounded cards
• Excessive animations
• Unnecessary decorative elements
• Template-like layouts
• Overly colorful UI

The website should feel like a serious global manufacturing company.

Website Sections

Maintain and improve the existing sections where applicable.

Typical structure may include:

1. Navbar
2. Hero
3. Company / About
4. Capabilities
5. Industries
6. Manufacturing Process
7. Quality
8. Facilities
9. Engineering
10. Contact CTA
11. Footer

Do not assume all sections must exist exactly as listed.

Use the official website and existing project structure to determine the appropriate content architecture.

Component Guidelines

Create reusable components when appropriate.

Prefer:

components/
├── layout/
├── sections/
├── ui/
└── ...

Follow the existing repository structure if it already has an established convention.

Do not create multiple components that solve the same problem.

Keep components focused and readable.

Avoid extremely large components when they can reasonably be split into smaller reusable components.

Responsive Design

Every implementation must work properly on:

• Desktop
• Laptop
• Tablet
• Mobile

Mobile must be treated as a first-class experience.

Check specifically:

• Navbar
• Hero
• Typography
• Images
• Cards
• Grids
• Horizontal scrolling
• Animations
• CTA
• Footer
• Section spacing
• Touch interaction

Never leave:

• Horizontal overflow
• Clipped text
• Overlapping elements
• Broken layouts
• Unusable navigation
• Broken animations

Animation

Use the animation libraries already present in the project.

Animations should be:

• Smooth
• Subtle
• Purposeful
• Professional
• Performance-conscious

Animation should support the content rather than distract from it.

Respect:

prefers-reduced-motion

when practical.

Avoid excessive scroll-triggered animations that negatively affect mobile performance.

Images and Assets

Audit existing assets before adding new ones.

Prefer:

1. Official UMI assets
2. Existing repository assets
3. Appropriate licensed assets when absolutely necessary

Do not use random imagery that misrepresents UMI Stamping.

Do not visually imply capabilities or facilities that are not supported by official information.

Optimize images appropriately.

Use meaningful alt text.

Content Implementation

Official content may be restructured for better UX.

Do not blindly copy entire pages.

Instead:

• Preserve factual meaning
• Improve hierarchy
• Shorten repetitive content
• Break long content into sections
• Use appropriate headings
• Create concise CTA copy
• Maintain professional corporate language

Content should remain factually accurate.

SEO

Maintain good SEO practices.

Use:

• Semantic HTML
• One appropriate H1
• Logical heading hierarchy
• Descriptive page titles
• Meta descriptions
• Open Graph metadata when supported
• Descriptive image alt text
• Meaningful URLs
• Structured content

Do not keyword-stuff.

Use the official company name:

UMI Stamping

Accessibility

Ensure:

• Keyboard navigation works
• Interactive elements are accessible
• Buttons have meaningful labels
• Images have appropriate alt text
• Color contrast is reasonable
• Focus states are visible
• Semantic HTML is used
• Motion does not prevent usability

Do not rely on hover-only interactions for essential information.

Performance

Prioritize:

• Fast initial load
• Optimized images
• Minimal unnecessary JavaScript
• Lazy loading where appropriate
• Avoiding unnecessary dependencies
• Avoiding excessive client-side rendering
• Efficient animations

For Next.js, prefer Server Components unless client-side functionality is actually required.

Use "use client" only when necessary.

Dependencies

Before installing a new package:

1. Check whether the project already has an equivalent dependency.
2. Check whether the functionality can be implemented using existing tools.
3. Only add a dependency when it provides meaningful value.

Do not introduce unnecessary packages.

Environment and Secrets

NEVER modify or expose:

.env
.env.local
.env.production

Never commit:

• API keys
• Passwords
• Tokens
• Private keys
• Credentials
• Cloudflare secrets
• Database credentials

If environment configuration is required, document the required variable without exposing its value.

Git Safety

Before making changes:

git status

Review the existing working tree.

Do not overwrite unrelated user changes.

After changes:

git status
git diff

Review the diff carefully.

Never blindly run destructive commands such as:

git reset --hard
git clean -fd
rm -rf

unless explicitly required and safe.

Prefer focused commits.

Use descriptive commit messages such as:

feat: improve hero section
feat: add manufacturing capabilities section
fix: improve mobile navigation
refactor: simplify section components

Validation

Before declaring a task complete, run the project's appropriate checks.

At minimum, when available:

npm run lint
npm run build

or the repository's actual package-manager equivalents.

If the project uses pnpm:

pnpm lint
pnpm build

If the project uses another package manager, follow the existing project configuration.

Fix errors rather than ignoring them.

Do not claim a build passed unless it actually passed.

Visual QA

After implementation, inspect the website visually.

Check:

Desktop

• Layout
• Typography
• Spacing
• Images
• Navigation
• Animations
• CTA
• Footer

Mobile

• Navigation
• Typography
• Section spacing
• Images
• Cards
• Horizontal overflow
• Touch interaction
• CTA
• Footer

Look for inconsistencies between sections.

The website should feel like one coherent product, not a collection of unrelated components.

Working Procedure

For every significant task:

Step 1 — Inspect

Understand the existing implementation.

Step 2 — Research

Check the official UMI website for relevant content.

Step 3 — Plan

Determine which files/components need to change.

Step 4 — Implement

Make focused changes.

Step 5 — Validate

Run lint, build, and relevant tests.

Step 6 — Visual QA

Inspect desktop and mobile behavior.

Step 7 — Review

Run:

git diff

and make sure no unrelated changes were introduced.

Step 8 — Report

Summarize:

• What changed
• Files changed
• Content implemented
• Validation results
• Remaining issues

Important Rule for Ambiguous Requests

If a requirement is unclear:

1. Inspect the existing code.
2. Check the official UMI website.
3. Check existing design patterns.
4. Make the least destructive reasonable decision.

Do not invent business requirements.

Do not rewrite working functionality simply because another implementation is possible.

Definition of Done

A task is complete only when:

• The requested functionality is implemented.
• Existing functionality still works.
• Official UMI content is used where applicable.
• No unsupported company claims were introduced.
• Desktop layout works.
• Mobile layout works.
• No obvious horizontal overflow exists.
• No console errors exist.
• Lint passes.
• Build passes.
• Code is reasonably maintainable.
• No secrets were exposed.
• Git diff contains only relevant changes.

Final Principle

Act as a senior frontend engineer, UI/UX engineer, and technical content implementer.

Do not merely describe how something could be implemented.

Inspect the repository, make the changes, validate them, and report the actual result.

When working on UMI Stamping, prioritize:

Accuracy → Existing Architecture → UX → Visual Quality → Performance → Maintainability

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.