textual

name	textual
description	Expert guidance for building TUI (Text User Interface) applications with the Textual framework. Invoke when user asks about Textual development, TUI apps, widgets, screens, CSS styling, reactive programming, or testing Textual applications.
source	https://github.com/KyleKing/vcr-tui/tree/main/.claude/skills/textual

Textual - Python TUI Framework Expert

You are an expert in building Text User Interface (TUI) applications using Textual, a modern Python framework for creating sophisticated terminal applications. This skill provides comprehensive guidance on Textual's architecture, best practices, and common patterns.

What is Textual?

Textual is a TUI framework by Textualize.io that enables developers to build:

• Beautiful, responsive terminal applications
• Rich, interactive command-line tools
• Cross-platform TUIs with modern UX patterns
• Applications with CSS-like styling and reactive programming

When to Use This Skill

Invoke this skill when the user:

• Wants to build or modify a TUI application
• Asks about Textual framework features
• Needs help with widgets, screens, or layouts
• Has questions about CSS styling in Textual
• Wants to implement reactive programming patterns
• Needs testing guidance for Textual apps
• Encounters errors or issues with Textual code
• Asks about TUI design patterns or best practices

Core Concepts

Application Architecture

Textual applications follow an event-driven architecture:

• The App class is the entry point and foundation
• Screens contain widgets and occupy the full terminal
• Widgets are reusable UI components managing rectangular regions
• Messages enable communication between components
• CSS (TCSS) provides styling separate from logic

Key Components

App Class:

• Entry point via app.run()
• Manages screens, modes, and global state
• Handles key bindings and actions
• Configures CSS via CSS_PATH or inline CSS

Screens:

• Full-terminal containers for widgets
• Support push/pop navigation stack
• Can be modal for dialogs
• Define their own key bindings and CSS

Widgets:

• Rectangular UI components
• Support composition via compose()
• Handle events via on_* methods
• Can be focused and styled with CSS

Reactive Programming

Textual's reactive system automatically updates the UI when data changes:

from textual.reactive import reactive

class Counter(Widget):
    count = reactive(0)  # Auto-refreshes on change

    def render(self) -> str:
        return f"Count: {self.count}"

Features:

• Validation: validate_<attr>() methods constrain values
• Watchers: watch_<attr>() methods react to changes
• Computed properties: compute_<attr>() for derived values
• Recompose: Rebuild widget tree when data changes

CSS Styling (TCSS)

Textual uses CSS-like syntax for styling:

Button {
    background: $primary;
    margin: 1;
}

#submit-button {
    background: $success;
}

.danger {
    background: $error;
}

Benefits:

• Separation of concerns (style vs logic)
• Live reload during development
• Theme system with semantic colors
• Responsive layout with FR units

Common Patterns

Basic App Template

from textual.app import App, ComposeResult
from textual.widgets import Header, Footer, Static

class MyApp(App):
    CSS_PATH = "app.tcss"

    def compose(self) -> ComposeResult:
        yield Header()
        yield Static("Hello, Textual!")
        yield Footer()

    def on_mount(self) -> None:
        """Called after app starts."""
        pass

if __name__ == "__main__":
    MyApp().run()

Widget Communication

Follow "Attributes down, messages up":

# Parent sets child attributes (down)
child.value = 10

# Child posts messages to parent (up)
class ChildWidget(Widget):
    class Updated(Message):
        def __init__(self, value: int) -> None:
            super().__init__()
            self.value = value

    def update_value(self) -> None:
        self.post_message(self.Updated(self.value))

# Parent handles child messages
class ParentWidget(Widget):
    def on_child_widget_updated(self, message: ChildWidget.Updated) -> None:
        self.log(f"Child updated: {message.value}")

Testing Pattern

import pytest
from my_app import MyApp

@pytest.mark.asyncio
async def test_button_click():
    app = MyApp()
    async with app.run_test() as pilot:
        # Simulate user interaction
        await pilot.click("#submit-button")

        # CRITICAL: Wait for message processing
        await pilot.pause()

        # Assert state changed
        result = app.query_one("#status")
        assert "Success" in str(result.renderable)

Best Practices

Design Process

1. Sketch First: Draw UI layout on paper before coding
2. Work Outside-In: Implement fixed elements (header/footer) first, then flexible content
3. Use Docking: Fix elements with dock: top/bottom/left/right
4. FR Units: Use 1fr for flexible sizing that fills available space
5. Container Widgets: Leverage Vertical, Horizontal, Grid for layouts

Code Organization

Prefer composition over inheritance:

# Good: Compose from smaller widgets
class UserCard(Widget):
    def compose(self) -> ComposeResult:
        with Vertical():
            yield Avatar()
            yield UserName()
            yield UserEmail()

Separate concerns:

# UI in widgets/
class UserPanel(Widget):
    def __init__(self) -> None:
        super().__init__()
        self.service = UserService()  # Business logic

# Business logic in business_logic/
class UserService:
    async def fetch_user(self, user_id: int) -> User:
        # API calls, data processing
        pass

External CSS for apps:

class MyApp(App):
    CSS_PATH = "app.tcss"  # Enables live reload

Performance

1. Target 60fps for smooth terminal rendering
2. Use Static widget for cached rendering
3. Cache expensive operations with @lru_cache
4. Use immutable objects for data structures
5. Workers for async operations to avoid blocking UI

Accessibility

• Full keyboard navigation support
• Set can_focus = True on interactive widgets
• Provide meaningful key bindings
• Use semantic color variables ($primary, $error)
• Test with different terminal sizes

Common Errors & Solutions

1. Forgetting async/await

# WRONG
def on_button_pressed(self):
    self.mount(Widget())

# RIGHT
async def on_button_pressed(self):
    await self.mount(Widget())

2. Missing pilot.pause() in tests

# WRONG - race condition
async def test_feature():
    await pilot.click("#button")
    assert app.query_one("#status").text == "Done"

# RIGHT
async def test_feature():
    await pilot.click("#button")
    await pilot.pause()  # Wait for processing
    assert app.query_one("#status").text == "Done"

3. Modifying reactives in init

# WRONG - triggers watchers too early
def __init__(self):
    super().__init__()
    self.count = 10

# RIGHT - use set_reactive or on_mount
def __init__(self):
    super().__init__()
    self.set_reactive(MyWidget.count, 10)

4. Blocking the event loop

# WRONG
def on_button_pressed(self):
    response = requests.get("https://api.example.com")  # Blocks UI!

# RIGHT - use workers
from textual.worker import work

@work(exclusive=True)
async def on_button_pressed(self):
    response = await httpx.get("https://api.example.com")

Development Tools

Development Console

Terminal 1:

textual console

Terminal 2:

textual run --dev my_app.py

In code:

from textual import log
log("Debug message", locals())

Screenshots & Live Editing

# Screenshot after 5 seconds
textual run --screenshot 5 my_app.py

# Dev mode with live CSS reload
textual run --dev my_app.py

Project Structure

Medium/Large Apps:

project/
├── src/
│   ├── app.py              # Main App class
│   ├── screens/
│   │   ├── main_screen.py
│   │   └── settings_screen.py
│   ├── widgets/
│   │   ├── status_bar.py
│   │   └── data_grid.py
│   └── business_logic/
│       ├── models.py
│       └── services.py
├── static/
│   └── app.tcss           # External CSS
├── tests/
│   ├── test_app.py
│   └── test_widgets/
└── pyproject.toml

Instructions for Assistance

When helping users with Textual:

1. Assess Context: Understand their app structure and goals
2. Check Basics: Verify imports, async/await, and lifecycle methods
3. Provide Examples: Show concrete, runnable code
4. Explain Patterns: Describe why a pattern is recommended
5. Test Guidance: Include testing code when implementing features
6. Debug Support: Use console logging and visual debugging tips
7. Best Practices: Suggest improvements for maintainability

Always consider:

• App complexity (simple vs multi-screen)
• State management needs (local vs global)
• Performance requirements
• Testing strategy
• Code organization and maintainability

Additional Resources

For detailed reference information:

• quick-reference.md: Concise templates, patterns, and cheat sheets
• guide.md: Comprehensive architecture, design principles, and best practices
• Official Documentation: https://textual.textualize.io

Quick Reference Highlights

Useful Built-in Widgets

Input & Selection:

• Button, Checkbox, Input, RadioButton, Select, Switch, TextArea

Display:

• Label, Static, Pretty, Markdown, MarkdownViewer

Data:

• DataTable, ListView, Tree, DirectoryTree

Containers:

• Header, Footer, Tabs, TabbedContent, Vertical, Horizontal, Grid

Key Lifecycle Methods

def __init__(self) -> None:
    """Widget created - don't modify reactives here."""
    super().__init__()

def compose(self) -> ComposeResult:
    """Build child widgets."""
    yield ChildWidget()

def on_mount(self) -> None:
    """After mounted - safe to modify reactives."""
    self.set_interval(1, self.update)

def on_unmount(self) -> None:
    """Before removal - cleanup resources."""
    pass

Common CSS Patterns

/* Docking */
#header { dock: top; height: 3; }
#sidebar { dock: left; width: 30; }

/* Flexible sizing */
#content { width: 1fr; height: 1fr; }

/* Grid layout */
#container {
    layout: grid;
    grid-size: 3 2;
    grid-columns: 1fr 2fr 1fr;
}

/* Theme colors */
Button {
    background: $primary;
    color: $text;
}

Button:hover {
    background: $primary-lighten-1;
}

Summary

This skill provides expert-level guidance for building Textual applications. Use it to help users understand architecture, implement features, debug issues, write tests, and follow best practices for maintainable TUI development.