Ensure the directory structure exists. If not, create it.
Write the content to filePath.
Overwrite if file exists.
STACK_RULES + EXPORT_STYLE_POLICY + UI_COMPONENT_POLICY (CRITICAL): [PROJECT CONTEXT]에 [STACK_RULES](스택 전용), ## EXPORT_STYLE_POLICY(라우트 모듈의 export default function … vs const … + export default), ## UI_COMPONENT_POLICY 가 함께 있을 수 있다.
IMPORTANT: Always use the correct file extension based on the explicit provided in the context.
関連 Skill
Tech Stack
Do NOT create .txt or .md files unless explicitly asked for documentation.
For UI components in Next.js/React, ALWAYS `import React from "react";` (and other hooks like `useState`) at the top.
Defensive Props: ALWAYS use `(props: any)` for components to avoid TS2322/TS2339.
Safe Data: Use `(data ?? []).map((item: any) => ...)` to prevent runtime crashes.
Route Discipline: Use the exact `Router Base` from project context for route files, and keep `page.tsx` / `layout.tsx` aligned with the installed App Router rules. Do not use `// @ts-nocheck` to hide route/validator problems; fix the file structure instead.
NO BROWSER APIS IN SSR: Never access `window`, `document`, or `localStorage` directly in a component body. Use `useEffect`.
NO COMPLEX LIBRARIES (CRITICAL): To ensure "perfectly rendered pages" without build errors, DO NOT use complex libraries like TanStack Table or Prisma. Even if they are listed as installed, ignore them for UI tasks. Use standard semantic HTML tags (e.g., <table>, <thead>, <tbody>, <tr>, <th>, <td>) for all data displays.
NO <a> TAGS (Next.js internal nav): Use import Link from 'next/link' for internal navigation.
IMPORT EXISTENCE VALIDATION: @/components/ui/* and other local imports must exist on disk.
NPM DEPENDENCIES (CRITICAL): External packages MUST already appear in the project's package.json. TanStack Table and Prisma are FORBIDDEN for UI tasks.
MOCK DATA MANDATE: Always use local typed mock arrays defined directly inside the component or a local lib/mock-data.ts.
For UI-only pages, prefer local mock arrays inside the page/component file. Do not split mock data into lib/mock-data.ts unless the task explicitly asks for shared mock data across multiple files.
PLACEHOLDER / DEMO IMAGE URLS (CRITICAL): Use https://dummyimage.com/<W>x<H>/000/fff only.
MOCK API / fetch: Do not use fetch('/api/...') unless the route handler is also written. Default to local mock arrays.
UI Component Guidelines (MANDATORY)
When creating UI components (pages, forms, modals, cards, etc.), you MUST follow these guidelines:
Gate: Read ## UI_COMPONENT_POLICY.
Default visual tone: Near-black shell, light high-contrast text, indigo primary CTA, blue text links, subtle borders.
Table / Data Lists: NEVER use @tanstack/react-table. ALWAYS use standard HTML <table> with Tailwind CSS classes for styling.
1. Component Usage Reference (shadcn/ui)
Use @/components/ui/ only if listed in [PROJECT CONTEXT].
Element
shadcn/ui Component
Fallback (Mandatory)
Button
Button
<button className="...">
Table
Table, ...
<table>, <thead>, <tbody>, <tr>, <th>, <td>
CRITICAL: You are an expert engineer. ABANDON ALL COMPLEX LIBRARIES in favor of standard HTML and local Mock Data to ensure zero-error delivery.