From shipshitdev-frontend
Applies opinionated CSS styling to barebones HTML for tables, lists, status indicators, buttons, sections, and layouts. Adds interactive JS for copy buttons and collapsibles.
npx claudepluginhub shipshitdev/libraryThis skill uses the workspace's default tool permissions.
Transform barebones HTML into styled output using a specific design system.
Applies opinionated CSS styling to barebones HTML for tables, lists, status indicators, buttons, sections, and layouts. Adds interactive JS for copy buttons and collapsibles.
Generates standalone HTML components and composes them into branded full pages from design systems, with embedded CSS, responsive design, and brand integration. Invoke via /html-page or /html-page-quick.
Converts Stitch designs to semantic HTML5 + CSS with custom properties, dark mode, mobile-first responsiveness, and zero dependencies. For WebViews, Capacitor, Ionic, static sites.
Share bugs, ideas, or general feedback.
Transform barebones HTML into styled output using a specific design system.
<style> block from assets/base.css| 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 |
.table-styled for: hover effect, .positive/.negative cell colors, .highlight rowsth.sortable with <a href="?sort=col">Col ▼</a>.stale/.warm/.pending): Use for inline status in sentences.status-*): Use for badge-style indicators, typically with icon (✓ ✗ ◷).trend-up/.trend-down): Use for numeric changes, adds arrow automaticallyUse .section-header with emoji prefix for visual breaks:
<div class="section-header">🔴 URGENT</div>
<div class="section-header">🟠 PENDING</div>
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:
tg://resolve?domain=usernamesms:+14155551234background: #fff)class="dark" to <body> when user requests dark theme or context is trading/real-timeWhen styling output from quick-view or table-filters, these class mappings apply:
| 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 |
| 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.
<style> tag in <head>