菜单
Looks up Fusion Design Guidelines and applies them to any frontend code in the Fusion ecosystem. USE FOR: layout, spacing, component usage, interaction patterns, any UI implementation decision. DO NOT USE FOR: backend changes, CI/CD, skill authoring, data layer logic.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/equinor/fusion-web-components --skill fusion-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
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.
Provision and migrate Fusion databases using the fusion-infra-cli (finf). USE FOR: provision a database for a service, run SQL migrations, provision PR-specific ephemeral databases, check database state. DO NOT USE FOR: application code changes, service deployments, role management, or infrastructure other than databases.
Use Fusion DevTools CLI (fdev) for API testing, token acquisition, service discovery, and person lookup during development. USE FOR: calling Fusion REST APIs, getting access tokens as JSON, discovering services and environments, resolving persons, PIM role activation. DO NOT USE FOR: modifying backend service code, deploying services, infrastructure changes, CI/CD pipeline configuration, or Service Bus operations.
| name | fusion-design |
| description | Looks up Fusion Design Guidelines and applies them to any frontend code in the Fusion ecosystem. USE FOR: layout, spacing, component usage, interaction patterns, any UI implementation decision. DO NOT USE FOR: backend changes, CI/CD, skill authoring, data layer logic. |
| license | MIT |
| metadata | {"version":"0.1.2","status":"experimental","owner":"@equinor/fusion-core","tags":["design","fusion-framework","layout"]} |
Any time you are writing or reviewing frontend code in the Fusion ecosystem and need to know how it should look, behave, or be structured.
These apply to every file you write, regardless of the task — do not wait until you have read the references to honour them, and never emit a "placeholder" that violates them:
<Typography>. Never write a bare <h1>–<h6>, <p>, or <span> for text — not even a temporary title or stub. A page title is <Typography variant="h1">, body text is <Typography variant="body_short">. See references/eds-typography.md.px in padding/margin/gap. See references/spacing.md.This skill is a lookup. Read all reference files before writing any code — they define mandatory requirements, not optional styling.
| Topic | File |
|---|---|
| EDS Typography | references/eds-typography.md |
| Navigation — Sidemenu | references/navigation-sidemenu.md |
| Navigation — Tabs | references/navigation-tabs.md |
| Layout — Content area patterns | references/layout.md |
| Layout — Centered content | references/layout-centered-content.md |
| Spacing | references/spacing.md |
| Actions — Action bar, destructive actions, button placement | references/actions.md |
| Empty states | references/empty-states.md |
| Error messages | references/error-messages.md |
| Contextual help (ℹ / ? icons, density) | references/contextual-help.md |
DESIGN.mdIf the app has a DESIGN.md at its root, read it first. It is the authoritative source for that app's design decisions and overrides or supplements the reference rules.
Implement the UI to match the rules. If no DESIGN.md exists and the task requires a layout decision, document it there.