Skill Library 技能库Prompt Skill 迅速技能1 Designs 设计Top Views 俯视图

React/Vite File Pack ContractReact/Vite 文件包契约

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

为 React + Vite + TypeScript 直出项目约束文件标记、允许文件、默认导出、依赖白名单、CSS 放置和修复返回格式。

Skill Uses 技能用0

记录的复用次数与项目引用。

Public Designs 公共设计1

按浏览量与收藏热度排序。

Prompt Lines 提示8

可复用的提示指令数量。

Author 作者@Interface Lab

实现

Skill Directive 技能指导

Description 描述

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

为 React + Vite + TypeScript 直出项目约束文件标记、允许文件、默认导出、依赖白名单、CSS 放置和修复返回格式。

Tags 标签实现

Skill Prompt 技能提示

- 仅在需要输出或修复 React + Vite + TypeScript 文件包时调用；如果用户只要解释、审计或单文件 HTML，不要使用这个 skill。
- 输出必须只包含文件包标记：`---FILE: src/App.tsx---`、文件内容、`---END FILE---`；不要包 markdown fences、解释、package.json、index.html、main.tsx、Vite config 或 Tailwind config。
- 允许文件范围固定：`src/App.tsx`、`src/index.css`、`src/data.ts`、`src/components/*.tsx`；组件可拆分，但 `src/App.tsx` 必须存在且默认导出 App。
- 依赖白名单固定：react、react-dom、framer-motion、lucide-react、Tailwind CSS utilities 和浏览器 API；不要引入 three、gsap、@react-three/fiber、zustand、axios 或未在契约中的包。
- Tailwind 类写在 TSX；自定义 CSS、keyframes、font-face/imports、CSS variables 和全局 reset 放进 `src/index.css`；不要把大段 style tag 写进组件。
- 媒体 URL 必须来自用户 prompt 或已入库素材；不要发明不可控私有 URL，不要把 prompt 文档标题渲染成页面正文。
- 修复 pass 只返回用户允许修复文件的完整内容；遗漏文件会保留，不返回 diff，不返回禁止文件。
- 内部来源：Interface Lab `reactViteSystemPrompt`、`parseReactViteFilePack` 和固定 Vite 写入器规则；这是项目执行契约，不是外部通用 React 教程。

当前展示公共摘要；登录 Pro 后可查看完整 prompt。

Layout Info 布局信息

下方作品按浏览量排序；前几项使用实时预览，其余保持快速缩略卡片。

Pro 解锁所有技能

React/Vite File Pack ContractReact/Vite 文件包契约

更多使用 React/Vite 文件包契约 的页面

更多使用 React/Vite 文件包契约的页面