fusion-app-react-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Deprecated — This skill has been renamed to fusion-developer-app
. Install the replacement:
npx -y skills add equinor/fusion-skills --skill fusion-developer-app
This skill will be removed in a future release.

已废弃 — 此技能已更名为**
fusion-developer-app
**。请安装替代技能：
npx -y skills add equinor/fusion-skills --skill fusion-developer-app
此技能将在未来版本中移除。

Fusion App Development

Fusion应用开发

When to use

适用场景

Use this skill when developing features, components, hooks, services, or types for a Fusion Framework React application.

Typical triggers:

"Add a component for ..."
"Create a hook that ..."
"Wire up the API"
"Build a page for ..."
"Add a service to fetch ..."
"Configure a Fusion module"
"Which Fusion Framework hook should this app use?"
"What is the right package or module for this app integration?"
"Find the correct Fusion Framework example before implementing this app change"
"Persist this preference as an app setting"
"Add bookmark support for this view"
"Read runtime config or environment variables"
"Instrument this page with analytics"
"Add a feature flag to this app"
"How do I use the useFeature hook in a Fusion app?"
"Implement a feature for ..."

Implicit triggers:

The user asks to build something in
```
src/
```
The user references Fusion Framework modules, EDS components, Fusion React components (
```
@equinor/fusion-react-*
```
), or styled-components patterns
The user references app settings, bookmarks, analytics, or
```
app.config.ts
```
The user wants to add a new route, page, or data-fetching layer

当你为Fusion Framework React应用开发功能、组件、钩子、服务或类型时，可使用此技能。

典型触发场景：

"为……添加组件"
"创建一个用于……的钩子"
"对接API"
"为……构建页面"
"添加用于获取……的服务"
"配置Fusion模块"
"此应用应使用哪个Fusion Framework钩子？"
"用于此应用集成的正确包或模块是什么？"
"在实现此应用变更前查找正确的Fusion Framework示例"
"将此偏好设置保存为应用配置"
"为此视图添加书签支持"
"读取运行时配置或环境变量"
"为此页面添加分析埋点"
"为此应用添加功能开关"
"如何在Fusion应用中使用useFeature钩子？"
"为……实现功能"

隐含触发场景：

用户要求在
```
src/
```
目录下构建内容
用户提及Fusion Framework模块、EDS组件、Fusion React组件（
```
@equinor/fusion-react-*
```
）或styled-components模式
用户提及应用配置、书签、分析或
```
app.config.ts
```
用户想要添加新路由、页面或数据获取层

When not to use

不适用场景

Do not use this skill for:

Issue authoring or triage (use
```
fusion-issue-authoring
```
)
Skill authoring (use
```
fusion-skill-authoring
```
)
Backend/service changes (separate repository)
CI/CD pipeline or deployment configuration
Architecture documentation (use ADR template)

When the request is primarily about Fusion Framework package ownership, hook behavior, or example discovery rather than app implementation, use the companion skill

fusion-research

first and then return here for code changes.

请勿将此技能用于以下场景：

问题创建或分类（请使用
```
fusion-issue-authoring
```
）
技能创建（请使用
```
fusion-skill-authoring
```
）
后端/服务变更（单独仓库）
CI/CD流水线或部署配置
架构文档（请使用ADR模板）

当请求主要涉及Fusion Framework包归属、钩子行为或示例查找而非应用实现时，请先使用配套技能

fusion-research

，再返回此技能进行代码变更。

Required inputs

必填输入

Mandatory

强制输入

What to build: a clear description of the feature, component, hook, or service
Where it fits: which layer (component, hook, service, type) and any parent/sibling context

If the user's request is ambiguous or missing critical details, consult

assets/follow-up-questions.md

for domain-specific clarifying questions before implementing.

构建内容：对功能、组件、钩子或服务的清晰描述
位置信息：所属层级（组件、钩子、服务、类型）以及任何父级/同级上下文

如果用户的请求模糊或缺少关键细节，请在实现前参考

assets/follow-up-questions.md

中的领域特定澄清问题进行询问。

Conditional

条件输入

API endpoint details when the feature involves data fetching
Design/layout specifics when building visual components
Fusion module name when extending module configuration
Whether state should persist per-user, be shareable via bookmark, or stay runtime-only

当功能涉及数据获取时，需提供API端点详情
构建可视化组件时，需提供设计/布局细节
扩展模块配置时，需提供Fusion模块名称
状态是否应按用户持久化、可通过书签共享或仅在运行时保留

Instructions

操作步骤

Step 1 — Discover project conventions

步骤1 — 了解项目约定

Before writing any code, inspect the target repository to learn its specific setup:

Read
```
package.json
```
to identify the package manager (bun/pnpm/npm), available scripts, and installed dependencies.
Read
```
tsconfig.json
```
to confirm TypeScript settings and path aliases.
Scan
```
src/
```
to understand the current directory layout and layer structure.
Check for ADRs (
```
docs/adr/
```
) or a
```
contribute/
```
directory for project-specific code standards.
Check for formatter/linter config (biome.json, .eslintrc, prettier config).
Read
```
app.config.ts
```
and
```
app.manifest.ts
```
to understand existing endpoint and environment setup.
If the implementation depends on uncertain Fusion Framework behavior, exact package ownership, or cookbook examples, delegate that research to
```
fusion-research
```
before writing code.

Adapt all subsequent steps to the conventions discovered here. The patterns in

references/

are defaults — defer to project-specific rules when they differ.

在编写任何代码之前，检查目标仓库以了解其特定设置：

阅读
```
package.json
```
以确定包管理器（bun/pnpm/npm）、可用脚本和已安装依赖。
阅读
```
tsconfig.json
```
以确认TypeScript设置和路径别名。
扫描
```
src/
```
目录以理解当前目录结构和层级架构。
检查ADR（
```
docs/adr/
```
）或
```
contribute/
```
目录以获取项目特定的代码标准。
检查格式化/检查器配置（biome.json, .eslintrc, prettier配置）。
阅读
```
app.config.ts
```
和
```
app.manifest.ts
```
以了解现有端点和环境设置。
如果实现依赖于不确定的Fusion Framework行为、确切的包归属或示例，请在编写代码前将研究工作委托给
```
fusion-research
```
。

使后续所有步骤适应此处发现的约定。

references/

中的模式为默认值——当项目特定规则与之不同时，优先遵循项目规则。

Step 2 — Plan the implementation

步骤2 — 规划实现方案

If scaffolding a new app from scratch, use

assets/new-app-checklist.md

as a progress tracker.

Break the work into discrete files/changes.
Map each piece to the correct directory. A typical Fusion app uses:
- ```
src/components/
```
  — React components (presentation layer)
- ```
src/hooks/
```
  — Custom React hooks (state and side-effect logic)
- ```
src/api/
```
  — API clients, data transforms, business logic
- ```
src/types/
```
  — TypeScript interfaces, type aliases, enums
- ```
src/routes.ts
```
  — Route definitions (when using Fusion Router)
- ```
src/config.ts
```
  — Fusion module configuration
- ```
src/App.tsx
```
  — Root component, layout shell
Identify shared types early — define them before referencing.
If the project uses routing, follow
```
references/using-router.md
```
for the DSL and page patterns.
If the project uses a different structure, follow it.

如果从头搭建新应用，请使用

assets/new-app-checklist.md

作为进度跟踪工具。

将工作拆分为独立的文件/变更。
将每个部分映射到正确的目录。典型的Fusion应用使用：
- ```
src/components/
```
  — React组件（展示层）
- ```
src/hooks/
```
  — 自定义React钩子（状态和副作用逻辑）
- ```
src/api/
```
  — API客户端、数据转换、业务逻辑
- ```
src/types/
```
  — TypeScript接口、类型别名、枚举
- ```
src/routes.ts
```
  — 路由定义（使用Fusion Router时）
- ```
src/config.ts
```
  — Fusion模块配置
- ```
src/App.tsx
```
  — 根组件、布局外壳
