---
name: Linktree Setup Documentation
description: Documentation of the steps performed to set up the Next.js Linktree project.
---

# Linktree Project Setup

This document outlines all the modifications and setups performed during this session to create the Linktree-style website.

## 1. Data Configuration (`lib/config.ts`)
- Created a centralized configuration file to store profile information (Name, Description, and Avatar path).
- Defined a `links` array holding details for each platform: Name, URL, description, and icon path.
- Populated the links with Roblox, Discord Server, TikTok, and YouTube configurations.

## 2. Layout & UI Components (`app/page.tsx` & `app/layout.tsx`)
- Replaced the default Next.js boilerplate with a Linktree-style page.
- Integrated `shadcn/ui` components (`Card`, `CardHeader`, `CardContent`, and `Button`) to create a polished and modern container design.
- Replaced standard `<img>` and `<a>` tags with `next/image` (`<Image>`) and `next/link` (`<Link>`) to ensure optimized loading and routing.
- Tuned the Flexbox layout inside the `Button` components to ensure the icon and text are grouped neatly on the left side (`flex-1`), pushing the `ArrowRight` (from `lucide-react`) to the extreme right with a subtle hover animation.
- Updated the root layout fonts to support `Anuphan` for Thai characters alongside the existing `Geist` fonts.

## 3. Docker Environment (`Dockerfile` & `docker-compose.yml`)
- Built a streamlined `Dockerfile` utilizing the `oven/bun:latest` image. The setup uses Bun for package installation (`bun install`), building (`bun run build`), and starting the app (`bun start`).
- Set up a `docker-compose.yml` file to run the Next.js container, mapping the host port `8606` to the container port `3000` (`8606:3000`) with a persistent `unless-stopped` restart policy.

## 4. Application Configuration
- Configured `next.config.ts` to support specific dev origins (`allowedDevOrigins`).
- Added utility scripts to `package.json` to make running Docker easier (`npm run up` for `docker compose up -d --build` and `npm run logs` for `docker compose logs -f`).

This successfully provides a fully responsive, easily configurable, and containerized Next.js Linktree application.

Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed.

**Tradeoff:** These guidelines bias toward caution over speed. For trivial tasks, use judgment.

## 1. Think Before Coding

**Don't assume. Don't hide confusion. Surface tradeoffs.**

Before implementing:
- State your assumptions explicitly. If uncertain, ask.
- If multiple interpretations exist, present them - don't pick silently.
- If a simpler approach exists, say so. Push back when warranted.
- If something is unclear, stop. Name what's confusing. Ask.

## 2. Simplicity First

**Minimum code that solves the problem. Nothing speculative.**

- No features beyond what was asked.
- No abstractions for single-use code.
- No "flexibility" or "configurability" that wasn't requested.
- No error handling for impossible scenarios.
- If you write 200 lines and it could be 50, rewrite it.

Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify.

## 3. Surgical Changes

**Touch only what you must. Clean up only your own mess.**

When editing existing code:
- Don't "improve" adjacent code, comments, or formatting.
- Don't refactor things that aren't broken.
- Match existing style, even if you'd do it differently.
- If you notice unrelated dead code, mention it - don't delete it.

When your changes create orphans:
- Remove imports/variables/functions that YOUR changes made unused.
- Don't remove pre-existing dead code unless asked.

The test: Every changed line should trace directly to the user's request.

## 4. Goal-Driven Execution

**Define success criteria. Loop until verified.**

Transform tasks into verifiable goals:
- "Add validation" → "Write tests for invalid inputs, then make them pass"
- "Fix the bug" → "Write a test that reproduces it, then make it pass"
- "Refactor X" → "Ensure tests pass before and after"

For multi-step tasks, state a brief plan:
```
1. [Step] → verify: [check]
2. [Step] → verify: [check]
3. [Step] → verify: [check]
```

Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.

---

**These guidelines are working if:** fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.