How do I install the Yfiles Init skill?

Run npx skillmds@latest add majiayu000/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. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. 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?

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

Yfiles Init by majiayu000 — Agent Skill

Name: Yfiles Init
Rating: 4.5 (4 reviews)
Author: majiayu000

Yfiles Init

Initializes new yFiles for HTML applications with GraphComponent, license registration, and basic setup. Use when creating demos, starting projects, scaffolding applications, or when user mentions "create app", "new demo", "initialize", or "setup yfiles".

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

Initialize yFiles Application

Creates a complete yFiles application following package conventions.

Quick Start

/yfiles-init [demo-name]

Creates in current directory if no name specified.

Setup Checklist

Copy this checklist and track progress:

Setup Progress:
- [ ] 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 yFiles MCP server to confirm current API:

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

Step 2: Create files

See examples.md for complete file templates.

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()

Step 3: Adjust import paths

License path depends on demo location:

demos-ts/category/demo/: Use ../../../lib/license.json
Adjust depth as needed

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: License.value = licenseData before any yFiles API
Use CSS selectors: new GraphComponent('#id') or new GraphComponent(element)
Access graph via: graphComponent.graph
Set defaults before creating: Configure graph.nodeDefaults.style before createNode()

Reference Files

examples.md: Complete code templates
reference.md: API patterns and options

MCP Tools for Reference

yfiles:yfiles_get_symbol_details - Get API details
yfiles:yfiles_search_symbols - Find classes/interfaces
yfiles:yfiles_search_documentation - Find tutorials

---name: yfiles-initdescription: Initializes new yFiles for HTML applications with GraphComponent, license registration, and basic setup. Use when creating demos, starting projects, scaffolding applications, or when user mentions "create app", "new demo", "initialize", or "setup yfiles".--- # Initialize yFiles Application Creates a complete yFiles application following package conventions. ## Quick Start ``` /yfiles-init [demo-name] ``` Creates in current directory if no name specified. ## Setup Checklist Copy this checklist and track progress: ``` Setup Progress: - [ ] 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 yFiles MCP server to confirm current API: ``` yfiles:yfiles_get_symbol_details(name="GraphComponent") yfiles:yfiles_list_members(name="GraphComponent", includeInherited=true) ``` **Step 2: Create files** See [examples.md](examples.md) for complete file templates. **Essential pattern:** ```typescript 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() ``` **Step 3: Adjust import paths** License path depends on demo location: - `demos-ts/category/demo/`: Use `../../../lib/license.json` - Adjust depth as needed **Step 4: Configure ESLint (Recommended)** The official `@yfiles/eslint-plugin` helps catch common mistakes and ensures yFiles 3.0 best practices: ```bash npm i -D eslint typescript typescript-eslint @yfiles/eslint-plugin ``` See [reference.md](reference.md) for complete ESLint configuration. **Step 5: Test** ```bash npm start # Navigate to http://localhost:4242/demos-ts/your-demo/ ``` ## Key Rules - **License first**: `License.value = licenseData` before any yFiles API - **Use CSS selectors**: `new GraphComponent('#id')` or `new GraphComponent(element)` - **Access graph via**: `graphComponent.graph` - **Set defaults before creating**: Configure `graph.nodeDefaults.style` before `createNode()` ## Reference Files - **[examples.md](examples.md)**: Complete code templates - **[reference.md](reference.md)**: API patterns and options ## MCP Tools for Reference - `yfiles:yfiles_get_symbol_details` - Get API details - `yfiles:yfiles_search_symbols` - Find classes/interfaces - `yfiles:yfiles_search_documentation` - Find tutorials

Frequently asked questions