html-style

rohunvora's avatarfrom rohunvora

Apply opinionated styling to barebones HTML. Use when user has plain/unstyled HTML and wants to apply consistent visual styling. Triggers: style this HTML, apply styling, make this look good, /html-style, or when user shares HTML that needs CSS. Transforms tables, lists, status indicators, buttons, and layouts into a cohesive design system.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 2, 2026
[Developer Tools]

When & Why to Use This Skill

This Claude skill provides an automated solution for transforming barebones, unstyled HTML into a professional and visually cohesive design system. By injecting a pre-defined CSS framework and mapping elements to specific UI components—such as status pills, trend indicators, and interactive tables—it enables users to quickly generate production-ready visual interfaces from raw code snippets.

Use Cases

  • Case 1: Converting raw data tables into interactive, sortable dashboards with visual status indicators and trend arrows.
  • Case 2: Applying consistent branding and professional styling to barebones HTML reports or documentation generated by AI.
  • Case 3: Enhancing developer productivity by automatically adding interactive elements like copy-to-clipboard buttons and collapsible sections to static HTML.
  • Case 4: Rapidly prototyping UI components with built-in support for dark mode and mobile-responsive layouts using a standardized class system.
namehtml-style
description>
HTML and wants to apply consistent visual styling. Triggersstyle this HTML,

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 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 <details> + <summary> 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 <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);
    });
}

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