Back to Details

prime-frontend

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Prime Frontend: Load Frontend Context

Prime Frontend：加载前端上下文

Objective

目标

Build targeted understanding of the frontend codebase by analyzing its structure, components, and conventions. Loading only frontend context keeps the context window light on complex full-stack codebases. If external task references are provided, load them first so the analysis is anchored to the actual work.
通过分析前端代码库的结构、组件和约定，建立针对性的理解。仅加载前端上下文可在复杂的全栈代码库中保持上下文窗口轻量化。如果提供了外部任务参考，请先加载它们，以便分析锚定到实际工作。

Process

流程

Step 0: Load External Context

步骤0：加载外部上下文

Run this step BEFORE the codebase analysis. It accepts optional arguments: 
[jira-issue-keys] [confluence-page-ids]
.
  • Jira keys may be a single key (
    ACC-2
    ) or comma-separated (
    ACC-2,ACC-3
    ).
  • Confluence page ids are numeric page ids.
If Jira issue keys are provided:
  1. Call 
    mcp__atlassian__getAccessibleAtlassianResources
    to obtain the 
    cloudId
    .
  2. For each Jira key, call 
    mcp__atlassian__getJiraIssue
    with that 
    cloudId
    , the issue key, and 
    responseContentFormat: "markdown"
    .
  3. Treat the returned issue summary, description, and acceptance criteria as the task context for everything that follows.
If Confluence page ids are provided:
  1. Call 
    mcp__atlassian__getConfluencePage
    for each page id with 
    contentFormat: "markdown"
    (use the 
    cloudId
    from above, fetching it via 
    mcp__atlassian__getAccessibleAtlassianResources
    if it was not already retrieved).
  2. Treat the returned page content as supporting context (specs, design docs, requirements).
If no arguments are provided: Skip this step entirely and proceed to Step 1.
Briefly summarize any external context loaded before continuing — this frames the rest of the priming.
在代码库分析之前运行此步骤。 它接受可选参数：
[jira-issue-keys] [confluence-page-ids]
。
  • Jira密钥可以是单个密钥（
    ACC-2
    ）或逗号分隔的多个密钥（
    ACC-2,ACC-3
    ）。
  • Confluence页面ID为数字页面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. Locate the Frontend

1. 定位前端目录

List all tracked files to find the frontend root:
!
git ls-files
Common frontend roots: 
frontend/
, 
client/
, 
web/
, 
src/
(when project is frontend-only), 
app/
(Next.js). Identify the correct root before proceeding.
列出所有被追踪的文件以找到前端根目录：
!
git ls-files
常见的前端根目录：
frontend/
、
client/
、
web/
、
src/
（当项目仅为前端时）、
app/
（Next.js项目）。继续之前先确定正确的根目录。

2. Read Frontend Documentation

2. 阅读前端文档

  • Read CLAUDE.md or similar global rules file (for project-wide conventions)
  • Read any README inside the frontend root
  • Read 
    .claude/references/frontend-component-best-practices.md
    if it exists — it contains project-specific component conventions
  • 阅读CLAUDE.md或类似的全局规则文件（了解项目范围内的约定）
  • 阅读前端根目录内的任何README文件
  • 如果存在
    .claude/references/frontend-component-best-practices.md
    ，请阅读它——其中包含项目特定的组件约定

3. Identify Key Frontend Files

3. 识别关键前端文件

Based on the structure, read:
  • Main entry point (
    main.tsx
    , 
    index.tsx
    , 
    app/layout.tsx
    , 
    pages/_app.tsx
    , etc.)
  • Routing configuration (
    router.tsx
    , 
    routes.ts
    , 
    app/
    directory for Next.js)
  • Global state setup (store, context providers)
  • Shared component library root (
    components/
    , 
    ui/
    )
  • Core configuration (
    package.json
    , 
    tsconfig.json
    , 
    vite.config.ts
    , 
    next.config.ts
    )
  • One or two representative feature components to internalize the established patterns
Skip files outside the frontend root unless they define a shared type or contract the frontend depends on.
根据结构，阅读以下文件：
  • 主入口文件（
    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. Understand Current Frontend State

4. 了解当前前端状态

Check recent frontend-relevant activity:
!
git log -10 --oneline
!
git status
Note any open changes in the frontend directory.
查看近期与前端相关的活动：
!
git log -10 --oneline
!
git status
记录前端目录中的任何未提交更改。

Output Report

输出报告

Provide a concise summary covering:
提供一份简洁的总结，涵盖以下内容：

External Task Context (if loaded)

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

  • Jira issue(s): key, title, one-line goal, acceptance criteria
  • Confluence page(s): title and what they specify
  • Jira问题：密钥、标题、一行描述的目标、验收标准
  • Confluence页面：标题及其内容说明

Frontend Overview

前端概述

  • Framework and major libraries (React, Vue, Next.js, Tailwind, etc.)
  • Component patterns observed (atomic design, feature folders, etc.)
  • State management approach
  • 框架和主要库（React、Vue、Next.js、Tailwind等）
  • 观察到的组件模式（原子设计、功能文件夹等）
  • 状态管理方案

Directory Map

目录结构

  • Frontend root and key sub-directories with one-line purpose each
  • 前端根目录和关键子目录，每个目录附带一行用途说明

Conventions

约定规范

  • Naming conventions, file co-location rules
  • Styling approach
  • Testing framework and conventions observed
  • 命名约定、文件共存规则
  • 样式方案
  • 观察到的测试框架和约定

Current State

当前状态

  • Active branch, recent frontend changes
  • Any immediate concerns (missing types, deprecated patterns, etc.)
Make this summary easy to scan - use bullet points and clear headers.
  • 当前分支、近期前端变更
  • 任何即时问题（缺失类型、已弃用模式等）
请让这份总结易于浏览——使用项目符号和清晰的标题。