tui-design-skill
CLAUDE.md19 starsChanged 50 days agoMITView on GitHub
A Claude Code plugin plus a skills pack for building polished TUIs. Not a buildable software project — it's a collection of Markdown reference documents, command definitions, and starter templates consumed by AI coding tools (Claude Code, Codex, OpenCode, ZCode). Validation is just check-all (markdownlint, ASCII mockup widths, template compile checks, example project tests) — see AGENTS.md. Claude Code installs this as a plugin through the marketplace mechanism (/plugin marketplace add pageton/tui-design-skill, then /plugin install tui-design). Test locally with claude…
In this repository2 other files it gives its agents.
- AGENTS.mdAGENTS.md
- tui-designSkill
The file
We split this CLAUDE.md into the rules it gives an agent
3 rules. About 0 are common, 3 are distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈3
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 24
All content is Markdown. Keep formatting consistent with existing files.
- Distinctive: line 32
Start monochrome; add color only where it earns its place
- Distinctive: line 35
All states designed: empty, loading, error, interactive — never afterthoughts
≈ “Common” is an estimate: at least 1 in 5 of the 26,980 CLAUDE.md files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
What This Is
A Claude Code plugin plus a skills pack for building polished TUIs. Not a buildable software project — it's a collection of Markdown reference documents, command definitions, and starter templates consumed by AI coding tools (Claude Code, Codex, OpenCode, ZCode). Validation is just check-all (markdownlint, ASCII mockup widths, template compile checks, example project tests) — see AGENTS.md.
Repository Structure
.claude-plugin/plugin.json— Claude Code plugin manifest (skills + command).claude-plugin/marketplace.json— self-hosted plugin marketplaceskills/tui-design/SKILL.md— Main skill definition: triggers, principles, workflows, output standardscommands/tui-design.md— Claude Code plugin slash commandskills/tui-design/references/— Design reference docs (design-principles, architecture-patterns, framework-selection, terminal-compatibility, unicode-and-text, rtl-and-bidi, testing-tuis, troubleshooting, interaction-guide, component-catalog, color-and-emphasis, states-and-feedback, advanced-patterns, stability-and-robustness, review-checklist)skills/tui-design/frameworks/— Framework-specific guides for Bubble Tea (Go), Textual (Python), Ratatui (Rust), Ink (TypeScript)skills/tui-design/patterns/— Screen pattern templates with ASCII layouts: dashboard, data-browser, form-workflow, log-viewer, file-explorerskills/tui-design/templates/— Runnable starter apps for each framework (bubbletea-starter/,textual-starter/,ratatui-starter/,ink-starter/)skills/tui-design/projects/— Complete example apps (dbview-go, log-monitor-rust)opencode/commands/,codex/commands/,zcode/commands/— slash command files for other tools
Editing Guidelines
- All content is Markdown. Keep formatting consistent with existing files.
- Framework guides follow a standard structure: overview → architecture → project structure → framework sections (styling, keybindings, async, components) → best practices/common mistakes → dependencies.
- ASCII mockups use box-drawing characters (
+,-,|,>) and must render correctly at fixed width. - Component patterns in
skills/tui-design/references/component-catalog.mdinclude numbered mockup examples — maintain that numbering when adding components. - Starter templates in
skills/tui-design/templates/must be runnable as-is with their respective framework's toolchain (go run,textual run,cargo run,npm start).
Key Design Principles (encoded across the skill)
- Start monochrome; add color only where it earns its place
- Generous spacing (min 1 cell inside borders, prefer 2); tight spacing is a design smell
- Keyboard-first navigation with visible key hints in a status bar/footer
- All states designed: empty, loading, error, interactive — never afterthoughts
- Composable architecture: separate domain, state, view, and input handling
- Responsive to terminal resize; define minimum dimensions
Installation
Claude Code installs this as a plugin through the marketplace mechanism (/plugin marketplace add pageton/tui-design-skill, then /plugin install tui-design). Test locally with claude --plugin-dir . at the repo root. Other agents install via npx skills add pageton/tui-design-skill (auto-detects installed agents) or by copying files into tool config directories — see README.md for the exact paths.
License
MIT — see LICENSE.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.