How do I install the Yfiles Init skill?

Run npx skillmds add yworks/yfiles-init in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Yfiles Init safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Yfiles Init?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Yfiles Init free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Yfiles Init?

yWorks (@yworks) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Yfiles Init by yworks — Agent Skill

Name: Yfiles Init
Rating: 4.666666666666667 (3 reviews)
Author: yWorks

Yfiles Init

This skill should be used when the user asks to "initialize a yFiles application", "create a new yFiles demo", "scaffold a yFiles project", "set up GraphComponent", or mentions "create app", "new demo", "initialize yFiles", "setup yFiles", or "License.value".

yWorks dcd7bf9 3 files · 14.6 KB Updated Sep 10, 2026

File contents

Initialize a yFiles Application

Create a complete yFiles application following package conventions.

Quick Start

/yfiles-init [demo-name]

Creates in the current directory if no name is specified.

Setup Checklist

- [ ] Verify GraphComponent API with yFiles MCP
- [ ] Create HTML entry point
- [ ] Create main TypeScript/JavaScript file
- [ ] Adjust import paths for license
- [ ] Configure ESLint with yFiles plugin (recommended)
- [ ] Test in browser

Implementation

Step 1: Verify APIs

Use the yFiles MCP server to confirm the current API:

yfiles:yfiles_get_symbol_details(name="GraphComponent")
yfiles:yfiles_list_members(name="GraphComponent", includeInherited=true)

Step 2: Create files

Essential pattern:

import { GraphComponent, GraphEditorInputMode, License } from '@yfiles/yfiles'
import licenseData from '../../lib/license.json'

License.value = licenseData  // MUST come first

const graphComponent = new GraphComponent('#graphComponent')
graphComponent.inputMode = new GraphEditorInputMode()

See references/examples.md for complete file templates.

Step 3: Adjust import paths

License path depends on demo location:

demos-ts/category/demo/ → ../../../lib/license.json
Adjust ../ depth to match directory nesting

Step 4: Configure ESLint (Recommended)

The official @yfiles/eslint-plugin helps catch common mistakes and ensures yFiles 3.0 best practices:

npm i -D eslint typescript typescript-eslint @yfiles/eslint-plugin

See reference.md for complete ESLint configuration.

Step 5: Test

npm start
# Navigate to http://localhost:4242/demos-ts/your-demo/

Key Rules

License first: Call License.value = licenseData before any other yFiles API
CSS selectors: Use new GraphComponent('#id') or pass a DOM element
Graph access: graphComponent.graph
Set defaults before creating nodes: Configure graph.nodeDefaults.style before createNode()

Additional Resources

references/examples.md — Complete HTML and TypeScript file templates
references/reference.md — API patterns, GraphComponent options, input mode configuration

---name: yfiles-initdescription: This skill should be used when the user asks to "initialize a yFiles application", "create a new yFiles demo", "scaffold a yFiles project", "set up GraphComponent", or mentions "create app", "new demo", "initialize yFiles", "setup yFiles", or "License.value".---# Initialize a yFiles ApplicationCreate a complete yFiles application following package conventions.## Quick Start```/yfiles-init [demo-name]```Creates in the current directory if no name is specified.## Setup Checklist```- [ ] Verify GraphComponent API with yFiles MCP- [ ] Create HTML entry point- [ ] Create main TypeScript/JavaScript file- [ ] Adjust import paths for license- [ ] Configure ESLint with yFiles plugin (recommended)- [ ] Test in browser```## Implementation**Step 1: Verify APIs**Use the yFiles MCP server to confirm the current API:```yfiles:yfiles_get_symbol_details(name="GraphComponent")yfiles:yfiles_list_members(name="GraphComponent", includeInherited=true)```**Step 2: Create files**Essential pattern:```typescriptimport { GraphComponent, GraphEditorInputMode, License } from '@yfiles/yfiles'import licenseData from '../../lib/license.json'License.value = licenseData // MUST come firstconst graphComponent = new GraphComponent('#graphComponent')graphComponent.inputMode = new GraphEditorInputMode()```See `references/examples.md` for complete file templates.**Step 3: Adjust import paths**License path depends on demo location:- `demos-ts/category/demo/` → `../../../lib/license.json`- Adjust `../` depth to match directory nesting**Step 4: Configure ESLint (Recommended)**The official `@yfiles/eslint-plugin` helps catch common mistakes and ensures yFiles 3.0 best practices:```bashnpm i -D eslint typescript typescript-eslint @yfiles/eslint-plugin```See [reference.md](reference.md) for complete ESLint configuration.**Step 5: Test**```bashnpm start# Navigate to http://localhost:4242/demos-ts/your-demo/```## Key Rules- **License first**: Call `License.value = licenseData` before any other yFiles API- **CSS selectors**: Use `new GraphComponent('#id')` or pass a DOM element- **Graph access**: `graphComponent.graph`- **Set defaults before creating nodes**: Configure `graph.nodeDefaults.style` before `createNode()`## Additional Resources- **`references/examples.md`** — Complete HTML and TypeScript file templates- **`references/reference.md`** — API patterns, GraphComponent options, input mode configuration

Frequently asked questions