Fusion Design

by equinore8fd6cfaf8edMIT2 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

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.

Instructions onlyDesign & Creative
AI-generated overview

Looks up Fusion Design Guidelines and applies them to frontend UI code in the Fusion ecosystem.

What it does
This skill is a lookup reference for the Fusion Design Guidelines. It directs the agent to read bundled reference files covering EDS typography, spacing, navigation, layout, actions, empty states, error messages and contextual help, then apply those rules to frontend code. It also checks for a local DESIGN.md as the authoritative per-app source and documents layout decisions there when none exists. It produces UI implementation decisions and code that conform to the guidelines.
When to use it
Use it when writing or reviewing frontend code in the Fusion ecosystem and you need to know how a UI should look, behave or be structured. It is intended for layout, spacing, component usage and interaction pattern decisions. It is not meant for backend changes, CI/CD, skill authoring or data layer logic.
Requirements
No scripts; instructions and reference documents only. The agent must be able to read the bundled reference files and any local DESIGN.md in the target app.

Fusion Design

When to use

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.

Non-negotiable invariants

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:

  • All text uses EDS <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.
  • All spacing uses EDS spacing variables. Never hardcode px in padding/margin/gap. See references/spacing.md.

Instructions

This skill is a lookup. Read all reference files before writing any code — they define mandatory requirements, not optional styling.

1. Read the references

TopicFile
EDS Typographyreferences/eds-typography.md
Navigation — Sidemenureferences/navigation-sidemenu.md
Navigation — Tabsreferences/navigation-tabs.md
Layout — Content area patternsreferences/layout.md
Layout — Centered contentreferences/layout-centered-content.md
Spacingreferences/spacing.md
Actions — Action bar, destructive actions, button placementreferences/actions.md
Empty statesreferences/empty-states.md
Error messagesreferences/error-messages.md
Contextual help (ℹ / ? icons, density)references/contextual-help.md

2. Check for a local DESIGN.md

If 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.

3. Apply

Implement the UI to match the rules. If no DESIGN.md exists and the task requires a layout decision, document it there.

Source and attribution

Source:equinor/fusion-skillsinskills/.experimental/fusion-designat commite8fd6cf

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Fusion Design Agent Skill | SourceWeft