メニュー
Build showcase-grade FrankenTUI screens. Use when working in ftui-demo-showcase, diagnosing TUI issues with doctor_frankentui, polishing TUI UX, or replacing placeholder interfaces.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frankentui |
| description | Build showcase-grade FrankenTUI screens. Use when working in ftui-demo-showcase, diagnosing TUI issues with doctor_frankentui, polishing TUI UX, or replacing placeholder interfaces. |
Skill for architecture-accurate, showcase-level work in FrankenTUI, especially
ftui-demo-showcase.
AGENTS.md fully.README.md fully.cass status --json && cass index --jsoncass search "under construction placeholder" --workspace /data/projects/frankentui --json --fields minimal --limit 20cass search "mind-blowing dashboard" --workspace /data/projects/frankentui --json --fields minimal --limit 20cass search "improve TUI" --workspace /data/projects/frankentui --json --fields minimal --limit 20crates/ftui-core/src/terminal_session.rscrates/ftui-runtime/src/program.rscrates/ftui-runtime/src/terminal_writer.rscrates/ftui-render/src/{frame.rs,buffer.rs,diff.rs,presenter.rs}If the task is "make this screen good" or "upgrade weak TUI UI", treat these as default requirements.
Important: this contract is capability-gated.
Ctrl+T cycles theme globally and must remain reachable:
crates/ftui-demo-showcase/src/app.rs:3805crates/ftui-demo-showcase/src/app.rs:3043crates/ftui-demo-showcase/src/app.rs:4870crates/ftui-demo-showcase/src/chrome.rs:330crates/ftui-demo-showcase/src/chrome.rs:362crates/ftui-demo-showcase/src/chrome.rs:1298crates/ftui-demo-showcase/src/theme.rs:260crates/ftui-demo-showcase/src/chrome.rs:595crates/ftui-demo-showcase/src/chrome.rs:726crates/ftui-demo-showcase/src/chrome.rs:636crates/ftui-demo-showcase/src/chrome.rs:1109crates/ftui-demo-showcase/src/chrome.rs:1176crates/ftui-demo-showcase/src/app.rs:4058crates/ftui-demo-showcase/src/theme.rs:260Ctrl+T:
Cyberpunk AuroraDarculaLumen LightNordic FrostHigh Contrast supportcrates/ftui-extras/src/theme.rs:26crates/ftui-extras/src/theme.rs:49crates/ftui-demo-showcase/src/app.rs:2652crates/ftui-demo-showcase/src/theme.rs:723crates/ftui-demo-showcase/src/theme.rs:736crates/ftui-demo-showcase/src/theme.rs:779crates/ftui-demo-showcase/src/theme.rs:32crates/ftui-demo-showcase/src/theme.rs:1309crates/ftui-demo-showcase/src/theme.rs:1459/ or Ctrl+F, Esc).Enter/Tab/arrows and n/N style repeat).current/total) in search bar and/or status bar.Reference implementations:
crates/ftui-demo-showcase/src/screens/shakespeare.rscrates/ftui-demo-showcase/src/screens/code_explorer.rscrates/ftui-demo-showcase/src/screens/log_search.rscrates/ftui-demo-showcase/src/screens/virtualized_search.rscrates/ftui-demo-showcase/src/screens/markdown_live_editor.rscrates/ftui-demo-showcase/src/screens/markdown_rich_text.rs:578crates/ftui-demo-showcase/src/screens/markdown_rich_text.rs:676crates/ftui-demo-showcase/src/screens/markdown_rich_text.rs:686crates/ftui-demo-showcase/src/screens/markdown_rich_text.rs:905crates/ftui-demo-showcase/src/screens/markdown_rich_text.rs:952crates/ftui-demo-showcase/src/screens/markdown_rich_text.rs:1101crates/ftui-demo-showcase/src/screens/markdown_rich_text.rs:1053crates/ftui-demo-showcase/src/screens/dashboard.rs:3414crates/ftui-demo-showcase/src/screens/dashboard.rs:3452crates/ftui-demo-showcase/src/screens/dashboard.rs:5620crates/ftui-demo-showcase/src/screens/dashboard.rs:6006crates/ftui-demo-showcase/src/screens/dashboard.rs:6099crates/ftui-demo-showcase/src/screens/dashboard.rs:5597crates/ftui-demo-showcase/src/screens/dashboard.rs:3847crates/ftui-demo-showcase/src/screens/forms_input.rs:764crates/ftui-demo-showcase/src/screens/dashboard.rs:3852crates/ftui-demo-showcase/src/screens/data_viz.rs:113crates/ftui-demo-showcase/src/screens/forms_input.rs:760crates/ftui-demo-showcase/src/screens/forms_input.rs:34crates/ftui-demo-showcase/src/screens/forms_input.rs:1077crates/ftui-demo-showcase/src/screens/forms_input.rs:430crates/ftui-demo-showcase/src/screens/forms_input.rs:506crates/ftui-demo-showcase/src/screens/forms_input.rs:693crates/ftui-demo-showcase/src/screens/forms_input.rs:721crates/ftui-demo-showcase/src/screens/form_validation.rs:342crates/ftui-demo-showcase/src/screens/form_validation.rs:309crates/ftui-demo-showcase/src/screens/form_validation.rs:361crates/ftui-demo-showcase/src/screens/dashboard.rs:6174crates/ftui-demo-showcase/src/screens/dashboard.rs:5813crates/ftui-demo-showcase/src/screens/forms_input.rs:779crates/ftui-demo-showcase/src/screens/forms_input.rs:722crates/ftui-demo-showcase/src/screens/markdown_rich_text.rs:1128crates/ftui-demo-showcase/src/screens/forms_input.rs:1077crates/ftui-demo-showcase/src/screens/dashboard.rs:6586crates/ftui-demo-showcase/src/screens/form_validation.rs:739crates/ftui-demo-showcase/src/screens/kanban_board.rs:321crates/ftui-demo-showcase/src/screens/drag_drop.rs:358KeyboardDragManager with announcements for screen readers.
crates/ftui-demo-showcase/src/screens/drag_drop.rs:358crates/ftui-demo-showcase/src/screens/drag_drop.rs:446crates/ftui-demo-showcase/src/screens/kanban_board.rs:476crates/ftui-demo-showcase/src/screens/kanban_board.rs:464crates/ftui-demo-showcase/src/screens/kanban_board.rs:898crates/ftui-demo-showcase/src/screens/kanban_board.rs:668Reference implementations:
crates/ftui-demo-showcase/src/screens/kanban_board.rscrates/ftui-demo-showcase/src/screens/drag_drop.rsdisplay_width() for layout, grapheme_count() for editing positions. Never use .len() for display measurement.
crates/ftui-demo-showcase/src/screens/i18n_demo.rs:677crates/ftui-demo-showcase/src/screens/i18n_demo.rs:100Flex::flow_direction() for Arabic and Hebrew layouts.
crates/ftui-demo-showcase/src/screens/i18n_demo.rs:606StringCatalog with plural forms for multi-locale text (one/few/many/other).
crates/ftui-demo-showcase/src/screens/i18n_demo.rs:1064crates/ftui-demo-showcase/src/screens/mouse_playground.rs:1049crates/ftui-demo-showcase/src/screens/drag_drop.rs:358crates/ftui-demo-showcase/src/screens/mouse_playground.rs:173crates/ftui-demo-showcase/src/screens/determinism_lab.rs:579crates/ftui-demo-showcase/src/screens/advanced_text_editor.rs:52crates/ftui-demo-showcase/src/screens/mouse_playground.rs:476crates/ftui-demo-showcase/src/screens/determinism_lab.rs:296crates/ftui-demo-showcase/src/screens/explainability_cockpit.rs:693crates/ftui-demo-showcase/src/screens/voi_overlay.rs:140Reference implementations:
crates/ftui-demo-showcase/src/screens/explainability_cockpit.rscrates/ftui-demo-showcase/src/screens/voi_overlay.rscrates/ftui-demo-showcase/src/screens/determinism_lab.rscrates/ftui-demo-showcase/src/screens/mouse_playground.rsResponsiveLayout with Breakpoint tiers (XS/SM/MD/LG/XL) for structured responsive design.
crates/ftui-demo-showcase/src/screens/responsive_demo.rs:134Visibility::visible_above() to conditionally hide components below their breakpoint tier.
crates/ftui-demo-showcase/src/screens/responsive_demo.rs:289Responsive<T>::resolve(bp) for per-breakpoint value switching (padding, labels, sizing).
crates/ftui-demo-showcase/src/screens/responsive_demo.rs:309crates/ftui-demo-showcase/src/screens/intrinsic_sizing.rs:252LayoutDebugger + LayoutRecord + ConstraintOverlay to visualize constraint solver behavior during development.
crates/ftui-demo-showcase/src/screens/layout_inspector.rs:273Reference implementations:
crates/ftui-demo-showcase/src/screens/responsive_demo.rscrates/ftui-demo-showcase/src/screens/intrinsic_sizing.rscrates/ftui-demo-showcase/src/screens/layout_inspector.rsTextArea widget with line numbers, soft wrap, and cursor tracking.
crates/ftui-demo-showcase/src/screens/advanced_text_editor.rs:1542crates/ftui-demo-showcase/src/screens/markdown_live_editor.rs:183search_ascii_case_insensitive() returning byte-range results.
crates/ftui-demo-showcase/src/screens/advanced_text_editor.rs:868crates/ftui-demo-showcase/src/screens/advanced_text_editor.rs:997crates/ftui-demo-showcase/src/screens/markdown_live_editor.rs:296VecDeque<String> with bounded history (FIFO eviction at limit).
crates/ftui-demo-showcase/src/screens/advanced_text_editor.rs:647crates/ftui-demo-showcase/src/screens/markdown_live_editor.rs:280Reference implementations:
crates/ftui-demo-showcase/src/screens/advanced_text_editor.rscrates/ftui-demo-showcase/src/screens/markdown_live_editor.rsSerialize/Deserialize snapshot types for JSON round-trip import/export.
crates/ftui-demo-showcase/src/screens/widget_builder.rs:134crates/ftui-demo-showcase/src/screens/table_theme_gallery.rs:478crates/ftui-demo-showcase/src/screens/widget_builder.rs:226crates/ftui-demo-showcase/src/screens/table_theme_gallery.rs:216crates/ftui-demo-showcase/src/screens/widget_builder.rs:934crates/ftui-demo-showcase/src/screens/table_theme_gallery.rs:478Reference implementations:
crates/ftui-demo-showcase/src/screens/widget_builder.rscrates/ftui-demo-showcase/src/screens/table_theme_gallery.rsframe.register_link(url) and hit regions with frame.register_hit(rect, hit_id, HitRegion::Link, link_id).
crates/ftui-demo-showcase/src/screens/hyperlink_playground.rs:290crates/ftui-demo-showcase/src/screens/hyperlink_playground.rs:81crates/ftui-demo-showcase/src/screens/hyperlink_playground.rs:310Reference implementation:
crates/ftui-demo-showcase/src/screens/hyperlink_playground.rsThese patterns recur across many screens and should be applied consistently. See also ARCHITECTURE.md sections 9-17 for full details.
Store layout rectangles in Cell<Rect> during view(), read them in update() for mouse hit-testing.
This decouples rendering from event handling and avoids borrow checker issues.
// In view(): self.layout_panel.set(panel_rect);
// In update(): if self.layout_panel.get().contains(mouse.x, mouse.y) { ... }
Every interactive screen uses this pattern:
crates/ftui-demo-showcase/src/screens/dashboard.rs:5597crates/ftui-demo-showcase/src/screens/kanban_board.rs:870crates/ftui-demo-showcase/src/screens/drag_drop.rs:112Use an enum to model which panel has focus. Implement next()/prev() for cycling.
Mouse clicks set focus via hit-testing. Keyboard navigation uses Tab/Shift-Tab or directional keys.
enum FocusPanel { Editor, Search, Replace, View }
Examples:
crates/ftui-demo-showcase/src/screens/forms_input.rs:34crates/ftui-demo-showcase/src/screens/advanced_text_editor.rs:588crates/ftui-demo-showcase/src/screens/shakespeare.rs:343Use basis points (0-10000 bps) instead of pixels for resizable splitter positions. This survives terminal resizing without losing user intent.
crates/ftui-demo-showcase/src/screens/dashboard.rs:3442Use tick_count: u64 and time: f64 = tick_count as f64 * factor for smooth animation.
Apply to gradient phases, text effects, sparkline updates, and streaming progression.
crates/ftui-demo-showcase/src/screens/dashboard.rs:3557crates/ftui-demo-showcase/src/screens/shakespeare.rs:873Use RefCell<WidgetState> to allow view() (which takes &self) to mutate widget state
when required by the framework's stateful widget rendering pattern.
crates/ftui-demo-showcase/src/screens/forms_input.rs:1077crates/ftui-demo-showcase/src/screens/form_validation.rs:65Use VecDeque<T> with pop_front() at capacity for bounded logs, undo stacks, and timelines.
crates/ftui-demo-showcase/src/screens/inline_mode_story.rs:246crates/ftui-demo-showcase/src/screens/advanced_text_editor.rs:647Support environment-variable-driven deterministic mode that replaces timestamps with tick counts and uses fixed seeds for reproducible test scenarios.
crates/ftui-demo-showcase/src/screens/determinism_lab.rs:296crates/ftui-demo-showcase/src/screens/mouse_playground.rs:173Use HoverStabilizer to prevent hover state flickering from noisy mouse position reports.
crates/ftui-demo-showcase/src/screens/mouse_playground.rs:635doctor_frankentui is not just for pass/fail capture plumbing. Use it to see real UI states and catch showcase regressions.
doctor_frankentui suite.report.json for run health fields.snapshot.png and timeline_strip.png for every profile.doctor_frankentui if profile env files changed.Decision tree:
status=failed -> fix capture/runtime failure first.status=ok but visuals are wrong -> treat as real bug and fix.snapshot is shell but timeline shows UI -> fix snapshot_second.Use rch for compile/test work:
cd /data/projects/frankentui
rch exec -- cargo build -p doctor_frankentui -p ftui-demo-showcase
Run the full demo showcase sweep:
RUN_ROOT="/tmp/doctor_frankentui_demo_audit_$(date +%Y%m%d_%H%M%S)"
./target/debug/doctor_frankentui suite \
--app-command '/data/projects/frankentui/target/debug/ftui-demo-showcase' \
--project-dir /data/projects/frankentui \
--run-root "$RUN_ROOT" \
--suite-name demo_showcase_audit \
--keep-going
Do not stop at success=4 failure=0. Inspect per-run metadata:
REPORT="$RUN_ROOT/demo_showcase_audit/report.json"
jq -r '.runs[] | [
.profile,
.status,
("capture_error_reason=" + (.capture_error_reason // "null")),
("vhs_driver=" + (.vhs_driver_used // "unknown")),
("fallback_active=" + (.fallback_active|tostring)),
("snapshot_status=" + (.snapshot_status // "unknown")),
("snapshot_exists=" + (.snapshot_exists|tostring)),
("video_exists=" + (.video_exists|tostring)),
("video_duration_seconds=" + (.video_duration_seconds|tostring))
] | @tsv' "$REPORT"
Open each profile’s snapshot.png, and generate timeline strips from capture.mp4:
SUITE_DIR="$RUN_ROOT/demo_showcase_audit"
for p in analytics-empty analytics-seeded messages-seeded tour-seeded; do
d="$SUITE_DIR/demo_showcase_audit_${p}"
ffmpeg -y -i "$d/capture.mp4" \
-vf "fps=1,scale=640:-1,tile=8x1" \
-frames:v 1 "$d/timeline_strip.png" >/dev/null 2>/dev/null
done
Then inspect:
.../snapshot.png (single selected frame used by report).../timeline_strip.png (temporal overview).../capture.mp4 (ground truth playback when needed)snapshot_status=ok but shell prompt image:
snapshot_status=ok and snapshot_exists=true but timeline shows app quit early:
vhs.log, run_summary.txt, and *.runner.log.fallback_active=true or vhs_driver_used=docker:
Adjust profile capture timing under:
crates/doctor_frankentui/profiles/*.envMost common fix: tune snapshot_second so it lands on a meaningful in-app frame before quit.
Important: profile env files are embedded by include_str!, so rebuild doctor_frankentui after profile edits:
rch exec -- cargo build -p doctor_frankentui
Re-run targeted profile quickly:
RUN_ROOT="/tmp/doctor_frankentui_verify_$(date +%Y%m%d_%H%M%S)"
./target/debug/doctor_frankentui suite \
--profiles analytics-empty \
--app-command '/data/projects/frankentui/target/debug/ftui-demo-showcase' \
--project-dir /data/projects/frankentui \
--run-root "$RUN_ROOT" \
--suite-name analytics_empty_verify \
--keep-going
Then run full suite again to ensure global coverage.
rch exec -- cargo test -p doctor_frankentui
rch exec -- cargo clippy -p doctor_frankentui -- -D warnings
success=4 failure=0 as sufficient proof of visual quality.snapshot.png without checking timeline context.include_str!).| Task | Go To |
|---|---|
| Core crate architecture / contracts | ARCHITECTURE.md |
| Full demo-showcase internals + global interaction contract | DEMO_SHOWCASE_DEEP_DIVE.md |
| Upgrade low-quality screens to showcase quality (naive -> premium patterns) | TUI_POLISH_PLAYBOOK.md |
| Visual diagnostics + doctor_frankentui playbook | DOCTOR_FRANKENTUI_VISUAL_DIAGNOSTICS.md |
| Mine historical prompt patterns | CASS_PATTERNS.md |
references/ARCHITECTURE.md.references/DEMO_SHOWCASE_DEEP_DIVE.md.references/DEMO_SHOWCASE_DEEP_DIVE.md, section 22).Naive -> Showcase deltas from references/TUI_POLISH_PLAYBOOK.md.references/CASS_PATTERNS.md.doctor_frankentui visual audit and review snapshots + timeline strips before declaring UX done.Use remote compilation helper for heavy commands:
rch exec -- cargo check --workspace --all-targets
rch exec -- cargo clippy --workspace --all-targets -- -D warnings
cargo fmt --check
For showcase-sensitive changes:
rch exec -- cargo test -p ftui-demo-showcase
For search/chrome changes, also run:
rch exec -- cargo test -p ftui-demo-showcase shakespeare
rch exec -- cargo test -p ftui-demo-showcase code_explorer
rch exec -- cargo test -p ftui-demo-showcase log_search
rch exec -- cargo test -p ftui-demo-showcase virtualized_search
For markdown/panes/forms changes, also run:
rch exec -- cargo test -p ftui-demo-showcase markdown_rich_text
rch exec -- cargo test -p ftui-demo-showcase dashboard
rch exec -- cargo test -p ftui-demo-showcase forms_input
rch exec -- cargo test -p ftui-demo-showcase form_validation
cass status --json && cass index --json
cass search "mind-blowing dashboard" --workspace /data/projects/frankentui --json --fields minimal --limit 50
cass search "under construction placeholder" --workspace /data/projects/frankentui --json --fields minimal --limit 50
cass search "improve TUI" --workspace /data/projects/frankentui --json --fields minimal --limit 50
cass search "search mode" --workspace /data/projects/frankentui --json --fields minimal --limit 50
Then inspect the top hits with:
cass view /path/to/session.jsonl -n <line> -C 20
Prompt-only filter:
cass search "under construction" --workspace /data/projects/frankentui --json --fields minimal --limit 100 \
| jq '[.hits[] | select(.line_number <= 3)]'
Do not ship "placeholder UI" surfaces in showcase screens. Any screen intended as a flagship must provide:
Ctrl+T),fn keybindings() + visible in help/status),display_width(), not .len()) for i18n correctness,Use the Naive -> Showcase checklist in references/TUI_POLISH_PLAYBOOK.md.
Consult Fable (primary oracle) for expert second opinions; escalate to GPT-5.5-Pro only for extremely important or complex tasks (always paired with Fable). Use for complex decisions, architecture choices, debugging hard problems, or when user says "consult oracles", "ask the experts", or wants a second opinion.
Run iterative oracle + agent hardening loop on any artifact (designs, plans, beads, architecture) until findings converge to near-zero. Combines /swarm-oracle with /swarm-review in alternating rounds. Use for the full hardening cycle, not just a single oracle pass. For oracle-only, use /swarm-oracle. For bead-only hardening, use /swarm-beads-quality.
Run 2x oracle sessions (FOR + AGAINST stances) to validate design decisions, plans, or bead readiness. Default = two Fable subagents; escalate to PAL 2x GPT-Pro (always paired with Fable) for extremely important or complex validations. Use after design rounds, before implementation, or to challenge architecture decisions.
Act as a wise, effective teacher whose goal is to make the human deeply understand the work done in this session (a change, a bug fix, a feature, a design) — i.e. sync the human's mental model up to the agent's. Use when the user says "sync-human", "sync me up", "teach me this session", "make sure I understand", "walk me through what we did", "quiz me on this", or "I want to actually understand this PR/change", or otherwise wants Socratic, gated, incremental teaching with comprehension checks rather than a one-shot summary. Drives understanding at both high level (motivation, impact) and low level (business logic, edge cases) using a running checklist and quizzes.
MCP Agent Mail for multi-agent coordination. Use when agents need file locks, messaging, inboxes, or conflict prevention. Handles macro_start_session, file_reservation_paths, send_message, threading, pre-commit guards.
Retrieve API tokens, keys, and credentials Oystein has stored locally. Use whenever code, scripts, or shell commands need a secret value: GitHub tokens, Cloudflare, HubSpot, Slack, Zendesk, Jira, Sentry, Anthropic, Apify, Browserbase, Google OAuth, Huma. Use BEFORE searching shell history, session logs, dotfiles, or the filesystem — the canonical store is documented here and the values are reachable via two fish helpers. Also use when adding, rotating, or removing a credential.