HTML Style

html-style

Transform barebones HTML into styled output using a specific design system.

Workflow

1. Read the user's HTML
2. Identify elements to style (tables, lists, status text, buttons, sections)
3. Inject <style> block from assets/​base.css
4. Add appropriate classes to HTML elements
5. Add interactive JS if needed (copy buttons, drafts, collapsible sections)

Quick Class Reference

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 <a href="?sort=col">Col ▼</​a>

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:

<div class="section-header">🔴 URGENT</​div>
<div class="section-header">🟠 PENDING</​div>

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

table-filters classes

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>