메뉴
Run, start, build, screenshot, or test the packages/desktop Vite+React app (Visual Story Planner web layer). Drives all 4 views (Editor, Graph, Timeline, Insights) headlessly with Playwright.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | run-desktop |
| description | Run, start, build, screenshot, or test the packages/desktop Vite+React app (Visual Story Planner web layer). Drives all 4 views (Editor, Graph, Timeline, Insights) headlessly with Playwright. |
The packages/desktop package is a Vite 8 + React 19 + Tailwind CSS 4 web app that serves as the UI layer for a Tauri 2 desktop app. The agent path drives it with Playwright Core against the Vite dev server — no Tauri binary needed to test the web layer.
The smoke driver is .claude/skills/run-desktop/smoke.mjs. It launches a headless Chromium, navigates all 4 views, takes screenshots, and exits 0 on success.
# xvfb-run (for headless display)
apt-get install -y xvfb
# playwright-core must be installed at monorepo root
pnpm add -w playwright-core
System Chromium path (already present in this container):
/opt/pw-browsers/chromium-1194/chrome-linux/chrome
If that path is missing, check: find /opt -name chrome -type f 2>/dev/null | head -3
# Install all workspace dependencies from repo root
pnpm install
# Optional: type-check
pnpm --filter @bl1nk/desktop run typecheck
Start the Vite dev server in the background, then run the smoke driver from the repo root (required for Node to resolve playwright-core):
# 1. Start dev server (background)
cd /path/to/bl1nk-studio-mcp/packages/desktop
pnpm dev --port 5173 &
sleep 3
# 2. Run the smoke driver (from repo root)
cd /path/to/bl1nk-studio-mcp
xvfb-run --server-args="-screen 0 1280x800x24" \
node packages/desktop/.claude/skills/run-desktop/smoke.mjs \
--out=packages/desktop/.claude/skills/run-desktop
Screenshots land at:
.claude/skills/run-desktop/editor.png.claude/skills/run-desktop/graph.png.claude/skills/run-desktop/timeline.png.claude/skills/run-desktop/insights.pngExpected output on success:
Title: Visual Story Planner
✓ editor → ...
✓ graph → ...
✓ timeline → ...
Insights heading: Insights
✓ insights → ...
✅ All 4 views verified
cd packages/desktop
pnpm dev
Opens http://localhost:5173 in browser. Not useful headless.
To build the Tauri desktop binary (requires Rust + Tauri CLI):
cd packages/desktop
pnpm tauri build
# Type-check only (no unit tests exist yet)
pnpm --filter @bl1nk/desktop run typecheck
playwright-core must resolve from the repo root, not from packages/desktop/. Run node from the repo root or add playwright-core to packages/desktop/package.json devDependencies. chromium-cli is NOT available in this container.
playwright install may fail — apt repo issues in the container. Don't run it. Use the pre-installed browser at /opt/pw-browsers/chromium-1194/chrome-linux/chrome (hardcoded in smoke.mjs).
packages/desktop/src/index.css was missing after the packages/ui → packages/desktop rename. src/main.tsx imports "./index.css" and Vite fails on startup without it. The file was recreated with @import "tailwindcss" and base body styles — if the app fails to start with a module-not-found on index.css, that file was lost again.
Tailwind CSS 4 is not processed by the Vite dev server in headless smoke runs — screenshots show unstyled content (buttons run together as EditorGraphTimelineInsights). This is expected; the DOM structure and navigation are correct. Styling requires the PostCSS/Lightning CSS plugin configured for production builds.
xvfb-run is required — running Chrome headless in this container without a virtual display fails with --no-sandbox --disable-gpu. The flags in smoke.mjs plus xvfb-run together work reliably.
| Error | Fix |
|---|---|
Cannot find package 'playwright-core' | Run node from repo root, not from packages/desktop/ |
net::ERR_CONNECTION_REFUSED | Dev server not started yet; sleep 3 after pnpm dev & |
Timeout waiting for h1 | App not rendering — check browser console via page.on('console', ...) |
Cannot find module './index.css' (Vite) | Recreate packages/desktop/src/index.css with @import "tailwindcss" |
| Chrome crash / SIGSEGV | Missing xvfb-run; add it before node smoke.mjs |
Design and specify banners for CKM projects across all platforms and formats. Activate when the user asks to create, design, or plan banners, social media covers, display ads, web heroes, or print materials. References references/banner-sizes-and-styles.md for the full size catalog and 22 art direction styles.
Identify, map, and optimize all conflicts within a Visual Story Planner StoryGraph. Always activate this skill when the user mentions: "conflict", "tension", "escalation", "antagonist dynamics", "analyze conflicts", "my story lacks tension", "how do conflicts connect", "conflict optimization", "subplot conflicts", or "is my conflict believable". Also use when the user asks why the story feels flat or stakes feel low — conflict analysis is almost always the answer. Produces a conflict map with type classification, escalation health score, interconnection diagram (as text), and specific improvement suggestions ranked by impact.
Expert story structure analysis using bl1nk-visual-mcp. Analyze story text, extract 3-act structure, characters, conflicts, relationships, and validate narrative structure. Activates for analyze story, story structure, story graph, validate story, character extraction, conflict analysis, narrative structure, story validation, three act structure.
Expert story visualization and export using bl1nk-visual-mcp. Export StoryGraph to Mermaid diagrams, Canvas JSON, Markdown, HTML dashboards, and MCP UI dashboards. Activates for export story, export mermaid, export canvas, story dashboard, story visualization, convert to mermaid, story markdown, story html.
Deep structural analysis of story graphs for Visual Story Planner projects. Use this skill whenever the user says "audit", "check structure", "analyze story structure", "is my story balanced", "review my plot", "structural report", or asks for feedback on three-act balance, pacing health, character arc completeness, or conflict escalation. Also activate when the user runs `validate_story_structure` and wants an explanation of results, or when story export output is present and they want a critique. IMPORTANT: Any export action (export_mermaid, export_canvas, export_dashboard, etc.) must be preceded by `validate_story_structure`. If validation reports any issues, surface them with severity levels (error / warning) and require explicit user acknowledgment before continuing to export. Block exports when blocking (error-level) issues exist unless the user explicitly confirms they accept the risk. This skill provides a four-phase audit (Structure → Characters → Conflicts → Pacing) with a scored health report and p
Extract and analyze themes, motifs, and symbolic patterns from story graphs. Always activate when the user mentions: "themes", "motifs", "symbolism", "symbolic meaning", "deeper meaning", "underlying message", "theme analysis", "recurring elements", "patterns in story", "symbolic objects", or asks about "what does this story mean", "what is the message", or "what themes are present". Also activate when user exports or validates story and wants to understand the thematic depth. This skill identifies explicit and implicit themes, tracks motif recurrence, and provides thematic arc analysis — not just a list of tags.