尽早识别共享类型——在引用前定义它们。
如果项目使用路由，请遵循
```
references/using-router.md
```
中的DSL和页面模式。
如果项目使用不同的结构，请遵循该结构。

Step 3 — Implement following code conventions

步骤3 — 遵循代码约定实现

Follow the project's code standards (discovered in Step 1). For all convention rules — naming, TSDoc, inline comments, type patterns, code style, and error handling — defer to the

fusion-code-conventions

skill.

When convention questions arise during implementation, invoke

fusion-code-conventions

directly. It routes to the correct language agent and returns the authoritative rule with an example.

遵循项目的代码标准（在步骤1中发现）。对于所有约定规则——命名、TSDoc、内联注释、类型模式、代码风格和错误处理——请遵循

fusion-code-conventions

技能。

在实现过程中遇到约定问题时，请直接调用

fusion-code-conventions

。它会路由到正确的语言代理并返回带有示例的权威规则。

Step 4 — Style with styled-components, EDS, and Fusion React components

步骤4 — 使用styled-components、EDS和Fusion React组件进行样式设计

references/styled-components.md

references/styling-with-eds.md

, and

references/using-fusion-react-components.md

Use
```
styled-components
```
for custom styling — this is the Fusion ecosystem convention.
Do not introduce CSS Modules, global CSS files, Tailwind, or alternative CSS-in-JS unless the project explicitly uses them.
Use the
```
Styled
```
object pattern for co-located styled components.
Prefer EDS components from
```
@equinor/eds-core-react
```
as the base for standard UI elements.
Use EDS design tokens (CSS custom properties or
```
@equinor/eds-tokens
```
) for colors, spacing, and typography.
Extend EDS components with
```
styled()
```
when customization is needed.
Use Fusion React components (
```
@equinor/fusion-react-*
```
) for domain-specific needs not covered by EDS — person display/selection, Fusion side sheets, and progress indicators.
Inline
```
style
```
props are acceptable for one-off tweaks only.

遵循

references/styled-components.md

、

references/styling-with-eds.md

和

references/using-fusion-react-components.md

：

使用
```
styled-components
```
进行自定义样式设计——这是Fusion生态系统的约定。
除非项目明确使用，否则不要引入CSS Modules、全局CSS文件、Tailwind或其他CSS-in-JS方案。
使用
```
Styled
```
对象模式进行组件内联样式设计。
优先使用
```
@equinor/eds-core-react
```
中的EDS组件作为标准UI元素的基础。
使用EDS设计令牌（CSS自定义属性或
```
@equinor/eds-tokens
```
）设置颜色、间距和排版。
需要自定义时，使用
```
styled()
```
扩展EDS组件。
使用Fusion React组件（
```
@equinor/fusion-react-*
```
）处理EDS未覆盖的领域特定需求——人员显示/选择、Fusion侧边栏和进度指示器。
内联
```
style
```
属性仅适用于一次性调整。

Step 5 — Wire up data fetching (when applicable)

步骤5 — 对接数据获取（适用时）

references/configure-services.md

references/using-react-query.md

, and

references/configure-mocking.md

for data-fetching and local dev mocking patterns:

Access clients in components with

useHttpClient(name)

from

@equinor/fusion-framework-react-app/http

