erika/SKILL.md

name, description

name	description
Linktree Setup Documentation	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 docker-compose.yml with host port 8888 mapped to nginx on port 80 (8888:80); nginx proxies to the Next.js process on internal port 3000. Keep the 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.

5. Form Module Structure

• Public Form Viewer: Located at app/form/page.tsx and app/form/client.tsx. This is where users see and submit the form. It renders questions and handles user input with validation.
• Admin Form Builder: Located under app/admin/form/. This interface allows administrators to create and edit questions, change form settings, and specify input types (Text, Textarea, Radio, Checkboxes).
• Database Schema: Defined in db/schema/form.ts, which contains definitions for forms, questions, submissions, and answers.
• Server Actions: Backend logic for managing forms and submissions is located in app/admin/form/actions.ts, app/actions/questions.ts, and app/actions/submissions.ts. Shared authorization lives in lib/auth.ts.

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.