About

Imported from shipshitdev/skills (skills/html-style/SKILL.md). Install upstream with npx skills add shipshitdev/skills --skill html-style. Copyright stays with the author.

html-style

Name: html-style
Author: shipshitdev

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	`<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);
    });
}

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>

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/shipshitdev-skills-html-style/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

shipshitdev-skills-html-style.ocm.jsonjson

{
  "ocm": "1",
  "id": "shipshitdev-skills-html-style",
  "kind": "skill",
  "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.",
  "publisher": "shipshitdev",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "html",
      "styling",
      "frontend",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/shipshitdev/skills",
      "path": "skills/html-style/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/shipshitdev/skills/blob/HEAD/skills/html-style/SKILL.md",
      "key": "shipshitdev/skills/skills/html-style/SKILL.md"
    }
  },
  "instructions": "# html-style\n\nTransform barebones HTML into styled output using a specific design system.\n\n## Workflow\n\n1. Read the user's HTML\n2. Identify elements to style (tables, lists, status text, buttons, sections)\n3. Inject `<style>` block from `assets/base.css`\n4. Add appropriate classes to HTML elements\n5. Add interactive JS if needed (copy buttons, drafts, collapsible sections)\n\n## Quick Class Reference\n\n| Element | Class | Effect |\n|---------|-------|--------|\n| Status text | `.stale` `.warm` `.pending` | Red/green/orange inline text |\n| Trend | `.trend-up` `.trend-down` | Green ↑ / Red ↓ |\n| Cate",
  "cost": {
    "context_tokens": 950
  }
}

Fetch it by URL: GET /api/v1/registry/shipshitdev-skills-html-style/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.