fusion-help-integration
Wires Fusion Help Center into app pages — creates article slug constants, adds useHelpCenter hook, and connects PageLayout props so users can open contextual help articles. USE FOR: add help button to page, wire useHelpCenter, create helpArticles constants, integrate Fusion Help in app, connect PageLayout to help center, add openHelpArticle to page. DO NOT USE FOR: authoring markdown help articles (use fusion-help-docs), direct Help REST API calls (use fusion-help-api), modifying @fra/ui shared components.
- Installs
- 909
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/equinor/fusion-skills --skill fusion-help-integration- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads fusion-help-integration automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Fusion Help Integration
Wire the Fusion Help Center into app pages so users can open contextual help articles via the PageLayout help button.
When to use
- Add help button to a page
- Wire
useHelpCenterinto a page component - Create/update help articles constants file
- Connect
PageLayoutto Fusion Help Center - Page uses
PageLayoutwithoutopenHelpArticle - Add help support to an app
- Open a specific help article from a page
When not to use
- Authoring markdown help articles →
fusion-help-docs - Direct REST API calls to Help service →
fusion-help-api - Modifying
@fra/uishared components (PageLayout,PageHeader,FusionHelpButton) - Non-Fusion-framework apps or apps outside this monorepo
Required inputs
Collect before making changes:
| Input | Required | Default | Description |
|---|---|---|---|
| App name | Yes | — | The app directory name under apps/ (e.g., fra-app-management) |
| Target pages | Yes | — | Which page(s) to wire up, or "all" for every page using PageLayout |
| Article slugs | Yes | Auto-derive | Slug strings for each page. If not provided, derive as {app-name}-{page-kebab} |
| Include release notes | No | true | Whether to also pass openReleaseNotes to PageLayout |
| Constants file location | No | src/constants/helpArticles.ts | Path for the FUSION_HELP_ARTICLES object |
If article slugs are auto-derived, confirm with user before applying — slugs must match articles published via fhelp.
Instructions
1. Check existing help integration
Search target app for existing help wiring:
apps/{app-name}/src/**/helpArticles.ts
apps/{app-name}/src/**/fusionHelpArticles.ts
Also search for useHelpCenter imports. If app already has partial integration, extend rather than duplicate.
2. Determine slug convention
Check if app already has a constants file with slugs:
- Has existing slugs → follow its naming pattern
- No existing slugs → use
{app-name}-{page-kebab}convention
Reference existing conventions:
| App | Convention | Example |
|---|---|---|
fra-access-manager | {app-name}-{page-kebab} | fra-access-manager-access-groups |
fra-app-management | Unprefixed page name | overview, requests |
personnel-allocation | {app-name}-{page-kebab} | personnel-allocation-overview |
Prefer prefixed convention for new apps — avoids slug collisions across apps.
3. Create or update the constants file
Create src/constants/helpArticles.ts (or the app's chosen location):
export const FUSION_HELP_ARTICLES = {
PAGE_NAME: '{app-name}-{page-kebab}',
};
Keys are SCREAMING_SNAKE_CASE matching the page concept. Values are kebab-case slug strings.
See references/wiring-pattern.md for the full canonical pattern with real examples.
4. Wire each target page
For each page component that uses PageLayout:
a. Add imports (externals first, then @fra/*, then @/* aliases, then relative):
import { useHelpCenter } from '@equinor/fusion-framework-react-app/help-center';
import { PageLayout } from '@fra/ui';
import { FUSION_HELP_ARTICLES } from '@/constants/helpArticles';
b. Destructure the hook inside the component body:
const { openArticle, openReleaseNotes } = useHelpCenter();
If release notes not needed, destructure only { openArticle }.
c. Pass props to PageLayout:
<PageLayout
title="Page Title"
openHelpArticle={() => openArticle(FUSION_HELP_ARTICLES.PAGE_NAME)}
openReleaseNotes={openReleaseNotes}
>
Important: openHelpArticle must be a callback wrapper () => openArticle(slug), not a direct reference — openArticle requires the slug argument.
5. Verify the integration
After wiring:
- Run TypeScript check:
pnpm --filter {app-name} exec tsc --noEmit - Check lint:
pnpm --filter {app-name} exec eslint src/ - Visual check: page header shows info-circle (ⓘ) icon. Clicking opens Fusion Help sidesheet.
6. Cross-reference with published content
Each slug in FUSION_HELP_ARTICLES must correspond to a published article. If articles don't exist:
- Point to
fusion-help-docsfor authoring - Slug in constants must exactly match
slugfield inhelp-articles.json - Articles are published per-environment via
fhelp
Expected output
- Constants file created/updated with article slug mappings
- Target page(s) wired with
useHelpCenter+PageLayoutprops - TypeScript compilation passes
- List of slugs needing corresponding help articles (for handoff to
fusion-help-docs)
Safety & constraints
- Never invent slug names without confirmation — slugs must match published articles
- Don't modify
@fra/uicomponents —PageLayout,PageHeader,FusionHelpButtonalready support help props - Don't add new dependencies —
@equinor/fusion-framework-react-appis already in every app - Follow app's import alias convention — most apps use
@/*→src/* - Respect existing code style — use
typefor type-only imports, maintain import group ordering - Don't duplicate help wiring — if page already has
useHelpCenter, extend rather than re-add - Confirm auto-derived slugs before applying — wrong slug silently fails (no article shown)
FAQ
What does the fusion-help-integration skill do?
Wires Fusion Help Center into app pages — creates article slug constants, adds useHelpCenter hook, and connects PageLayout props so users can open contextual help articles. USE FOR: add help button to page, wire useHelpCenter, create helpArticles constants, integrate Fusion Help in app, connect PageLayout to help center, add openHelpArticle to page. DO NOT USE FOR: authoring markdown help articles (use fusion-help-docs), direct Help REST API calls (use fusion-help-api), modifying @fra/ui shared components.
How do I install fusion-help-integration?
Run npx skills add https://github.com/equinor/fusion-skills --skill fusion-help-integration in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/fusion-help-integration/ (personal) or .claude/skills/fusion-help-integration/ (project).
Which AI agents can use fusion-help-integration?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is fusion-help-integration safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains fusion-help-integration?
It is published by equinor in equinor/fusion-skills. It has 909 recorded installs.
More from equinor/fusion-skills
fusion-issue-authoring
equinor/fusion-skills
Classify issue type, activate the matching agent mode for type-specific drafting, and enforce shared safety gates before GitHub mutation.
fusion-github-review-resolution
equinor/fusion-skills
Resolves unresolved GitHub PR review threads end-to-end: evaluates whether each review comment is correct, applies a targeted fix when valid, replies with rationale when not, commits, and resolves the thread. USE FOR: unresolved review threads, PR review feedback, changes requested PRs, PR review URLs (pullrequestreview-...), fix the review comments, close the open threads, address PR feedback. DO NOT USE FOR: summarizing feedback without code changes, creating new PRs, or read-only branches.
fusion-issue-solving
equinor/fusion-skills
Handles GitHub issue resolution end-to-end for prompts like "solve 123", "lets solve 123", "work on 123", "work on https://github.com/owner/repo/issues/123", or by pasting a direct GitHub issue URL as the request. USE FOR: solve 123, continue work on issue 123, work on https://github.com/owner/repo/issues/123, paste a GitHub issue URL for implementation work. DO NOT USE FOR: issue drafting only, PR review only, or non-implementation research.
fusion-code-conventions
equinor/fusion-skills
Applies and explains code conventions across TypeScript, React, C, and Markdown. Enforces naming rules, file naming patterns, TSDoc and XML doc standards, inline comment intent (the why, not the what), code structure, error handling, async patterns, and dead code policy. Also enforces ADR and contributor doc decisions, and flags decisions that appear stale or misaligned with current tooling. USE FOR: convention questions, code review against project standards, applying naming rules, auditing intent comments, checking TSDoc completeness, enforcing recorded ADR decisions, and flagging stale architectural decisions. DO NOT USE FOR: security vulnerability scanning, performance profiling, runtime debugging, or generating net-new code without a review target.
fusion-dependency-review
equinor/fusion-skills
Review dependency PRs with structured research, existing-PR-discussion capture, multi-lens analysis (security, code quality, impact), and a repeatable verdict template. USE FOR: dependency update PRs, Renovate/Dependabot PRs, library upgrade reviews, "review this dependency PR", "should we merge this update". DO NOT USE FOR: feature PRs, application code reviews, dependency automation/bot configuration, or unattended merge without confirmation.
fusion-mcp
equinor/fusion-skills
Explain what Fusion MCP is and guide users through setting it up when they need Fusion-aware MCP capabilities in Copilot workflows.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.