菜单
Develop and visually verify changes to the web module (bpmn-to-code-web). Use when working on the vanilla JS frontend, Ktor backend, or validating UI changes with Playwright MCP.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Write or refactor unit tests following the canonical project pattern. Use when adding new unit tests or standardizing existing ones.
Generate a Kotlin SingleModelValidationRule implementation for ONE rule from BPMN_STYLE_GUIDE.md. Use when drafting / iterating on a single rule, or when the user asks to 'generate a rule for <slug>', 'create the element-id-format rule', or 'add just this one rule to the test module'. For all rules at once, use generate-rules-to-enforce-bpmn-styleguide.
Generate Kotlin SingleModelValidationRule implementations for every deterministic (or hybrid) rule in BPMN_STYLE_GUIDE.md, so they can be enforced at test time by the bpmn-to-code-testing module. llm-only rules stay in the style guide for /validate-bpmn-style. Use when the user asks to 'generate validation rules from the style guide', 'enforce BPMN conventions in CI', or 'automate style checks in tests'. For a single rule, use generate-rule-to-enforce-bpmn-styleguide.
Interactively author a BPMN_STYLE_GUIDE.md for your project — a handbook that explains how the team models BPMN processes (naming, allowed elements, IDs, topics, engine-specific special cases). The output is a document humans can read; embedded YAML annotations let downstream skills enforce the rules. Use when the user asks to 'create a BPMN style guide', 'set up BPMN conventions', or 'define BPMN naming rules'.
Create a complete Spring Boot service project from a BPMN file with hexagonal architecture. Bootstraps via Spring Initializr, configures bpmn-to-code, and generates workers, use cases, and services wired to ProcessApi constants — no raw strings anywhere. Use when the user wants to start a new process service from a BPMN model.
Migrate generated API usage from bpmn-to-code v1.1.0 to v2.0.0. Use when the user asks to 'upgrade to v2', 'migrate from v1 to v2', 'fix TaskTypes references', or 'update bpmn-to-code API calls after upgrade'.
| name | web-dev |
| argument-hint | "<component or page to work on>" |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash(./gradlew *), mcp__playwright__* |
| description | Develop and visually verify changes to the web module (bpmn-to-code-web). Use when working on the vanilla JS frontend, Ktor backend, or validating UI changes with Playwright MCP. |
Develop and visually verify changes to the bpmn-to-code web module.
<script> tags only.app.js, all CSS in styles.css. Do not split into multiple files.Read ADR 009 (docs/contributing/adr/009-ktor-static-frontend-single-module.md) for architectural context.
Key facts:
./gradlew :bpmn-to-code-web:buildFatJar)bpmn-to-code-web/src/main/resources/static/Read the files relevant to $ARGUMENTS. The key files and their purposes:
| File | Purpose |
|---|---|
bpmn-to-code-web/src/main/resources/static/index.html | Page structure, sections, CDN script tags |
bpmn-to-code-web/src/main/resources/static/css/styles.css | All styling, CSS custom properties in :root, responsive breakpoints |
bpmn-to-code-web/src/main/resources/static/js/app.js | All logic: state management, API calls, DOM manipulation |
bpmn-to-code-web/src/main/kotlin/io/miragon/bpmn/web/Application.kt | Ktor routing, static resource serving, plugin installation |
bpmn-to-code-web/src/main/kotlin/io/miragon/bpmn/web/routes/GenerateRoutes.kt | API endpoint for BPMN code generation |
bpmn-to-code-web/src/main/kotlin/io/miragon/bpmn/web/service/WebGenerationService.kt | Backend generation logic |
API endpoints:
POST /api/generate — accepts base64-encoded BPMN files, returns generated codeGET /api/config — returns version and legal links for the frontendGET /health — health checkFollow these conventions:
:root (e.g. --primary-color, --text-primary, --bg-gray). Add new styles to styles.css.app.js — state object, DOM references, event listeners, helper functions. Use const/let, template literals, async/await..card wrapper, heading, content). Use semantic elements.640px, 768px). Test mobile layout.# Run backend tests
./gradlew :bpmn-to-code-web:test
# Start the web module (port 8080)
./gradlew :bpmn-to-code-web:run
The app will be available at http://localhost:8080/static/index.html.
Do not run visual verification automatically. Use AskUserQuestion to ask the user what should be verified. Only proceed with the steps below if the user or $ARGUMENTS explicitly request visual testing.
Prerequisite: Playwright MCP must be configured in the agent's MCP settings.
./gradlew :bpmn-to-code-web:run in the background)http://localhost:8080/static/index.html.tmp/ (gitignored). Never check screenshots into git.web-{page}-{state}.png.tmp/ when the skill terminatesTo attach screenshots to a PR, upload them as draft release assets:
gh release create screenshots-pr-<NUMBER> --draft --title "PR #<NUMBER> Screenshots" --notes "Temporary" .tmp/*.png
gh release view screenshots-pr-<NUMBER> --json assets --jq '.assets[] | .url'
gh pr comment <NUMBER> --body ""
The draft release can be deleted after the PR is merged.
Summarize: