playbooks

home / skills / rohunvora / cool-claude-skills / html-style

html-style skill

/skills/html-style

This skill transforms bare HTML into a cohesive, styled design by injecting base CSS and applying standardized classes.

npx playbooks add skill rohunvora/cool-claude-skills --skill html-style

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
4.1 KB
---
name: html-style
description: >
  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.
---

# 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:
```html
<div class="section-header">🔴 URGENT</div>
<div class="section-header">🟠 PENDING</div>
```

### Interactive Elements
When HTML has drafts or copy buttons, add this JS:
```javascript
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](references/style-guide.md) for detailed CSS patterns and examples
- **Base CSS**: Inject [assets/base.css](assets/base.css) into `<style>` tag in `<head>`

Overview

This skill applies an opinionated, cohesive design system to barebones HTML. It converts plain markup into a consistent, usable UI by injecting a base stylesheet, adding utility classes, and optionally wiring small interactive behaviors. Use it to quickly make tables, lists, status indicators, buttons, and sections look polished and consistent.

How this skill works

The skill scans provided HTML for target elements (tables, lists, status text, buttons, sections, tags, stats) and injects a single <style> block derived from the design system. It then annotates elements with appropriate classes (e.g., .table-styled, .status-success, .tag-group, .trend-up) and inserts minimal JavaScript for copy buttons, drafts, and collapsible sections when needed. The result is immediate visual consistency with options for light or dark themes by toggling a body class.

When to use it

  • You have plain or minimally styled HTML and want a unified visual system.
  • You need quick, consistent styling for tables, lists, status badges, or stat boxes.
  • You’re preparing HTML previews or embeds that must look production-ready without building a full CSS pipeline.
  • You want small interactive behaviors added (copy buttons, drafts, collapsibles) without writing JS yourself.

Best practices

  • Provide the raw HTML fragment so the skill can add classes and style tags in context.
  • Mark elements semantically (tables, th/td, details/summary, buttons) to get the best automatic mappings.
  • Choose .table-styled for tables that need hover, colored cells, or row highlights.
  • Use status text classes (.stale/.warm/.pending) for inline mentions and status pills (.status-*) for badge-like UI.
  • Request dark mode explicitly by adding class="dark" to <body> when appropriate.

Example use cases

  • Style an exported admin table to add hover, sortable headers, and positive/negative cell colors.
  • Convert a plain task list into a compact dashboard with status pills and trend arrows.
  • Wrap a set of user messages with tag pills, stat boxes, and a section header for an app mockup.
  • Add copy-to-clipboard buttons and draft persistence to comment or note areas for a prototype.
  • Turn plain CSV-generated HTML into a readable, highlighted report with tiered row backgrounds.

FAQ

Will this change my HTML structure?

The skill adds classes and injects a style block and small JS snippets; it avoids destructive DOM changes and preserves original semantic elements.

How do I enable dark mode?

Request dark mode or add class="dark" to the <body>. The injected CSS will switch to the dark theme automatically.