Guides feature development in Fusion Framework React apps, including app-scoped framework research needed to choose the right hooks, modules, packages, and integration patterns before implementation. USE FOR: building new features, adding components or pages, creating hooks and services, wiring up API endpoints, extending Fusion module configuration, and answering app implementation questions about which Fusion Framework surface to use. DO NOT USE FOR: issue authoring, skill authoring, CI/CD configuration, backend service changes, or general Fusion documentation that is not tied to app implementation.
Use this skill when developing features, components, hooks, services, or types for a Fusion Framework React application.
Typical triggers:
Implicit triggers:
src/@equinor/fusion-react-*), or styled-components patternsapp.config.ts@equinor/fusion-framework-react-ag-charts, chart.js, react-chartjs-2, or charting/visualization in a Fusion appDo not use this skill for:
fusion-issue-authoring)fusion-skill-authoring)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.
If the user's request is ambiguous or missing critical details, consult assets/follow-up-questions.md for domain-specific clarifying questions before implementing.
Before writing any code, inspect the target repository to learn its specific setup:
package.json to identify the package manager (bun/pnpm/npm), available scripts, and installed dependencies.tsconfig.json to confirm TypeScript settings and path aliases.src/ to understand the current directory layout and layer structure.docs/adr/) or a contribute/ directory for project-specific code standards.app.config.ts and app.manifest.ts to understand existing endpoint and environment setup.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.
If scaffolding a new app from scratch, use assets/new-app-checklist.md as a progress tracker.
src/components/ — React components (presentation layer)src/hooks/ — Custom React hooks (state and side-effect logic)src/api/ — API clients, data transforms, business logicsrc/types/ — TypeScript interfaces, type aliases, enumssrc/routes.ts — Route definitions (when using Fusion Router)src/config.ts — Fusion module configurationsrc/App.tsx — Root component, layout shellreferences/using-router.md for the DSL and page patterns.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.
Follow references/styled-components.md, references/styling-with-eds.md, and references/using-fusion-react-components.md:
styled-components for custom styling — this is the Fusion ecosystem convention.Styled object pattern for co-located styled components.@equinor/eds-core-react as the base for standard UI elements.@equinor/eds-tokens) for colors, spacing, and typography.styled() when customization is needed.@equinor/fusion-react-*) for domain-specific needs not covered by EDS — person display/selection, Fusion side sheets, and progress indicators.style props are acceptable for one-off tweaks only.Follow references/configure-services.md, references/using-react-query.md, and references/configure-mocking.md for data-fetching and local dev mocking patterns:
configureHttpClient in config.ts or via app.config.ts endpoints.useHttpClient(name) from @equinor/fusion-framework-react-app/http.@equinor/fusion-framework-react-app/* hooks (useHttpClient, useCurrentContext, etc.) over direct module access. Reserve framework.modules.* for non-React contexts like route loaders.@tanstack/react-query), create thin custom hook wrappers around useQuery.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 |
| AG Charts (standalone) | references/using-ag-charts.md |
| AG Grid integrated charts | references/using-ag-grid-charts.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 |
config.ts using the AppModuleInitiator callback.useAppModule, useHttpClient, useCurrentContext.app.config.ts when adding new API integrations.enableNavigation in config.ts when the app uses routing.layout, index, route, prefix) for automatic code splitting.fusion-research to gather a source-backed answer before choosing an implementation pattern.Use assets/review-checklist.md as a comprehensive post-generation checklist.
bun run typecheck or pnpm typecheck) — zero errors required.src/ following the project's layer structure.This skill includes four 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/data-display.md — reviews data display implementation: choosing between AG Grid (tabular) and AG Charts (visual), module setup, column definitions, chart options, integrated charting, and combined grid+chart pages. Prefers mcp_fusion_search_framework for AG Grid and AG Charts package lookups and cookbook examples. Consult when building grids, charts, dashboards, or any data presentation view. Use assets/charts-decision-matrix.md for chart library selection guidance.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.any types — TypeScript strict mode is standard for Fusion apps.feat:, fix:, refactor:, etc.).