Agent skill

textual-scaffolder

Generate Textual (Python) TUI application structure with widgets, screens, and CSS styling.

View SKILL.md on GitHub Repository
Stars 514
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/a5c-ai/babysitter/tree/main/library/specializations/cli-mcp-development/skills/textual-scaffolder

SKILL.md

Textual Scaffolder

Generate Textual TUI applications with Python and modern async patterns.

Capabilities

  • Generate Textual project structure
  • Create custom widgets and screens
  • Set up CSS-based styling
  • Implement reactive attributes
  • Create component composition
  • Set up testing with textual.testing

Usage

Invoke this skill when you need to:

  • Build terminal UIs in Python
  • Create interactive CLI with CSS styling
  • Implement multi-screen TUI applications
  • Set up Textual project structure

Inputs

Parameter Type Required Description
projectName string Yes Project name
screens array No Screen definitions
widgets array No Custom widget definitions

Generated Patterns

Main Application

python
from textual.app import App, ComposeResult
from textual.widgets import Header, Footer, Static, Button, Input
from textual.containers import Container, Horizontal, Vertical
from textual.screen import Screen

class MainScreen(Screen):
    """Main application screen."""

    CSS = """
    MainScreen {
        layout: grid;
        grid-size: 2;
        grid-gutter: 1;
    }

    #sidebar {
        width: 30;
        background: $surface;
        border: solid $primary;
    }

    #content {
        background: $surface;
        border: solid $secondary;
    }
    """

    def compose(self) -> ComposeResult:
        yield Header()
        yield Container(
            Static("Sidebar", id="sidebar"),
            Static("Content", id="content"),
        )
        yield Footer()


class MyApp(App):
    """Main TUI application."""

    BINDINGS = [
        ("q", "quit", "Quit"),
        ("d", "toggle_dark", "Toggle dark mode"),
    ]

    CSS_PATH = "styles.tcss"

    def on_mount(self) -> None:
        self.push_screen(MainScreen())

    def action_toggle_dark(self) -> None:
        self.dark = not self.dark


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

Custom Widget

python
from textual.widget import Widget
from textual.reactive import reactive
from textual.message import Message

class Counter(Widget):
    """A counter widget with increment/decrement."""

    value = reactive(0)

    class Changed(Message):
        """Counter value changed."""
        def __init__(self, value: int) -> None:
            self.value = value
            super().__init__()

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

    def increment(self) -> None:
        self.value += 1
        self.post_message(self.Changed(self.value))

    def decrement(self) -> None:
        self.value -= 1
        self.post_message(self.Changed(self.value))

CSS Styles (styles.tcss)

css
Screen {
    background: $surface;
}

Header {
    dock: top;
    background: $primary;
}

Footer {
    dock: bottom;
    background: $primary;
}

Button {
    margin: 1;
}

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

Input {
    margin: 1;
    border: tall $secondary;
}

Input:focus {
    border: tall $primary;
}

.error {
    color: $error;
}

.success {
    color: $success;
}

Data Table Widget

python
from textual.widgets import DataTable
from textual.app import ComposeResult

class DataScreen(Screen):
    def compose(self) -> ComposeResult:
        yield DataTable()

    def on_mount(self) -> None:
        table = self.query_one(DataTable)
        table.add_columns("Name", "Email", "Role")
        table.add_rows([
            ("Alice", "alice@example.com", "Admin"),
            ("Bob", "bob@example.com", "User"),
            ("Charlie", "charlie@example.com", "User"),
        ])

Dependencies

toml
[project]
dependencies = [
    "textual>=0.40.0",
]

[project.optional-dependencies]
dev = [
    "textual-dev>=1.0.0",
]

Target Processes

  • tui-application-framework
  • interactive-form-implementation
  • dashboard-monitoring-tui

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

a5c-ai/babysitter

gsd-tools

Central utility skill for GSD operations. Provides config parsing, slug generation, timestamps, path operations, and orchestrates calls to other specialized skills. Acts as the unified entry point that the original gsd-tools.cjs provided via its lib/ modules (commands, config, core, init).

514 31
Explore
a5c-ai/babysitter

model-profile-resolution

Resolve model profile (quality/balanced/budget) at orchestration start and map agents to specific models. Enables cost/quality tradeoffs by selecting appropriate AI models for each agent role.

514 31
Explore
a5c-ai/babysitter

verification-suite

Plan structure validation, phase completeness checks, reference integrity verification, and artifact existence confirmation. Provides the structured verification layer ensuring GSD artifacts are well-formed and complete.

514 31
Explore
a5c-ai/babysitter

state-management

STATE.md reading, writing, and field-level updates. Provides cross-session state persistence via .planning/STATE.md with structured fields for current task, completed phases, blockers, decisions, and quick tasks.

514 31
Explore
a5c-ai/babysitter

git-integration

Git commit patterns, formats, and conventions for GSD methodology. Provides atomic commits per task, structured commit messages, planning file commits, branch management, and milestone tag operations.

514 31
Explore
a5c-ai/babysitter

frontmatter-parsing

YAML frontmatter parsing and manipulation for .planning/ documents. Provides read, write, update, query, and validation operations on frontmatter blocks in GSD markdown artifacts.

514 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results