html-style
Transform barebones HTML into styled output using a specific design system.
Workflow
Read the user's HTML
Identify elements to style (tables, lists, status text, buttons, sections)
Inject <style> block from assets/base.css
Add appropriate classes to HTML elements
Add interactive JS if needed (copy buttons, drafts, collapsible sections)
Quick Class Reference
Element Class Effect
Status text .stale .warm .pending Red/green/orange inline text
Trend .trend-up .trend-down Green ↑ / Red ↓
Category tag .tag-group .tag-dm .tag-money Blue/purple/orange pill
Status pill .status-success .status-error .status-pending Filled green/red/orange
Filter toggle .filter .filter.active Outline / filled black
Time filter .pill .pill.active Small pill, black when active
Stat box .stat > .stat-value + .stat-label 28px number, 12px label
Table default or .table-styled Minimal or colored values
Section header .section-header Dark bar with white text
Collapsible Native HTML collapse
Insight .insight Italic, yellow background
Tier .tier-gold .tier-silver .tier-bronze Row background colors
Element Styling Rules
Tables
Default: minimal borders, no hover
Add .table-styled for: hover effect, .positive/.negative cell colors, .highlight rows
Sortable: add th.sortable with Col ▼
Status Indicators
Text status (.stale/.warm/.pending): Use for inline status in sentences
Status pills (.status-*): Use for badge-style indicators, typically with icon (✓ ✗ ◷)
Trends (.trend-up/.trend-down): Use for numeric changes, adds arrow automatically
Sections
Use .section-header with emoji prefix for visual breaks:
Interactive Elements
When HTML has drafts or copy buttons, add this JS:
function saveDraft(el) { localStorage.setItem('draft:' + el.dataset.threadId, el.textContent); } function copyToClipboard(text, btn) { navigator.clipboard.writeText(text).then(() => { btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = 'Copy', 1500); }); }
Deep Links
Convert URLs to native app links:
Telegram: tg://resolve?domain=username SMS: sms:+14155551234 Theme Default: Light (background: #fff) Dark mode: Add class="dark" to <body> when user requests dark theme or context is trading/real-time Compatibility with Structure Skills
When styling output from quick-view or table-filters, these class mappings apply:
quick-view classes Their Class Style As .type-user .status-pending (blue border) .type-draft .status-pending (orange border) .type-done .status-success (green border) .source Already styled (muted, small) .meta Already styled (muted header) .actions Inline button group table-filters classes Their Class Style As .filter-bar Flex row with gap .filter-chips Inline chip container .chip Dark pill with .chip-remove .filter-menu Dropdown panel (.filter-menu) .empty-state Centered, muted text
The base.css includes styles for these classes automatically.
Resources Full style reference: Read references/style-guide.md for detailed CSS patterns and examples Base CSS: Inject assets/base.css into <style> tag in <head>