Vercel Composition Patterns
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
Design engineering principles for making TUI interfaces feel polished.
Install Better Interface
$ npx skills add dedalus-labs/wingman --skill better-interface -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install dedalus-labs/wingman better-interface --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/dedalus-labs/wingman.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/better-interface .claude/skills/better-interface && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "better-interface" agent skill from https://github.com/dedalus-labs/wingman/tree/main/.agents/skills/better-interface into .claude/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/dedalus-labs/wingman/tree/main/.agents/skills/better-interfaceType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add dedalus-labs/wingman --skill better-interface -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install dedalus-labs/wingman better-interface --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dedalus-labs/wingman.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/better-interface .agents/skills/better-interface && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "better-interface" agent skill from https://github.com/dedalus-labs/wingman/tree/main/.agents/skills/better-interface into .agents/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add dedalus-labs/wingman --skill better-interface -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install dedalus-labs/wingman better-interface --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dedalus-labs/wingman.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/better-interface .cursor/skills/better-interface && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "better-interface" agent skill from https://github.com/dedalus-labs/wingman/tree/main/.agents/skills/better-interface into .cursor/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/dedalus-labs/wingman.git --path .agents/skills/better-interface--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add dedalus-labs/wingman --skill better-interface -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install dedalus-labs/wingman better-interface --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dedalus-labs/wingman.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/better-interface .gemini/skills/better-interface && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "better-interface" agent skill from https://github.com/dedalus-labs/wingman/tree/main/.agents/skills/better-interface into .gemini/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install dedalus-labs/wingman better-interfaceInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add dedalus-labs/wingman --skill better-interface -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/dedalus-labs/wingman.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/better-interface .github/skills/better-interface && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "better-interface" agent skill from https://github.com/dedalus-labs/wingman/tree/main/.agents/skills/better-interface into .github/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add dedalus-labs/wingman --skill better-interface -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install dedalus-labs/wingman better-interface --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dedalus-labs/wingman.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/better-interface .opencode/skills/better-interface && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "better-interface" agent skill from https://github.com/dedalus-labs/wingman/tree/main/.agents/skills/better-interface into .opencode/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
better-interface- GitHub stars
- 181
- Token cost
- ~1.3k tokens
- SKILL.md length
- 622 words
- Files
- 5
- Skills in repo
- 7
- Repo updated
- First seen
- Licence
- MIT
At a glance
Design engineering principles for making TUI interfaces feel polished.
- Works in 10 steps: Consistent Spacing → Optical Alignment Over Grid Alignment → Color Hierarchy → …
- Building Textual widgets
- SKILL.md covers Quick Reference, Core Principles, Common Mistakes and Review Checklist, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Better Interface is an agent skill from dedalus-labs/wingman. Design engineering principles for making TUI interfaces feel polished. Use when building Textual widgets, reviewing TUI code, implementing transitions, focus states, alignment, spacing, or any visual detail work. Triggers on TUI polish, design details, "make it feel better", "feels off", layout alignment, color consistency, responsive sizing.
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files (for example `color.md`, `interaction.md` and `layout.md`).
It sits in Development. The repository describes itself as: scaling capability quotient. The licence is MIT.
When your agent uses it
- Building Textual widgets
- Reviewing TUI code
- Implementing transitions
- Any visual detail work
Example prompts
- “make it feel better”
- “feels off”
- “/better-interface”
Workflow steps
10 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit f6233ab. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Better Interface loads about 1.3k tokens when it runs. Until then it costs about 90 tokens; SKILL.md has 622 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from dedalus-labs/wingman at commit f6233ab, republished under its MIT licence (© dedalus-labs). 622 words, ~1,273 tokens.
Download SKILL.mdSave it as
.claude/skills/better-interface/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- better-interface
- description
- Design engineering principles for making TUI interfaces feel polished. Use when building Textual widgets, reviewing TUI code, implementing transitions, focus states, alignment, spacing, or any visual detail work. Triggers on TUI polish, design details, "make it feel better", "feels off", layout alignment, color consistency, responsive sizing.
Details that make TUI interfaces feel better
Great TUIs rarely come from a single thing. It's a collection of small details that compound into a professional experience. Apply these principles when building or reviewing Textual/terminal UI code.
Quick Reference
| Category | When to Use |
|---|---|
| Layout | Alignment, spacing, responsive sizing, content regions |
| Color | Palette consistency, contrast, semantic color usage |
| Interaction | Focus management, key hints, modal flow, feedback |
| Typography | Text truncation, wrapping, Unicode, monospace alignment |
Core Principles
1. Consistent Spacing
Use a spacing scale (1, 2, 4 cells). Mismatched padding between related
elements is the most common thing that makes TUIs feel off. Textual's
padding and margin CSS properties use cell units.
2. Optical Alignment Over Grid Alignment
When geometric centering looks wrong in a terminal, adjust optically. Asymmetric Unicode characters (arrows, bullets) and mixed-width content need manual nudging. A centered title above left-aligned content often needs 1 cell of left padding removed.
3. Color Hierarchy
Use 3-4 color tiers consistently:
- Primary: key actions, active focus (bright, saturated)
- Secondary: labels, metadata (dimmed)
- Muted: borders, separators (very dim)
- Danger/Success: semantic states only (red/green)
Never use bright colors for passive elements. Reserve saturation for things the user needs to notice.
4. Focus is Sacred
The focused widget must be visually distinct at a glance. Use border color changes, not just cursor position. A user glancing at the screen should instantly know where input will go.
5. Responsive Layout
TUI must work at 80x24 minimum. Use fr units and max-width/
min-width in Textual CSS to adapt. Content that overflows should
truncate with ellipsis, never wrap into garbage.
6. Feedback on Every Action
Every keypress that does something should produce visible feedback within one frame. If an operation takes time, show a spinner or status message immediately — don't let the user wonder if their input was received.
7. Subtle Transitions
Textual supports CSS transitions. Use short durations (150-300ms) for background color and opacity changes on hover/focus. Never animate layout properties (width, height) — terminal reflow is not smooth.
8. Border Consistency
Pick one border style and stick with it. tall for primary
containers, round for cards/modals, heavy for emphasis. Mixing
ascii, tall, round, and heavy in one screen looks
incoherent.
Show full SKILL.md (260 more words)Show less
9. Key Hints
Always show available keys in a footer or status bar. Format as
key action pairs separated by thin spaces. Dim the keys relative
to the actions. Update hints contextually as focus moves.
10. Content Density
Terminal space is precious. Default to dense layouts. Use blank lines only to separate logical groups, never for decoration. Single-line headers over multi-line. Abbreviate labels when the full form is obvious from context.
Common Mistakes
| Mistake | Fix |
|---|---|
| Inconsistent padding between similar widgets | Use a spacing constant |
| Bright colors on passive/decorative elements | Reserve bright for actions and focus |
| No visible focus indicator | Add border color or background change on focus |
| Content overflows and wraps badly | Set overflow: hidden with text-overflow: ellipsis |
| No key hints visible | Add contextual footer with available actions |
| Large empty regions at default size | Use fr units to distribute space |
| Mixed border styles in one view | Standardize on one style per element tier |
| No feedback on async operations | Show spinner/status immediately on action |
Review Checklist
- Spacing is consistent between related elements
- Focused widget is visually distinct (border or background)
- Color usage follows the 3-4 tier hierarchy
- Layout works at 80x24 minimum terminal size
- Long text truncates with ellipsis, never wraps into garbage
- Key hints are visible and contextually updated
- Every user action produces visible feedback
- Border styles are consistent within each tier
- No bright colors on passive elements
- Transitions are short (150-300ms) and only on color/opacity
Reference Files
- layout.md — Alignment, spacing, responsive sizing
- color.md — Palette consistency, contrast, semantic usage
- interaction.md — Focus management, key hints, modals
- typography.md — Truncation, wrapping, Unicode alignment
© dedalus-labs, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 4 other files in .agents/skills/better-interface of dedalus-labs/wingman.
- SKILL.md
- color.md
- interaction.md
- layout.md
- typography.md
Open the folder on GitHubat commit f6233ab
Compare with similar skills
Better Interface next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Better Interface this skilldedalus-labs/wingman | 181 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Vercel Composition Patternssupabase/supabase | 111k | 59 repos | ~726 | Automated safety check: Pass | MIT | |
| Finishing a Development Branchobra/superpowers | 296k | 5 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Typescript Advanced Typesrolling-scopes/rsschool-app | 10k | 25 repos | ~4.2k | Automated safety check: Pass | MPL-2.0 | |
| PR Babysitteropeninterpreter/openinterpreter | 69k | 3 repos | ~4.2k | Automated safety check: Pass | Apache-2.0 | |
| Code Review ChecklistshareAI-lab/learn-claude-code | 78k | 5 repos | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
- Official
Finishing a Development Branch
obra/superpowers
Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.
Typescript Advanced Types
rolling-scopes/rsschool-app
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.
PR Babysitter
openinterpreter/openinterpreter
Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.
Code Review Checklist
shareAI-lab/learn-claude-code
Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.
Greploop
onyx-dot-app/onyx
Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until Greptile gives it a 5/5 confidence score with zero unresolved comments.
More from dedalus-labs/wingman
Greentext
dedalus-labs/wingman
Explain system behavior, request flows, architecture, or implementation logic as short 4chan-style greentext lines.
PR Review
dedalus-labs/wingman
Review PR comments from GitHub. An agent skill from dedalus-labs/wingman.
Promote
dedalus-labs/wingman
Create a changelog-style promotion PR between two branches. An agent skill from dedalus-labs/wingman.
Issue
dedalus-labs/wingman
Create a GitHub issue using the wingman issue templates (bug, feature).
PR
dedalus-labs/wingman
Create a pull request using the wingman PR template. An agent skill from dedalus-labs/wingman.
Commit
dedalus-labs/wingman
Create a git commit with conventional commit format. An agent skill from dedalus-labs/wingman.
Related
Categories
Questions about Better Interface
What does Better Interface do?
Design engineering principles for making TUI interfaces feel polished. Better Interface is an agent skill from dedalus-labs/wingman. Design engineering principles for making TUI interfaces feel polished.
When should I use Better Interface?
Better Interface fits situations like: building Textual widgets; reviewing TUI code; implementing transitions; any visual detail work.
How do I install Better Interface in Claude Code?
Run `npx skills add dedalus-labs/wingman --skill better-interface -a claude-code`. Or copy the skill folder (.agents/skills/better-interface in dedalus-labs/wingman) into .claude/skills/better-interface in your project. Claude Code loads it when a task matches its description.
How do I install Better Interface in Codex?
Run `npx skills add dedalus-labs/wingman --skill better-interface -a codex`. Or copy the skill folder (.agents/skills/better-interface in dedalus-labs/wingman) into .agents/skills/better-interface in your project. Codex loads it when a task matches its description.
Can I use Better Interface in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dedalus-labs/wingman --skill better-interface -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/better-interface, .gemini/skills/better-interface, .github/skills/better-interface and .opencode/skills/better-interface in your project.
What does Better Interface need to run?
SKILL.md names no scripts, command-line tools or credentials: Better Interface is instructions for the agent only.
Does Better Interface access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Better Interface safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Better Interface use?
Better Interface is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Better Interface use?
About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Better Interface?
Skills that share tags, products or a category with Better Interface: Vercel Composition Patterns (supabase/supabase, 111k stars), Finishing a Development Branch (obra/superpowers, 296k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars) and PR Babysitter (openinterpreter/openinterpreter, 69k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Better Interface?
dedalus-labs (a GitHub organization) maintains it in dedalus-labs/wingman, which has 181 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on April 25, 2026.
Source: dedalus-labs/wingman on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.