文档教程提示工程人工智能【免费下载链接】context-engineering-introContext engineering is the new vibe coding - its the way to actually make AI coding assistants work. Claude Code is the best for this so thats what this repo is centered around, but you can apply this strategy with any AI coding assistant!项目地址https://gitcode.com/gh_mirrors/co/context-engineering-intro点击查看免费下载本文基于use-cases/ai-coding-wisc-framework用例中的 Tier 2 按需规则文件 web-frontend.md完整讲解如何把 Web 前端技术栈约定React 19、Vite 6、Tailwind CSS v4、TanStack Query v5、React Router v7、SSE 流式传输写进 AI 编码助手自动加载的规则中并结合仓库内的 README.md、prime-frontend.md、server-api.md 等文件做源码级佐证。读完本文你将掌握如何编写一套防反模式、可自动触发、可直接复制进自己项目的前端上下文规则。一、这份规则文件在 WISC 三层上下文系统中的位置WISCWrite / Isolate / Select / Compress是use-cases/ai-coding-wisc-framework演示的上下文工程框架。其核心思想是渐进式披露progressive disclosure——不是把所有知识一次性塞进 AI 的上下文而是按需加载。整个体系分为三层层级位置加载方式Tier 1CLAUDE.md始终加载保持精简低于 500 行Tier 2.claude/rules/依据paths:frontmatter 自动加载Tier 3.claude/docs/不自动加载由 scout 子代理按需读取web-frontend.md属于Tier 2 按需规则。根据 README.md 中的对照表它在 AI 助手触碰packages/web/**/*.tsx时自动加载覆盖 Tailwind v4、SSE 事件类型、React Router v7 等前端约定。仓库中与之并列的规则还有testing.md**/*.test.ts、database.md**/db/**、orchestrator.md**/orchestrator/**等每个规则文件都通过文件路径把领域知识绑定到代码位置从而让CLAUDE.md保持精瘦、让 AI 只在需要时才加载对应上下文——这正是 WISC 中Select按需选择策略的具体落地。需要说明的是仓库中的这些规则文件位于.claude/rules-example/目录属于示例形态在你的项目里应把它们放入.claude/rules/目录AI 编码助手如 Claude Code便会依据 frontmatter 中的paths自动触发加载。二、技术栈基线一句话锁死前端选型web-frontend.md的第一节用一段紧凑清单锁定了整个前端的技术基线这些约定对 AI 来说是硬约束任何偏离都可能引发错误实现React 19 Vite 6 TypeScriptTailwind CSS v4CSS-first 配置shadcn/ui 组件TanStack Query v5 用于 REST 数据React Router v7包名是react-router不是react-router-dom手写EventSource实现 SSE 流式传输不引入任何库仅深色主题—— 不提供浅色模式开关从 prime-frontend.md 可以看到/prime-frontend命令的第一步就是让 AI 读取packages/web/package.json核对精确依赖版本React 19、Vite 6、TanStack Query v5、React Router v7、Tailwind v4、shadcn/ui与规则文件互为印证规则文件提供知识prime 命令提供现场勘查二者配合防止 AI 依据过时的框架习惯写代码。三、Tailwind v4 关键差异CSS-first 配置Tailwind v4 是规则文件中重点强调的雷区——它与 v3 的配置范式完全不同。规则文件给出了可直接复制的正确写法/* CORRECT: CSS-first import */ import tailwindcss; import tw-animate-css; /* NOT tailwindcss-animate */ /* CORRECT: theme variables in theme inline block */ theme inline { --color-surface: var(--surface); --color-accent-bright: var(--accent-bright); } /* WRONG: never use tailwind base/components/utilities */配套要点来自规则文件Vite 插件而非 PostCSSvite.config.ts中通过import tailwindcss from tailwindcss/vite引入components.json中tailwind.config留空因为 v4 不再需要独立的 Tailwind 配置文件。这里的核心认知是v4 的theme inline块把 CSS 变量与 Tailwind 工具类桥接起来主题 token 的唯一事实来源是 CSS 文件而不是tailwind.config.js/ts。这与 prime-frontend.md 中要求 AI 阅读packages/web/src/index.css中的theme inline {}块将其视为颜色、字体、设计 token 的唯一来源完全一致后者还补充了字体细节Inter JetBrains Mono。四、OKLCH 色彩体系深色主题的设计 token规则文件规定所有自定义颜色使用OKLCH色彩空间关键 token 定义在index.css的:root中。OKLCH 相比 HEX/RGB 的优势在于明度Lightness分量与色相、饱和度解耦更容易在深色主题下保持一致的对比度与视觉层级。核心 token 清单来自规则文件括号内为明度值/色相参考Token说明--surface(0.18)主表面--surface-elevated(0.22)卡片、弹出层--background(0.14)页面背景--primary/--ring蓝色强调色oklch(0.65 0.18 250)--text-primary(0.93)一级文本--text-secondary(0.65)二级文本--text-tertiary(0.45)三级文本--success(绿 155)成功--warning(黄 75)警告--error(红 25)错误使用方式是通过 Tailwind 工具类消费这些 CSS 变量例如bg-surface、text-text-primary、border-border、text-accent-bright。规则文件特别强调禁止为主题色传内联样式对象见第八节反模式清单因为内联样式会绕过设计 token 体系导致颜色失控。五、SSE 流式传输模式唯一的 EventSource 消费者规则文件指出前端 SSE 的消费方是唯一的useSSE()位于src/hooks/useSSE.ts并详细规定了它的行为契约向/api/stream/{conversationId}打开EventSource以50ms 冲刷定时器批量合并文本事件减少不必要的重渲染在tool_call、tool_result、workflow_dispatch事件到达时立即冲刷保证工具调用状态的实时性仅在CLOSED状态标记断开连接而非CONNECTING状态——避免连接建立过程中的闪烁采用handlersRef模式保证 EventSource 实例稳定、handler 始终最新解决闭包过期问题。规则文件还列出了完整的 SSE 事件类型清单这是后端与前端约定的协议字典text、tool_call、tool_result、error、conversation_lock、session_info、workflow_step、workflow_status、parallel_agent、workflow_artifact、dag_node、workflow_dispatch、workflow_output_preview、warning、retract、heartbeat。从后端佐证看server-api.md 给出了 HonostreamSSE的服务端模式写入前必须检查stream.closed通过stream.onAbort()做清理并由SSETransportsrc/adapters/web/transport.ts维护流注册表removeStream()接收expectedStream引用以规避 React StrictMode 双挂载导致的竞态。前端useSSE()的单消费者约束与后端SSETransport的流注册管理正好是一对对称设计——每条会话只有一个流、一个消费者。六、路由React Router v7 的导入规范React Router v7 将包统一为react-router规则文件以代码对比的形式强制导入来源// CORRECT import { BrowserRouter, Routes, Route } from react-router; // WRONG import { BrowserRouter } from react-router-dom;规则文件同时给出了路由表/—— Dashboard/chat/chat/*/workflows/workflows/builder/workflows/runs/:runId/settings七、API 客户端模式REST 与 SSE 的分工规则文件规定了 API 客户端的组织方式// src/lib/api.ts exports SSE_BASE_URL and REST functions import { SSE_BASE_URL } from /lib/api; // In dev: Vite proxies /api/* to localhost:{VITE_API_PORT} // API port injected at build time: import.meta.env.VITE_API_PORT关键配置开发环境下Vite 将/api/*代理到localhost:{VITE_API_PORT}API 端口在构建时通过import.meta.env.VITE_API_PORT注入TanStack Query 的staleTime: 10_00010 秒数据保鲜、refetchOnWindowFocus: true窗口聚焦时重新拉取。REST 与 SSE 的分工逻辑结合 prime-frontend.md 的归纳TanStack Query v5负责 REST 数据conversations、codebases、workflows 等实体资源手写EventSourceuseSSE负责 SSE 流式传输开发环境下 SSE 直连后端、绕过 Vite 代理因此单独维护SSE_BASE_URL生产环境为相对路径。/路径别名指向src/在tsconfig.json中配置见 prime-frontend.md 的说明。八、反模式清单写给 AI 的红线规则文件的最后一节是六条硬性反模式这是防止 AI 退化到旧习惯的关键永远不要加浅色模式—— 深色主题是刻意设计不是遗漏永远不要用react-router-dom—— 一律使用react-routerv7永远不要在tailwind.config.js/ts中配置 Tailwind—— v4 是 CSS-first永远不要用tailwindcss-animate—— 使用tw-animate-css永远不要为每条会话打开第二个EventSource——useSSE()统一处理永远不要为主题色传内联样式对象—— 使用带 CSS 变量的 Tailwind 类。这类负面约束对 AI 编码助手尤其重要LLM 训练数据里充斥着 Tailwind v3、React Router v6 的旧模式仅靠正向描述往往不够明确列出绝不要做什么能显著降低 AI 产生陈旧写法如tailwind base、react-router-dom导入的概率。这与同级规则文件的写法一脉相承例如 testing.md 同样以CRITICAL级别的反模式如mock.module()无法被mock.restore()还原来约束 AI 的测试行为。九、与/prime-frontend命令协同规则 勘查web-frontend.md提供静态知识而 prime-frontend.md 提供动态勘查两者共同构成前端的完整上下文方案。/prime-frontend的七步流程是读packages/web/package.json核对精确依赖版本读packages/web/src/App.tsx了解路由、布局、QueryClient 配置与 ErrorBoundary并列出routes/、components/目录逐一查看各组件子目录chat、conversations、dashboard、layout、sidebar、ui、workflows的职责划分读src/lib/api.tsREST 函数与 SSE 基础 URL 逻辑与src/hooks/useSSE.ts读src/index.css的theme inline {}块颜色、字体、设计 token 的唯一来源读服务端 Web 适配器packages/server/src/adapters/web/与packages/server/src/routes/api.ts前 80 行用git log -8 --oneline -- packages/web/ packages/server/src/adapters/web/查看近期前端改动。最终输出一份 200 字以内的摘要覆盖路由结构、组件组织、数据获取REST vs SSE、Tailwind v4 shadcn/ui 模式、近期变更。这种按需勘查 摘要化输出正是 WISC 的Isolate策略——把探索噪音留在子代理/命令内部主会话只接收精炼结论。十、如何把这套方法迁移到你的项目参照 README.md 给出的落地顺序前端规则可以这样接入先做 Select把领域约定从全局CLAUDE.md中剥离按文件路径拆分成.claude/rules/*.md每个文件顶部用paths:frontmatter 声明触发条件如packages/web/**/*.tsx让CLAUDE.md保持精简再写红线每个规则文件末尾维护反模式清单专门针对框架新旧版本的易错点如本文件对 Tailwind v3 语法、react-router-dom的禁用配合勘查命令为每个领域配套一个prime-*命令如/prime-frontend让 AI 在开工前先做一次聚焦勘查规则提供约束、命令提供现场事实用 Compress 兜底会话变长后用聚焦/compact或/handoff见 README.md 的会话管理命令交接避免上下文膨胀。需要注意的是仓库中use-cases/ai-coding-wisc-framework/.claude/rules-example/下的文件是规则示例其中的paths指向的packages/web/**等目录结构属于该演示项目的假设架构迁移时请将路径替换为你自己仓库的实际目录并把文件放入.claude/rules/目录才能被自动加载。结语web-frontend.md是一个典型的 Tier 2 前端上下文规则范本它用技术栈基线锁死选型、用代码块给出 Tailwind v4 的正确姿势、用 token 表定义深色主题设计体系、用useSSE()契约约束流式传输、用反模式清单拦住 AI 的惯性错误。它与仓库中的 README.md、prime-frontend.md、server-api.md 共同构成了 WISC 框架规则 勘查 后端协议的完整闭环——这正是上下文工程在真实前端项目中的落地形态。赞分享文档教程提示工程人工智能【免费下载链接】context-engineering-introContext engineering is the new vibe coding - its the way to actually make AI coding assistants work. Claude Code is the best for this so thats what this repo is centered around, but you can apply this strategy with any AI coding assistant!项目地址https://gitcode.com/gh_mirrors/co/context-engineering-intro点击查看免费下载相关推荐用 prime-frontend 命令实现前端上下文预载context-engineering-intro 中 WISC 框架 SELECT 策略的实战用 prime frontend 命令实现前端上下文预载context engineering intro 中 WISC 框架 SELECT 策略的实战 导读文档教程提示工程人工智能WISC 框架实战用路径触发式 server-api 规则固化 Hono、SSE 与 Webhook 服务端约定WISC 框架实战用路径触发式 server api 规则固化 Hono、SSE 与 Webhook 服务端约定 本文围绕开源仓库 WISC Framewor文档教程提示工程人工智能WISC 框架实战为 AI 编码助手编写 CLI 模块规则文件 —— Archon cli.md 全解析WISC 框架实战为 AI 编码助手编写 CLI 模块规则文件 —— Archon cli.md 全解析 本篇技术指南以 WISC 上下文工程框架Write文档教程提示工程人工智能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
