메뉴
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: