skills.rest
cjthompson
cjthompsonCOMMUNITY
Explore all skills by this author →
GitHub

textual-css-reference

Validates Textual TUI CSS properties and values against the framework's supported styling syntax.

1|Updated Feb 25, 2026
Search Tags:#python#css#styling#reference#terminal#tui#textual
One-click install
npx skills add https://github.com/cjthompson/claude-code-config --skill textual-css-reference-cjthompson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: textual-css-reference
Source: https://github.com/cjthompson/claude-code-config/tree/main/plugins/textual/skills/textual-css-reference
Command: npx skills add https://github.com/cjthompson/claude-code-config --skill textual-css-reference-cjthompson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Textual's CSS dialect differs from web CSS, so developers frequently write invalid properties like display: flex or position: relative that cause runtime errors. This Skill provides a complete reference of valid Textual CSS properties, values, and types so styling code works the first time. ## Core Features & Use Cases - Valid Property Lookup: Complete tables of supported properties for layout, spacing, borders, grid, scrollbars, links, and text styling with their accepted values. - Invalid Pattern Detection: Lists unsupported web CSS patterns (e.g., display: flex, grid-template-columns, 3-value margins) and their correct Textual equivalents. - Type Reference: Documents Textual's <color>, <text-style>, <border>, and <scalar> types including fractional, viewport-relative, and container-relative units. - Use Case: While building a Textual dashboard, you need a two-column grid with a rounded border. Check this reference to confirm layout: grid, grid-columns: 1fr 2fr, and border: round orange are the correct syntax before running the app. ## Quick Start Ask the AI to check whether your Textual CSS snippet uses valid properties and to fix any unsupported web CSS patterns.

Frequently Asked Questions about textual-css-reference

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a horizontal layout in Textual CSS?▼

Use `layout: horizontal` on the container instead of web CSS `display: flex`. Textual supports `grid`, `horizontal`, and `vertical` layout values, and `display: flex` will cause a runtime error.

What CSS properties does Textual support for grid layouts?▼

Textual grid uses `grid-size`, `grid-columns`, `grid-rows`, `grid-gutter`, `column-span`, and `row-span`. Web properties like `grid-template-columns` are invalid and must be replaced with `grid-columns`.

Why does display: flex cause an error in Textual?▼

Textual's `display` property only accepts `block` and `none` for showing or hiding widgets. Flexbox does not exist in Textual; use `layout: horizontal` or `layout: vertical` to arrange child widgets instead.

Can I use margin: auto or position: absolute in Textual CSS?▼

No, `margin: auto` and `padding: auto` are unsupported, and `absolute` is the only valid `position` value. Use explicit margin integers, `dock`, or `offset` for positioning instead of `top`/`left` properties.

What color formats are valid in Textual CSS?▼

Textual accepts named colors, hex formats (#RGB, #RRGGBB, with optional alpha), rgb(), rgba(), hsl(), hsla() functions, and CSS variables prefixed with $. These apply to color, background, border, and scrollbar properties.

Related Skills

Explore More Software Engineering Skills→
KyleKingKyleKing
3

textual

Guides developers in building Textual-based TUI applications with structured advice.

Community
Intermediate
bitranoxbitranox
1

coding-python-textual

Provides reference documentation for building terminal and web UIs with the Python Textual framework.

Community
Intermediate
christophevgchristophevg

textual

Guide Textual framework implementation for interactive terminal user interfaces in Python.

Community
Intermediate
basilisk-labsbasilisk-labs
72

agentplane-task-closure-recovery

Diagnose and resolve Agentplane task synchronization failures with Git and PR states.

Official
Advanced