Html Style
- 176 installs
- 31 repo stars
- Updated August 2, 2026
- shipshitdev/library
Apply consistent HTML structure and CSS styling to static or lightweight pages: typography, spacing, responsive layout, and accessible semantic markup.
About
html-style teaches agents to produce clean, styled HTML pages with sensible structure, responsive CSS, and accessible defaults—useful for marketing sites, docs, and lightweight UIs without a heavy framework.
- Semantic HTML landmarks
- Responsive layout patterns
- Typography and spacing systems
- Accessible color and contrast
- Reusable class and component styling
Html Style by the numbers
- 176 all-time installs (skills.sh)
- +4 installs in the week ending Jul 27, 2026 (Skillselion tracking)
- Ranked #901 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/shipshitdev/library --skill html-styleAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 176 |
|---|---|
| repo stars | ★ 31 |
| Last updated | August 2, 2026 |
| Repository | shipshitdev/library ↗ |
What it does
Apply consistent HTML structure and CSS styling to static or lightweight pages: typography, spacing, responsive layout, and accessible semantic markup.
Files
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-styledfor: hover effect,.positive/.negativecell colors,.highlightrows - Sortable: add
th.sortablewith<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>
/* html-style base.css - Inject into <style> tag */
* { box-sizing: border-box; }
:root {
--success-bg: #dcfce7;
--success-text: #166534;
--success-accent: #22c55e;
--info-bg: #dbeafe;
--info-text: #1e40af;
--info-accent: #3b82f6;
--warning-bg: #fef3c7;
--warning-text: #854d0e;
--warning-accent: #f97316;
--error-bg: #fee2e2;
--error-text: #991b1b;
--error-accent: #ef4444;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 20px;
}
body {
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #fff;
color: #1a1a1a;
line-height: 1.5;
}
/* Typography */
h1 { border-bottom: 2px solid #333; padding-bottom: 10px; }
h2 { color: #333; margin-top: 32px; border-bottom: 1px solid #ccc; padding-bottom: 8px; }
h3 { color: #333; margin-top: 24px; }
code, pre, .mono { font-family: 'SF Mono', Monaco, monospace; }
pre { white-space: pre-wrap; background: #f5f5f5; padding: 12px; margin: 8px 0; border-left: 3px solid #333; border-radius: var(--radius-md); }
/* Tables */
table { border-collapse: collapse; width: 100%; margin: 16px 0; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid #e5e5e5; }
th { font-weight: 600; color: #666; font-size: 14px; }
th.sortable a { cursor: pointer; text-decoration: none; color: inherit; }
th.sorted { font-weight: bold; }
.table-styled td.positive { color: var(--success-accent); }
.table-styled td.negative { color: var(--error-accent); }
.table-styled tr:hover { background: #f9f9f9; }
.table-styled .highlight { background: var(--warning-bg); }
/* Status text */
.stale { color: #c00; font-weight: bold; }
.warm { color: #080; }
.pending { color: #f90; font-weight: bold; }
/* Trends */
.trend-up { color: var(--success-accent); }
.trend-up::after { content: ' ↑'; }
.trend-down { color: var(--error-accent); }
.trend-down::after { content: ' ↓'; }
.trend-neutral { color: #666; }
/* Tags */
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 0.8em; margin-left: 8px; }
.tag-group { background: #e3f2fd; color: #1565c0; }
.tag-dm { background: #f3e5f5; color: #7b1fa2; }
.tag-money { background: #fff3e0; color: #e65100; }
/* Status pills */
.status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.85em; color: white; }
.status-success { background: var(--success-accent); }
.status-error { background: var(--error-accent); }
.status-pending { background: var(--warning-accent); }
.status-info { background: var(--info-accent); }
/* Filter pills */
.filter { display: inline-block; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid #e5e5e5; background: white; cursor: pointer; text-decoration: none; color: #1a1a1a; }
.filter.active { background: #1a1a1a; color: white; border-color: #1a1a1a; }
.pill { padding: 6px 12px; border-radius: var(--radius-sm); text-decoration: none; color: #666; }
.pill.active { background: #333; color: white; }
/* Stats */
.stat { display: inline-block; margin: 8px 24px 8px 0; }
.stat-value { font-size: 28px; font-weight: bold; }
.stat-label { font-size: 12px; color: #666; }
/* Cards */
.card-success { background: var(--success-bg); border-radius: var(--radius-lg); padding: 16px; }
.card-success .title { color: var(--success-text); }
.card-error { background: var(--error-bg); border-radius: var(--radius-lg); padding: 16px; }
.card-error .title { color: var(--error-text); }
.card-warning { background: var(--warning-bg); border-radius: var(--radius-lg); padding: 16px; }
.card-warning .title { color: var(--warning-text); }
.card-info { background: var(--info-bg); border-radius: var(--radius-lg); padding: 16px; }
.card-info .title { color: var(--info-text); }
/* Interactive */
details { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px solid #eee; }
summary { cursor: pointer; font-size: 1.1em; font-weight: 500; }
button, .btn { cursor: pointer; padding: 4px 12px; border-radius: var(--radius-md); border: 1px solid #e5e5e5; background: white; }
button:hover, .btn:hover { background: #f5f5f5; }
/* Sections */
.section-header { background: #333; color: white; padding: 10px 15px; margin: 30px 0 20px 0; border-radius: var(--radius-md); }
.insight { font-style: italic; color: #555; margin: 8px 0; background: #fffde7; padding: 8px; border-radius: var(--radius-sm); }
.fallback { font-size: 0.9em; color: #666; margin: 8px 0; }
/* Tiers */
.tier-gold { background: #fff8e1; }
.tier-silver { background: #f5f5f5; }
.tier-bronze { background: #fff3e0; }
/* quick-view compatibility */
.type-user { border-left: 3px solid var(--info-accent); padding-left: 1rem; margin: 8px 0; }
.type-draft { border-left: 3px solid var(--warning-accent); padding-left: 1rem; margin: 8px 0; }
.type-done { border-left: 3px solid var(--success-accent); padding-left: 1rem; margin: 8px 0; }
.source { color: #666; font-size: 0.75rem; }
.source a { color: #666; text-decoration: none; }
.source a:hover { color: var(--info-accent); }
.meta { color: #666; font-size: 0.875rem; margin-bottom: 1rem; }
.actions { display: flex; gap: 8px; margin-top: 8px; }
.truncate { max-height: 200px; overflow: hidden; position: relative; }
.truncate.expanded { max-height: none; }
/* table-filters compatibility */
.filter-bar { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #333; color: white; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.85em; }
.chip-remove { cursor: pointer; opacity: 0.7; margin-left: 4px; }
.chip-remove:hover { opacity: 1; }
.filter-search { flex: 1; min-width: 150px; padding: 6px 12px; border: 1px solid #e5e5e5; border-radius: var(--radius-md); }
.filter-clear { padding: 6px 12px; background: none; border: none; color: #666; cursor: pointer; }
.filter-menu { position: absolute; background: white; border: 1px solid #e5e5e5; border-radius: var(--radius-md); padding: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; }
.sort-control { margin-left: auto; font-size: 0.9em; color: #666; }
.empty-state { text-align: center; padding: 40px; color: #666; }
/* Dark mode */
body.dark { background: #0a0a0a; color: #e5e5e5; }
body.dark pre { background: #1a1a1a; border-left-color: #444; }
body.dark th, body.dark td { border-color: #333; }
body.dark .section-header { background: #1f1f1f; }
body.dark button, body.dark .btn { background: #1a1a1a; border-color: #333; color: #e5e5e5; }
body.dark .filter { background: #1a1a1a; border-color: #333; color: #e5e5e5; }
body.dark .filter.active { background: #e5e5e5; color: #0a0a0a; }
body.dark .filter-search { background: #1a1a1a; border-color: #333; color: #e5e5e5; }
body.dark .filter-menu { background: #1a1a1a; border-color: #333; }
body.dark .source { color: #999; }
body.dark .source a { color: #999; }
body.dark .meta { color: #999; }
{
"name": "html-style",
"version": "1.0.0",
"description": ">",
"author": {
"name": "Ship Shit Dev",
"email": "hello@shipshit.dev",
"url": "https://shipshit.dev"
},
"license": "MIT",
"skills": "."
}
html-style
Apply opinionated styling to barebones HTML.
When to Use
- User has plain/unstyled HTML
- "style this", "make this look good"
- After using
quick-viewortable-filters
What It Does
1. Reads the HTML 2. Injects base.css styles 3. Adds appropriate classes 4. Handles dark mode
Key Classes
| Class | Effect |
|---|---|
.stale .warm .pending | Status text colors |
.trend-up .trend-down | Green/red with arrows |
.status-success .status-error | Colored pills |
.section-header | Dark bar divider |
Resources
assets/base.css- Full stylesheetreferences/style-guide.md- Detailed patterns
Style Guide Reference
Table of Contents
1. Base Layout 2. Colors 3. Typography 4. Tables 5. Tags & Pills 6. Status Indicators 7. Stat Boxes 8. Interactive Elements 9. Section Headers 10. Dark Mode
---
Base Layout
* { box-sizing: border-box; }
body {
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #fff;
color: #1a1a1a;
line-height: 1.5;
}Width tiers:
900px- content pages (outreach, drafts)1000px- table-heavy pages1400px- two-panel dashboards
---
Colors
CSS Variables
:root {
/* Semantic backgrounds */
--success-bg: #dcfce7;
--success-text: #166534;
--success-accent: #22c55e;
--info-bg: #dbeafe;
--info-text: #1e40af;
--info-accent: #3b82f6;
--warning-bg: #fef3c7;
--warning-text: #854d0e;
--warning-accent: #f97316;
--error-bg: #fee2e2;
--error-text: #991b1b;
--error-accent: #ef4444;
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 20px;
}Status Text (inline)
.stale { color: #c00; font-weight: bold; }
.warm { color: #080; }
.pending { color: #f90; font-weight: bold; }Trend Colors
.trend-up { color: #22c55e; }
.trend-up::after { content: ' ↑'; }
.trend-down { color: #ef4444; }
.trend-down::after { content: ' ↓'; }---
Typography
h1 { border-bottom: 2px solid #333; padding-bottom: 10px; }
h2 { color: #333; margin-top: 32px; border-bottom: 1px solid #ccc; padding-bottom: 8px; }
h3 { color: #333; margin-top: 24px; }
/* Monospace for code/data */
code, pre, .mono {
font-family: 'SF Mono', Monaco, monospace;
}
pre {
white-space: pre-wrap;
background: #f5f5f5;
padding: 12px;
margin: 8px 0;
border-left: 3px solid #333;
border-radius: var(--radius-md);
}---
Tables
Default (minimal)
table { border-collapse: collapse; width: 100%; margin: 16px 0; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid #e5e5e5; }
th { font-weight: 600; color: #666; font-size: 14px; }Sortable Headers
th.sortable a {
cursor: pointer;
text-decoration: none;
color: inherit;
}
th.sorted { font-weight: bold; }
/* Append ▼ to sorted column text */Styled Table (opt-in)
.table-styled td.positive { color: var(--success-accent); }
.table-styled td.negative { color: var(--error-accent); }
.table-styled tr:hover { background: #f9f9f9; }
.table-styled .highlight { background: var(--warning-bg); }---
Tags & Pills
Category Tags
For categorizing items (group, DM, money, etc.)
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: var(--radius-sm);
font-size: 0.8em;
margin-left: 8px;
}
.tag-group { background: #e3f2fd; color: #1565c0; }
.tag-dm { background: #f3e5f5; color: #7b1fa2; }
.tag-money { background: #fff3e0; color: #e65100; }Status Pills
For state indicators (Paid, Failed, Pending)
.status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: 0.85em;
color: white;
}
.status-success { background: var(--success-accent); }
.status-error { background: var(--error-accent); }
.status-pending { background: var(--warning-accent); }
.status-info { background: var(--info-accent); }Filter Pills
For toggleable filters
.filter {
display: inline-block;
padding: 6px 12px;
border-radius: var(--radius-pill);
border: 1px solid #e5e5e5;
background: white;
cursor: pointer;
text-decoration: none;
color: #1a1a1a;
}
.filter.active {
background: #1a1a1a;
color: white;
border-color: #1a1a1a;
}Time Filter Pills
.pill {
padding: 6px 12px;
border-radius: var(--radius-sm);
text-decoration: none;
color: #666;
}
.pill.active {
background: #333;
color: white;
}---
Status Indicators
Inline Status Text
<span class="stale">STALE: needs response</span>
<span class="warm">Active conversation</span>
<span class="pending">Waiting for reply</span>Status Cards (full-width)
.card-success {
background: var(--success-bg);
border-radius: var(--radius-lg);
padding: 16px;
}
.card-success .title { color: var(--success-text); }
.card-error {
background: var(--error-bg);
border-radius: var(--radius-lg);
padding: 16px;
}
.card-error .title { color: var(--error-text); }---
Stat Boxes
.stat {
display: inline-block;
margin: 8px 24px 8px 0;
}
.stat-value {
font-size: 28px;
font-weight: bold;
}
.stat-label {
font-size: 12px;
color: #666;
}Usage:
<div class="stat">
<div class="stat-value">8,017</div>
<div class="stat-label">Total Items</div>
</div>---
Interactive Elements
Collapsible Sections
details {
margin: 20px 0;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
summary {
cursor: pointer;
font-size: 1.1em;
font-weight: 500;
}Contenteditable Drafts
<pre contenteditable="true"
data-thread-id="tg:dm:username"
data-original="original text"
onblur="saveDraft(this)">editable draft</pre>function saveDraft(el) {
localStorage.setItem('draft:' + el.dataset.threadId, el.textContent);
}
function restoreDrafts() {
document.querySelectorAll('[data-thread-id]').forEach(el => {
const saved = localStorage.getItem('draft:' + el.dataset.threadId);
if (saved) el.textContent = saved;
});
}
document.addEventListener('DOMContentLoaded', restoreDrafts);Copy Button
function copyToClipboard(text, btn) {
navigator.clipboard.writeText(text).then(() => {
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = 'Copy', 1500);
});
}button, .btn {
cursor: pointer;
padding: 4px 12px;
border-radius: var(--radius-md);
border: 1px solid #e5e5e5;
background: white;
}
button:hover, .btn:hover {
background: #f5f5f5;
}Deep Links
<a href="tg://resolve?domain=username">Open Telegram</a>
<a href="sms:+14155551234">Send SMS</a>---
Section Headers
.section-header {
background: #333;
color: white;
padding: 10px 15px;
margin: 30px 0 20px 0;
border-radius: var(--radius-md);
}Usage with emoji prefix:
<div class="section-header">🔴 URGENT - Needs Action</div>
<div class="section-header">🟠 PENDING - Follow Up</div>
<div class="section-header">🟡 OPPORTUNITY - Proactive</div>---
Dark Mode
Apply when user requests dark/trading/real-time context.
body.dark {
background: #0a0a0a;
color: #e5e5e5;
}
body.dark pre {
background: #1a1a1a;
border-left-color: #444;
}
body.dark table {
border-color: #333;
}
body.dark th, body.dark td {
border-color: #333;
}
body.dark .section-header {
background: #1f1f1f;
}
body.dark button, body.dark .btn {
background: #1a1a1a;
border-color: #333;
color: #e5e5e5;
}---
Insight/Context Callouts
.insight {
font-style: italic;
color: #555;
margin: 8px 0;
background: #fffde7;
padding: 8px;
border-radius: var(--radius-sm);
}
.fallback {
font-size: 0.9em;
color: #666;
margin: 8px 0;
}---
Tier Coloring (Leaderboards)
.tier-gold { background: #fff8e1; }
.tier-silver { background: #f5f5f5; }
.tier-bronze { background: #fff3e0; }Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k