Always prefer
@equinor/fusion-framework-react-app/*
hooks (
```
useHttpClient
```
,
```
useCurrentContext
```
, etc.) over direct module access. Reserve
```
framework.modules.*
```
for non-React contexts like route loaders.
When the project uses React Query (
```
@tanstack/react-query
```
), create thin custom hook wrappers around
```
useQuery
```
.
Use query keys derived from API path + parameters.
Keep client UI state in React state/context, not in server-state libraries.

遵循

references/configure-services.md

、

references/using-react-query.md

和

references/configure-mocking.md

中的数据获取和本地开发模拟模式：

通过
```
config.ts
```
中的
```
configureHttpClient
```
或
```
app.config.ts
```
端点注册HTTP客户端。

使用

@equinor/fusion-framework-react-app/http

中的

useHttpClient(name)

在组件中访问客户端。

始终优先使用
@equinor/fusion-framework-react-app/*
钩子（
```
useHttpClient
```
、
```
useCurrentContext
```
等）而非直接模块访问。仅在非React上下文（如路由加载器）中保留
```
framework.modules.*
```
的使用。
当项目使用React Query（
```
@tanstack/react-query
```
）时，在
```
useQuery
```
周围创建轻量自定义钩子包装器。
使用从API路径+参数派生的查询键。
将客户端UI状态保存在React状态/上下文中，而非服务器状态库中。

Step 6 — Configure Fusion modules (when applicable)

步骤6 — 配置Fusion模块（适用时）

Identify which module the user needs, then read only the matching reference:

Need	Reference
HTTP clients / API integration	`references/configure-services.md`
Context module	`references/using-context.md`
Router and pages	`references/using-router.md`
AG Grid	`references/using-ag-grid.md`
EDS + Fusion React components	`references/using-fusion-react-components.md`
Settings	`references/using-settings.md`
Bookmarks	`references/using-bookmarks.md`
Analytics	`references/using-analytics.md`
Runtime config / environment	`references/using-assets-and-environment.md`
Feature flags	`references/using-feature-flags.md`
General framework modules	`references/using-framework-modules.md`

Add module setup in
```
config.ts
```
using the
```
AppModuleInitiator
```
callback.

Access modules in components via hooks:

useAppModule

useHttpClient

useCurrentContext

Register HTTP client endpoints in
```
app.config.ts
```
when adding new API integrations.
Enable navigation with
```
enableNavigation
```
in
```
config.ts
```
when the app uses routing.
Define routes using the Fusion Router DSL (
```
layout
```
,
```
index
```
,
```
route
```
,
```
prefix
```
) for automatic code splitting.
When the right framework API is unclear, use
```
fusion-research
```
to gather a source-backed answer before choosing an implementation pattern.

确定用户需要的模块，然后仅阅读匹配的参考文档：

需求	参考文档
HTTP客户端/API集成	`references/configure-services.md`
上下文模块	`references/using-context.md`
路由和页面	`references/using-router.md`
AG Grid	`references/using-ag-grid.md`
EDS + Fusion React组件	`references/using-fusion-react-components.md`
设置	`references/using-settings.md`
书签	`references/using-bookmarks.md`
分析	`references/using-analytics.md`
运行时配置/环境	`references/using-assets-and-environment.md`
功能开关	`references/using-feature-flags.md`
通用框架模块	`references/using-framework-modules.md`

在
```
config.ts
```
中使用
```
AppModuleInitiator
```
回调添加模块设置。
通过钩子在组件中访问模块：
```
useAppModule
```
、
```
useHttpClient
```
、
```
useCurrentContext
```
。
添加新API集成时，在
```
app.config.ts
```
中注册HTTP客户端端点。
当应用使用路由时，在
```
config.ts
```
中启用
```
enableNavigation
```
。
使用Fusion Router DSL（
```
layout
```
、
```
index
```
、
```
route
```
、
```
prefix
```
）定义路由以实现自动代码分割。
当正确的框架API不明确时，在选择实现模式前使用
```
fusion-research
```
获取有来源支持的答案。

Step 7 — Validate

步骤7 — 验证

Use

assets/review-checklist.md

as a comprehensive post-generation checklist.

Run the project's typecheck command (e.g.
```
bun run typecheck
```
or
```
pnpm typecheck
```
) — zero errors required.
Run the project's lint/format check — zero violations.
Verify every new exported symbol has TSDoc.
Confirm styling follows the project's conventions.
Confirm no new dependencies unless justified or explicitly approved.

使用

assets/review-checklist.md

作为全面的生成后检查清单。

运行项目的类型检查命令（如
```
bun run typecheck
```
或
```
pnpm typecheck
```
）——要求零错误。
运行项目的检查/格式化检查——要求零违规。
验证每个新导出的符号都有TSDoc。
确认样式遵循项目约定。
确认未添加新依赖，除非有正当理由或明确批准。

Expected output

预期输出

New or modified source files in
```
src/
```
following the project's layer structure.
All files pass typecheck and lint.
Every exported function, component, hook, and type has TSDoc.
Styling follows project conventions (typically styled-components + EDS + Fusion React components where applicable).
A brief summary of what was created or changed and why.

```
src/
```
目录中遵循项目层级结构的新文件或修改后的文件。
所有文件通过类型检查和代码检查。
每个导出的函数、组件、钩子和类型都有TSDoc。
样式遵循项目约定（通常为styled-components + EDS + 适用的Fusion React组件）。
关于创建或修改内容及其原因的简要说明。

Helper agents

辅助代理

This skill includes three optional helper agents in

agents/

. Use them for focused review after implementing changes, or consult them during implementation for specific guidance. If the runtime does not support skill-local agents, apply the same review criteria inline.

This skill also has a companion skill,

fusion-research

, for source-backed Fusion ecosystem research. Use it when implementation work is blocked by uncertainty about framework behavior, EDS component APIs, or skill catalog questions.

agents/framework.md
— reviews Fusion Framework integration: module configuration, HTTP clients, bootstrap lifecycle, runtime config, settings, bookmarks, analytics, and hook usage. Prefers
mcp_fusion_search_framework
for API lookups; falls back to
```
mcp_fusion_search_docs
```
for general platform guidance. Consult when wiring up
```
config.ts
```
,
```
app.config.ts
```
, or any component that accesses framework modules.
agents/styling.md
— reviews EDS component selection, styled-components patterns, design token usage, and accessibility. Prefers
mcp_fusion_search_eds
for component docs, props, and examples. Consult when building or modifying visual components.
agents/code-quality.md
— delegates convention checks (naming, TSDoc, TypeScript strictness, intent comments) to
```
fusion-code-conventions
```
, then aggregates findings in Fusion app context. Run on every new or modified file before finalizing.

此技能在

agents/

中包含三个可选辅助代理。在实现变更后使用它们进行重点审查，或在实现过程中咨询它们以获取特定指导。如果运行时不支持技能本地代理，请内联应用相同的审查标准。

此技能还有一个配套技能

fusion-research

，用于基于来源的Fusion生态系统研究。当实现工作因框架行为、EDS组件API或技能目录问题的不确定性而受阻时，请使用它。

agents/framework.md
— 审查Fusion Framework集成：模块配置、HTTP客户端、引导生命周期、运行时配置、设置、书签、分析和钩子使用。**优先使用
```
mcp_fusion_search_framework
```
**进行API查找； fallback到
```
mcp_fusion_search_docs
```
获取通用平台指导。在对接
```
config.ts
```
、
```
app.config.ts
```
或任何访问框架模块的组件时咨询。
agents/styling.md
— 审查EDS组件选择、styled-components模式、设计令牌使用和可访问性。**优先使用
```
mcp_fusion_search_eds
```
**获取组件文档、属性和示例。在构建或修改可视化组件时咨询。
agents/code-quality.md
— 将约定检查（命名、TSDoc、TypeScript严格性、意图注释）委托给
```
fusion-code-conventions
```
，然后在Fusion应用上下文中汇总结果。在最终确定前对每个新文件或修改后的文件运行。

Safety & constraints

安全与约束

No new dependencies without explicit user approval.
No direct DOM manipulation — use React patterns.
No
any
types — TypeScript strict mode is standard for Fusion apps.
No secrets or credentials in source files.
Conventional commits for all changes (
```
feat:
```
,
```
fix:
```
,
```
refactor:
```
, etc.).
Do not modify infrastructure files (docker-compose, CI config) unless explicitly asked.

未经用户明确批准，不得添加新依赖。
不得直接操作DOM — 使用React模式。
不得使用
any
类型 — TypeScript严格模式是Fusion应用的标准。
源文件中不得包含机密或凭据。
所有变更使用规范提交信息（
```
feat:
```
、
```
fix:
```
、
```
refactor:
```
等）。
除非明确要求，否则不得修改基础设施文件（docker-compose、CI配置）。