Agent skill
textual
Use when building Textual TUI apps — creating widgets, laying out screens, handling events, managing reactivity, testing with Pilot, or running background workers. Covers App lifecycle, CSS styling, screen stack, reactive attributes, custom messages, actions, bindings, and the Worker API.
Install this agent skill to your Project
npx add-skill https://github.com/Jamie-BitFlight/claude_skills/tree/main/plugins/python3-development/skills/textual
SKILL.md
Textual Knowledge
Provides patterns, API constraints, and working examples for building terminal applications with the Textual framework.
Scope
Consult ../python3-development/references/python3-standards.md when applying shared architecture, typing, testing, or CLI rules; full standards, graphs, and amendment process are documented there.
TRIGGER: Activate when the user asks about Textual — building TUI apps, widgets, CSS styling, reactive attributes, testing, or concurrency.
COVERS:
- App class, run/exit/suspend, title/subtitle, CSS loading
- Screen stack (push, pop, switch), modal screens, modes, screen data return
- Custom widgets, builtins, Line API, compound widgets, data flow
- Layout types (vertical, horizontal, grid), docking, layers, offsets
- CSS selectors, pseudo-classes, combinators, specificity, variables, nesting
- Events, message queue, bubbling, custom messages,
@ondecorator - Actions, action strings, namespaces, bindings, dynamic actions
- Reactive attributes, smart refresh, validation, watch methods, compute, data binding
- Testing with
run_test, Pilot API (press, click, hover, pause) - Snapshot testing with
pytest-textual-snapshot - Workers (
@work,run_worker, thread workers, worker events)
DOES NOT COVER:
- Rich library internals (see Rich docs)
- Textual Web deployment
- Custom CSS parsers or non-Textual terminal frameworks
Workflow
flowchart TD
Task([Task received]) --> Q1{Task type?}
Q1 -->|App structure or lifecycle| App[Load app-and-screens.md]
Q1 -->|Widget creation or builtins| Wid[Load widgets.md]
Q1 -->|Layout or CSS styling| CSS[Load layout-and-css.md]
Q1 -->|Events, messages, or actions| Evt[Load events-and-actions.md]
Q1 -->|Reactive attributes or data binding| React[Load reactivity.md]
Q1 -->|Testing or background tasks| Test[Load testing-and-workers.md]
Q1 -->|Multiple concerns| Multi[Load relevant files]
Reference Files
App and Screens
App class basics, run/exit/suspend, CSS loading, screen stack (push/pop/switch), modal screens, returning data from screens, and modes.
Load when the user asks about App setup, screen navigation, modal dialogs, or multi-screen apps.
references/app-and-screens.md
Widgets
Custom widget creation, Static, Default CSS, focusability, bindings, Rich renderables, Line API, compound widgets, coordinating via messages, and the builtin widget catalog.
Load when the user asks about creating widgets, choosing a builtin widget, or structuring compound UIs.
references/widgets.md
Layout and CSS
Layout types (vertical, horizontal, grid), utility containers, docking, layers, offsets, CSS selectors, pseudo-classes, combinators, specificity, variables, nested CSS, and the style property reference.
Load when the user asks about arranging widgets, CSS syntax, selectors, or style properties.
references/layout-and-css.md
Events and Actions
Message queue, event handler naming convention, @on decorator, handler arguments, async handlers, event bubbling, custom messages, preventing messages, actions, action strings, namespaces, key bindings, dynamic actions, and the builtin actions list.
Load when the user asks about handling user input, defining key bindings, creating custom events, or action strings.
references/events-and-actions.md
Reactivity
Reactive attributes, var, smart refresh, layout-triggering reactives, validation methods, watch methods, dynamic watchers, recompose, compute methods, set_reactive, mutable reactives (mutate_reactive), and data binding.
Load when the user asks about reactive state, auto-refresh, watchers, computed values, or binding parent state to child widgets.
references/reactivity.md
Testing and Workers
run_test, Pilot API (press, click, hover, pause), terminal size simulation, snapshot testing with pytest-textual-snapshot, run_worker, the @work decorator, worker state lifecycle, thread workers, and worker events.
Load when the user asks about writing tests, simulating input, snapshot comparisons, background HTTP requests, or preventing UI blocking.
references/testing-and-workers.md
Quick Reference
# Minimal app
from textual.app import App, ComposeResult
from textual.widgets import Label
class MyApp(App):
CSS = "Screen { align: center middle; }"
def compose(self) -> ComposeResult:
yield Label("Hello!")
if __name__ == "__main__":
MyApp().run()
# Reactive + watch
from textual.reactive import reactive
from textual.widget import Widget
class Counter(Widget):
count = reactive(0)
def watch_count(self, value: int) -> None:
self.refresh()
def render(self) -> str:
return str(self.count)
# Worker for background HTTP
from textual import work
import httpx
class MyApp(App):
@work(exclusive=True)
async def fetch(self, url: str) -> None:
async with httpx.AsyncClient() as client:
response = await client.get(url)
self.query_one("#result").update(response.text)
# Test with Pilot
async def test_button() -> None:
app = MyApp()
async with app.run_test() as pilot:
await pilot.click("#submit")
assert app.query_one("#result").renderable == "done"
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ccc
This skill should be used when code search is needed (whether explicitly requested or as part of completing a task), when indexing the codebase after changes, or when the user asks about ccc, cocoindex-code, or the codebase index. Trigger phrases include 'search the codebase', 'find code related to', 'update the index', 'ccc', 'cocoindex-code'.
agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
delegate
Quick delegation template for sub-agent prompts. Use when assigning work to a sub-agent, before invoking the Agent tool, or when preparing prompts for specialized agents. Provides the WHERE-WHAT-WHY framework. For comprehensive delegation guidance, activate the agent-orchestration how-to-delegate skill.
swarm-spawning
Spawn agents and teammates in Claude Code swarms. Use when choosing between subagents vs teammates, selecting agent types (Explore, Plan, general-purpose, plugin agents), configuring spawn backends (in-process, tmux, iterm2), or setting environment variables for spawned agents.
knowledge-explorer
Manage the research/ knowledge base (KB) of tool and library research entries. Use when browsing KB topics, adding new research entries, updating existing entries with dated revisions, fetching GitHub repo metadata into a draft KB entry, or migrating old-format entries to skill-spec frontmatter. Triggers on tasks like "what do we have on X", "add this to the KB", "update the KB entry for Y", "fetch github info for owner/repo", or "migrate old entries".
design-anti-patterns
Enforce anti-AI UI design rules based on the Uncodixfy methodology. Use when generating HTML, CSS, React, Vue, Svelte, or any frontend UI code. Prevents "Codex UI" — the generic AI aesthetic of soft gradients, floating panels, oversized rounded corners, glassmorphism, hero sections in dashboards, and decorative copy. Applies constraints from Linear/Raycast/Stripe/GitHub design philosophy: functional, honest, human-designed interfaces. Triggers on: UI generation, dashboard building, frontend component creation, CSS styling, landing page design, or any task producing visual interface code.
Didn't find tool you were looking for?