shipshitdev/html-style
skills/html-style/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add shipshitdev/library html-styleInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 20, 2026, 5:25 AM18.5s4 files scanned
SKILL.md
- 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.
- version:
- 1.0.0
- tags:
- html, styling, frontend
html-style
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 fromassets/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-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>
Related Skills
shipshitdev/weekly-review
development
VerifiedTrustedCommunity
Coordinates a weekly engineering review of board accuracy, recent code changes, operational health, and scoped cleanup. Use for a recurring repository health review or a review of the last several days.
35SKILL.mdUpdated Sep 6, 2026
shipshitdev/project-board
testing
VerifiedTrustedCommunity
Audits project board configuration and prepares explicitly requested setup, copy, or normalization changes while preserving the existing workflow and provider boundaries. Use when inspecting a board's fields, columns, scope, or configuration.
35SKILL.mdUpdated Sep 6, 2026
shipshitdev/board-sync
testing
VerifiedTrustedCommunity
Reconciles a project board with current work and delivery evidence, reports incomplete coverage and metadata gaps, and applies only approved provider-supported field changes. Use when auditing board drift, reviewing blocked work, or assessing upcoming delivery.
35SKILL.mdUpdated Sep 6, 2026
shipshitdev/how
development
VerifiedTrustedCommunity
Walk through how a subsystem works. Use for "how does X work", code walkthroughs before changing something, and placement or ownership questions. Explains architecture, runtime flow, and onboarding mental models. Can critique architecture. Use why for motivation.
35SKILL.mdUpdated Aug 31, 2026