Official agent skill

Vibe Textual UI Conventions

Conventions for building and styling Textual widgets and TCSS in the Mistral Vibe codebase: selectable lists, tool headers, theme variables and overflow.

OfficialApache-2.0Auto-check passedDevelopment

Install Vibe Textual UI Conventions

skills CLI

$ npx skills add mistralai/mistral-vibe --skill vibe-textual-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install mistralai/mistral-vibe vibe-textual-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/mistralai/mistral-vibe.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vibe-textual-ui .claude/skills/vibe-textual-ui && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "vibe-textual-ui" agent skill from https://github.com/mistralai/mistral-vibe/tree/main/.agents/skills/vibe-textual-ui into .claude/skills/vibe-textual-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-textual-ui", 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

$skill-installer install https://github.com/mistralai/mistral-vibe/tree/main/.agents/skills/vibe-textual-ui

Type 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.

skills CLI

$ npx skills add mistralai/mistral-vibe --skill vibe-textual-ui -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install mistralai/mistral-vibe vibe-textual-ui --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mistralai/mistral-vibe.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/vibe-textual-ui .agents/skills/vibe-textual-ui && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "vibe-textual-ui" agent skill from https://github.com/mistralai/mistral-vibe/tree/main/.agents/skills/vibe-textual-ui into .agents/skills/vibe-textual-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-textual-ui", 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.

skills CLI

$ npx skills add mistralai/mistral-vibe --skill vibe-textual-ui -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install mistralai/mistral-vibe vibe-textual-ui --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mistralai/mistral-vibe.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/vibe-textual-ui .cursor/skills/vibe-textual-ui && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "vibe-textual-ui" agent skill from https://github.com/mistralai/mistral-vibe/tree/main/.agents/skills/vibe-textual-ui into .cursor/skills/vibe-textual-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-textual-ui", 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

$ gemini skills install https://github.com/mistralai/mistral-vibe.git --path .agents/skills/vibe-textual-ui

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add mistralai/mistral-vibe --skill vibe-textual-ui -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install mistralai/mistral-vibe vibe-textual-ui --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mistralai/mistral-vibe.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/vibe-textual-ui .gemini/skills/vibe-textual-ui && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "vibe-textual-ui" agent skill from https://github.com/mistralai/mistral-vibe/tree/main/.agents/skills/vibe-textual-ui into .gemini/skills/vibe-textual-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-textual-ui", 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.

GitHub CLI

$ gh skill install mistralai/mistral-vibe vibe-textual-ui

Installs 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).

skills CLI

$ npx skills add mistralai/mistral-vibe --skill vibe-textual-ui -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/mistralai/mistral-vibe.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/vibe-textual-ui .github/skills/vibe-textual-ui && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "vibe-textual-ui" agent skill from https://github.com/mistralai/mistral-vibe/tree/main/.agents/skills/vibe-textual-ui into .github/skills/vibe-textual-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-textual-ui", 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.

skills CLI

$ npx skills add mistralai/mistral-vibe --skill vibe-textual-ui -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install mistralai/mistral-vibe vibe-textual-ui --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mistralai/mistral-vibe.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/vibe-textual-ui .opencode/skills/vibe-textual-ui && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "vibe-textual-ui" agent skill from https://github.com/mistralai/mistral-vibe/tree/main/.agents/skills/vibe-textual-ui into .opencode/skills/vibe-textual-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-textual-ui", 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: vibe-textual-ui
GitHub stars: 5.1k
Token cost: ~591 tokens
SKILL.md length: 258 words
Files: 1
Skills in repo: 15
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Conventions for building and styling Textual widgets and TCSS in the Mistral Vibe codebase: selectable lists, tool headers, theme variables and overflow.

Adding or restyling a Textual widget in Vibe's CLI
SKILL.md covers Widgets and TCSS
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Writing TCSS rules that must also work under ANSI themes

What it does

This skill collects the house rules for Textual terminal UI work under `vibe/cli/`. Selectable lists should use the project's `NavigableOptionList` rather than Textual's `OptionList`, because it adds j and k navigation on top of the arrow keys. Feature-specific state and helpers stay with the feature's widget package, so `app.py` only orchestrates mounting and message handling.

Tool headers are rendered as an explicit verb plus message in every state: progressive wording while a call runs and a settled verb once any result arrives, including a failure, with markers like `(truncated)` kept after the message and error details left in the expandable body. For TCSS, a muted text color gets a nested `&:ansi` rule that dims it, `ansi_*` colors are never used in favor of theme variables such as `$primary` and `$error`, and truncation stays declarative instead of relying on resize handlers.

When your agent uses it

Adding or restyling a Textual widget in Vibe's CLI
Writing TCSS rules that must also work under ANSI themes
Building a selectable list with keyboard navigation
Formatting tool call headers across running, success and failure states

Example prompts

“Add a model picker list to the Vibe CLI using the project's navigable list widget.”
“Style this widget in TCSS without using ansi colors.”
“Update the tool header widget so failed calls keep their truncated marker and show errors in the expandable body.”

