メニュー
Create distinctive, production-grade terminal user interfaces. Use when building TUI components with ratatui, CLI output styling, or xterm.js terminal rendering. Triggers: 'design TUI', 'terminal UI', 'TUIデザイン', 'ターミナルUI', 'ratatui widget'
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Create or update GitHub Pull Requests with the gh CLI, including deciding whether to create a new PR or only push based on existing PR merge status. Use when the user asks to open/create/edit a PR, generate a PR body/template, or says 'PRを出して/PR作成/gh pr'. Defaults: base=develop, head=current branch (same-branch only; never create/switch branches).
Bootstrap the unity-cli toolchain for Unity Editor automation. Use when verifying the unity-cli binary, discovering available tools, invoking a tool by name, switching active Unity instances, or troubleshooting host/port and install-mode issues. Do not use once a more specific Unity workflow skill applies; defer to `unity-scene-create`, `unity-csharp-edit`, `unity-editor-tools`, or another domain skill instead.
Manage Unity assets and import metadata with unity-cli. Use when the user asks to refresh the asset database, inspect asset info, create or modify a material, create an animation clip or sprite atlas, update import settings, or analyze asset dependencies before moving or deleting files. Do not use for Addressables groups or content builds; use `unity-addressables`. Do not use for scene object edits; use `unity-gameobject-edit`.
Browse Unity Technologies' official UnityCsReference C# source as a read-only local cache. Use when the user asks about the exact signature, behavior, or internal implementation of a Unity API, when comparing API differences between Unity versions, or when validating LLM-suggested Unity code against the canonical source. Do not use for editing project code (use `unity-csharp-edit`). Do not use for project-local script reading (use `unity-csharp-navigate`).
Implement, fix, and refactor Unity C# code with unity-cli write tools. Use when the user wants to change behavior in .cs files, create or rewrite scripts, update multiple C# files together, rename a symbol, add or remove members, or change project or package settings as part of a code change. Do not use for read-only inspection with no planned edit; use `unity-csharp-navigate` instead.
Explore Unity C# code without modifying files. Use when the user asks to read scripts, search text, find a symbol, trace references, inspect namespaces or packages, or understand where a class, method, or field is used. Do not use for code edits, renames, or refactors; use `unity-csharp-edit`. Do not use for scene inspection; use `unity-scene-inspect`.
| name | tui-design |
| description | Create distinctive, production-grade terminal user interfaces. Use when building TUI components with ratatui, CLI output styling, or xterm.js terminal rendering. Triggers: 'design TUI', 'terminal UI', 'TUIデザイン', 'ターミナルUI', 'ratatui widget' |
| allowed-tools | Bash, Read, Glob, Grep, Edit, Write |
Create distinctive, production-grade terminal user interfaces with high design quality. Use this skill when building TUI components, CLI tools, or terminal-based interfaces. Generate creative, polished code that avoids generic terminal aesthetics.
frontend-design skill insteadBefore coding, understand the context and commit to a BOLD aesthetic direction:
Choose a clear conceptual direction and execute it with precision. A dense information dashboard and a zen single-focus interface both work — the key is intentionality, not intensity.
Choose border styles that match your aesthetic:
┌─┐│└┘ — Clean, modern╔═╗║╚╝ — Bold, formal, retro-mainframe╭─╮│╰╯ — Soft, friendly, modern┏━┓┃┗┛ — Strong, industrial┄┆ — Light, airy, informal+-+| — Retro, universal compatibility█▀▄▌▐ — Chunky, bold, brutalist◢◣◤◥, ●○◐◑, ▲▼◀▶ for unique framesAvoid defaulting to simple single-line boxes. Consider asymmetric borders, double-thick headers, or decorative corners like ◆, ◈, ✦, ⬡.
Commit to a cohesive palette. Terminal color strategies:
Create atmosphere with:
░▒▓█Palette examples (invent your own):
#ff00ff, electric cyan #00ffff, deep purple #1a0a2e background#ffb000 on black, like vintage CRTsThe terminal is ALL typography. Make it count:
H E A D E R→ • ◆ ★ ⚡ λ ∴ ≡ ⌘- with ▸ ◉ ✓ ⬢ › or themed symbolsASCII Art Styles:
Block: ███████╗██╗██╗ ███████╗
Slant: /___ / / // / / ____/
Small: ╔═╗┌─┐┌─┐
Minimal: [ HEADER ]
Break free from single-column output:
Terminals support dynamic content:
|/-\. Use Braille patterns ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, dots ⣾⣽⣻⢿⡿⣟⣯⣷, custom sequences▓░, █▒, [=====> ], or creative alternatives like ◐◓◑◒▁▂▃▄▅▆▇█ for inline mini-charts├── └── │ for hierarchies● green, ○ empty, ◐ partial, ✓ complete, ✗ failed[████████░░] with percentageAdd character without clutter:
───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋▶ SECTION, [ SECTION ], ─── SECTION ───, ◆ SECTION· ∙ ░NEVER use generic terminal aesthetics like:
[INFO], [ERROR] prefixes without styling---- dividers| Framework | Language | Notes |
|---|---|---|
| ratatui | Rust | gwt primary TUI framework |
| xterm.js v6 | TypeScript | gwt-gui terminal emulation (Tauri WebView) |
| Rich, Textual | Python | General purpose |
| Bubbletea, Lipgloss | Go | General purpose |
| Ink, Blessed | Node.js | General purpose |
\x1b[1m Bold
\x1b[3m Italic
\x1b[4m Underline
\x1b[31m Red foreground
\x1b[38;2;R;G;Bm True color
\x1b[2J Clear screen
The terminal is a canvas with unique constraints and possibilities. Don't just print text — craft an experience.
Match implementation complexity to the aesthetic vision. A dense monitoring dashboard needs elaborate panels and live updates. A minimal CLI needs restraint, precision, and perfect alignment. Elegance comes from executing the vision well.