prime-frontend

Prime Frontend：加载前端上下文

目标

通过分析前端代码库的结构、组件和约定，深入了解前端代码。仅加载前端上下文，可让复杂的全栈代码库占用较少的上下文窗口。如果提供了外部任务参考，请先加载，以便分析基于实际工作展开。

流程

步骤 0：加载外部上下文

请在分析代码库之前运行此步骤。 可选参数：[jira-issue-keys] [confluence-page-ids]。

• Jira 键可以是单个键（ACC-2），也可以是逗号分隔的多个键（ACC-2,ACC-3）。
• Confluence 页面 ID 为数字。

如果提供了 Jira 事项键：

1. 调用 mcp__atlassian__getAccessibleAtlassianResources 获取 cloudId。
2. 对每个 Jira 键，调用 mcp__atlassian__getJiraIssue，并传入该 cloudId、事项键和 responseContentFormat: "markdown"。
3. 将返回的事项摘要、描述和验收标准作为后续所有工作的任务上下文。

如果提供了 Confluence 页面 ID：

1. 对每个页面 ID 调用 mcp__atlassian__getConfluencePage，并传入 contentFormat: "markdown"（如果尚未获取 cloudId，请使用上面的方式调用 mcp__atlassian__getAccessibleAtlassianResources 获取）。
2. 将返回的页面内容作为支持性上下文（规格、设计文档、需求）。

如果未提供参数： 完全跳过此步骤，继续执行步骤 1。

继续之前，简要总结已加载的任何外部上下文，为后续预热分析提供依据。

1. 定位前端

列出所有已跟踪文件，以找到前端根目录：

!git ls-files

常见的前端根目录：frontend/、client/、web/、src/（仅包含前端的项目中）和 app/（Next.js）。继续之前，请先确定正确的根目录。

2. 阅读前端文档

• 阅读 CLAUDE.md 或类似的全局规则文件（了解项目级约定）
• 阅读前端根目录中的任何 README
• 如果存在 .claude/references/frontend-component-best-practices.md，请阅读——其中包含项目特定的组件约定

3. 确定关键前端文件

根据项目结构，阅读以下文件：

• 主入口点（main.tsx、index.tsx、app/layout.tsx、pages/_app.tsx 等）
• 路由配置（router.tsx、routes.ts，以及 Next.js 项目的 app/ 目录）
• 全局状态设置（store、上下文提供程序）
• 共享组件库根目录（components/、ui/）
• 核心配置（package.json、tsconfig.json、vite.config.ts、next.config.ts）
• 一两个具有代表性的功能组件，以熟悉已确立的模式

跳过前端根目录之外的文件，但前端所依赖的共享类型或契约除外。

4. 了解当前前端状态

检查近期与前端相关的活动：

!git log -10 --oneline

!git status

留意前端目录中尚未提交的更改。

输出报告

提供简明摘要，涵盖以下内容：

外部任务上下文（如已加载）

• Jira 事项：键、标题、一句话目标、验收标准
• Confluence 页面：标题及其说明内容

前端概览

• 框架和主要库（React、Vue、Next.js、Tailwind 等）
• 观察到的组件模式（原子设计、功能目录等）
• 状态管理方式

目录映射

• 前端根目录及关键子目录，每个目录用一句话说明用途

约定

• 命名约定、文件同置规则
• 样式方案
• 观察到的测试框架和约定

当前状态

• 当前分支、近期前端更改
• 任何需要立即关注的问题（缺少类型、已弃用模式等）

请使用项目符号和清晰的标题，让摘要便于快速浏览。