feat: implement core UI component library and project infrastructure configuration

SKILL.md

@@ -0,0 +1,94 @@
+---
+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.