Skill LibraryPrompt Skill1 DesignsTop Views

React/Vite File Pack Contract

Constrain React + Vite + TypeScript direct generation around file markers, allowed files, default export, dependency whitelist, CSS placement, and repair output format.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines8

Reusable instruction lines for generation.

Author@Interface Lab

Implementation

Skill Directive

Description

Constrain React + Vite + TypeScript direct generation around file markers, allowed files, default export, dependency whitelist, CSS placement, and repair output format.

TagsImplementation

Skill Prompt

- Use only when generating or repairing a React + Vite + TypeScript file pack; do not use for explanations, audits, or single-file HTML output.
- Return only file-pack markers: `---FILE: src/App.tsx---`, file content, `---END FILE---`; do not include markdown fences, explanations, package.json, index.html, main.tsx, Vite config, or Tailwind config.
- Allowed files are fixed: `src/App.tsx`, `src/index.css`, `src/data.ts`, and `src/components/*.tsx`; components may be split, but `src/App.tsx` must exist and default-export App.
- The dependency whitelist is fixed: react, react-dom, framer-motion, lucide-react, Tailwind CSS utilities, and browser APIs; do not import three, gsap, @react-three/fiber, zustand, axios, or packages outside the contract.
- Write Tailwind classes in TSX; put custom CSS, keyframes, font-face/imports, CSS variables, and global reset in `src/index.css`; do not embed large style tags in components.
- Media URLs must come from the user prompt or approved catalog assets; do not invent uncontrolled private URLs, and do not render prompt-document headings as page copy.
- Repair passes return only full contents for user-allowed repair files; omitted files are preserved, diffs are forbidden, and forbidden files must not be returned.
- Internal source: Interface Lab `reactViteSystemPrompt`, `parseReactViteFilePack`, and fixed Vite writer rules; this is a project execution contract, not a generic React tutorial.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

React/Vite File Pack Contract

More pages using React/Vite File Pack Contract