fusion-design
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.
- Installs
- 588
- 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-design- 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-design 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 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">. Seereferences/eds-typography.md. - All spacing uses EDS spacing variables. Never hardcode
pxinpadding/margin/gap. Seereferences/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
| 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 |
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.
FAQ
What does the fusion-design skill do?
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.
How do I install fusion-design?
Run npx skills add https://github.com/equinor/fusion-skills --skill fusion-design 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-design/ (personal) or .claude/skills/fusion-design/ (project).
Which AI agents can use fusion-design?
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-design 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-design?
It is published by equinor in equinor/fusion-skills. It has 588 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 frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.