Requirements

The Mistral Vibe codebase, specifically the vibe/cli package

What it can do on your machine

Read from SKILL.md and the folder at commit 4ae5c59. 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
Links to these hosts (documentation or services it may open):
- textual.textualize.io
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

Vibe Textual UI Conventions loads about 591 tokens when it runs. Until then it costs about 56 tokens; SKILL.md has 258 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~56
When it runs · the whole SKILL.md, loaded when a task matches: ~591

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 mistralai/mistral-vibe at commit 4ae5c59, republished under its Apache-2.0 licence (© mistralai). 258 words, ~591 tokens.

Download SKILL.mdSave it as .claude/skills/vibe-textual-ui/SKILL.md (or your agent's skills folder).

name: vibe-textual-ui
description: Textual TUI widget and TCSS conventions for Mistral Vibe. Use when building or styling Textual widgets, writing TCSS rules, working with selectable lists, tool headers, theme variables, or UI component layout.
metadata.display-name: Vibe Textual UI
metadata.short-description: Widget and TCSS conventions for Vibe
metadata.default-prompt: Use $vibe-textual-ui to follow Vibe Textual UI conventions when building or styling widgets.

Vibe Textual UI

Conventions for building and styling Textual TUI widgets in Vibe. Apply when working in vibe/cli/, creating or modifying widgets, or writing TCSS.

The Textual TUI is being deprecated in favor of the Rust TUI (vibe/cli-rust/). Every user-visible change made here must also ship in the Rust TUI in the same PR; see "Terminal UI changes" in the Vibe project AGENTS.md (next to pyproject.toml).

Widgets

For selectable lists, use NavigableOptionList from vibe/cli/textual_ui/widgets/navigable_option_list.py instead of Textual's OptionList. It adds j/k cursor navigation on top of the arrow keys; the bare OptionList only handles arrows.
Keep feature-specific Textual state and helper functions with the feature's widget package. app.py should orchestrate mounting and message handling, not accumulate feature-local state models, defaulting helpers, or import factories.
Render tool headers as an explicit verb plus message in every state: progressive wording while a call is running, then a settled verb once any result arrives, including a failure. Preserve result metadata such as (truncated) or (scratchpad) immediately after the message and keep error details in the expandable result body.

TCSS

When a rule sets color: $text-muted;, pair it with a nested &:ansi { text-style: dim; } so the muted intent survives under ANSI themes.
Never use ansi_* colors (e.g. ansi_red, ansi_bright_blue). Use Textual theme variables like $primary, $foreground, $surface, $error, etc. — see https://textual.textualize.io/guide/design/. ANSI themes are derived from these variables automatically.
Keep truncation and overflow behavior declarative in TCSS. Do not add resize handlers or explicit widget-width calculations solely to force an ellipsis; accept clipping or overflow when Textual cannot express the layout reliably.

Files

Just SKILL.md in .agents/skills/vibe-textual-ui of mistralai/mistral-vibe.

Open the folder on GitHubat commit 4ae5c59

Compare with similar skills

Vibe Textual UI Conventions 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.

Vibe Textual UI Conventions compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Vibe Textual UI Conventions this skillmistralai/mistral-vibe	5.1k	—	~591	Automated safety check: Pass	Apache-2.0	yesterday
UI StylingOhh-889/skyroc	795	13 repos	~2.5k	Automated safety check: Pass	MIT	1 mo ago
UI UX Pro Maxsaoudi-h/solar-icons	190	18 repos	~11k	Automated safety check: Notes	Custom licence	2 days ago
Liuguang Banlan UIsickn33/agentic-awesome-skills	47k	1 repos	~2.5k	Automated safety check: Pass	MIT	yesterday
UI UX Pro MaxOhh-889/skyroc	795	26 repos	~3.6k	Automated safety check: Notes	MIT	1 mo ago
UI UX Pro Maxshobcoder/shob	576	—	~3.7k	Automated safety check: Pass	MIT	23 days ago

Similar skills

UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
795 GitHub starsUsed in 13 repos~2.5k tokens
Frontend & DesignAuto-check passed
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
190 GitHub starsUsed in 18 repos~11k tokens
Frontend & DesignAuto-check: notes
Liuguang Banlan UI
sickn33/agentic-awesome-skills
Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.
47k GitHub starsUsed in 1 repo~2.5k tokens
Frontend & DesignAuto-check passed
UI UX Pro Max
Ohh-889/skyroc
UI/UX design intelligence. An agent skill from Ohh-889/skyroc.
795 GitHub starsUsed in 26 repos~3.6k tokens
Frontend & DesignAuto-check: notes
UI UX Pro Max
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
576 GitHub stars~3.7k tokensUpdated 23 days ago
Frontend & DesignAuto-check passed
UI Design Styling
ryokun6/ryos
Design and style ryOS UI using the current OS theme token system, Tailwind variants, shared primitives, Aqua Glass, dark mode, and accent conventions.
1.3k GitHub stars~3.1k tokensUpdated today
Frontend & DesignAuto-check passed

More from mistralai/mistral-vibe

All 15 skills in this repo

Mistral Vibe Plugin Creator
mistralai/mistral-vibe
Official
Shows how to build a Vibe plugin package in the Agent Plugins 1.0 format, with a plugin.json manifest and optional skills, MCP servers, hooks and other components.
5.1k GitHub stars~3.1k tokensUpdated yesterday
Auto-check passed
Create Vibe Feature
mistralai/mistral-vibe
Official
Guides feature work in the Mistral Vibe Python CLI so each change lands in the right module and matches the project's architecture decision records.
5.1k GitHub stars~1.4k tokensUpdated yesterday
Auto-check passed
Feature Analytics Instrumentation Planner
mistralai/mistral-vibe
Official
Plans which analytics events and properties a new feature needs, checks them against the existing event registry, and verifies them per environment.
5.1k GitHub stars~2.2k tokensUpdated yesterday
Auto-check passed
Vibe Worktree Manager
mistralai/mistral-vibe
Official
Creates, reuses and cleans up git worktrees under a shared vibe home directory, with per-repo buckets, claim records and dirty-state checks before removal.
5.1k GitHub stars~1.2k tokensUpdated yesterday
Auto-check passed
Write Vibe ADR
mistralai/mistral-vibe
Official
Creates or updates concise Architecture Decision Records for the Mistral Vibe CLI and registers each one in the AGENTS.md decisions table.
5.1k GitHub stars~942 tokensUpdated yesterday
Auto-check passed
Write Vibe Tests
mistralai/mistral-vibe
Official
Guides writing or refactoring tests for the Mistral Vibe CLI agent so they check behavior through stable boundaries, like tool invocation or saved session shape, instead of internal calls.
5.1k GitHub stars~1.2k tokensUpdated yesterday
Auto-check passed

Works with

Mistral AI

Questions about Vibe Textual UI Conventions

What does Vibe Textual UI Conventions do?

Conventions for building and styling Textual widgets and TCSS in the Mistral Vibe codebase: selectable lists, tool headers, theme variables and overflow. This skill collects the house rules for Textual terminal UI work under `vibe/cli/`. Selectable lists should use the project's `NavigableOptionList` rather than Textual's `OptionList`, because it adds j and k navigation on top of the arrow keys.

When should I use Vibe Textual UI Conventions?

Vibe Textual UI Conventions fits situations like: adding or restyling a Textual widget in Vibe's CLI; writing TCSS rules that must also work under ANSI themes; building a selectable list with keyboard navigation; formatting tool call headers across running, success and failure states.

How do I install Vibe Textual UI Conventions in Claude Code?

Run `npx skills add mistralai/mistral-vibe --skill vibe-textual-ui -a claude-code`. Or copy the skill folder (.agents/skills/vibe-textual-ui in mistralai/mistral-vibe) into .claude/skills/vibe-textual-ui in your project. Claude Code loads it when a task matches its description.

How do I install Vibe Textual UI Conventions in Codex?

Run `npx skills add mistralai/mistral-vibe --skill vibe-textual-ui -a codex`. Or copy the skill folder (.agents/skills/vibe-textual-ui in mistralai/mistral-vibe) into .agents/skills/vibe-textual-ui in your project. Codex loads it when a task matches its description.

Can I use Vibe Textual UI Conventions 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 mistralai/mistral-vibe --skill vibe-textual-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vibe-textual-ui, .gemini/skills/vibe-textual-ui, .github/skills/vibe-textual-ui and .opencode/skills/vibe-textual-ui in your project.

What does Vibe Textual UI Conventions need to run?

SKILL.md names no scripts, command-line tools or credentials: Vibe Textual UI Conventions is instructions for the agent only. Our summary lists: The Mistral Vibe codebase, specifically the vibe/cli package.

Does Vibe Textual UI Conventions access the network?

SKILL.md names 1 domain. As links in the text: textual.textualize.io. This is read from the text; nothing was executed.

Is Vibe Textual UI Conventions 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 Vibe Textual UI Conventions use?

Vibe Textual UI Conventions is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vibe Textual UI Conventions use?

About 591 tokens (SKILL.md is roughly 2.4k 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 Vibe Textual UI Conventions?

Skills that share tags, products or a category with Vibe Textual UI Conventions: UI Styling (Ohh-889/skyroc, 795 stars), UI UX Pro Max (saoudi-h/solar-icons, 190 stars), Liuguang Banlan UI (sickn33/agentic-awesome-skills, 47k stars) and UI UX Pro Max (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vibe Textual UI Conventions?

mistralai (a GitHub organization, an official publisher) maintains it in mistralai/mistral-vibe, which has 5,087 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 9, 2026.

Source: mistralai/mistral-vibe on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Vibe Textual UI Conventions

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Vibe Textual UI

Widgets

TCSS

Files

Compare with similar skills

Similar skills

More from mistralai/mistral-vibe

Related

Questions about Vibe Textual UI Conventions