shipshitdev/html-style
bundles/frontend/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/typescript-refactor
development
VerifiedTrustedCommunity
TypeScript refactoring and modernization guidelines from a principal specialist perspective. This skill should be used when refactoring, reviewing, or modernizing TypeScript code to ensure type safety, compiler performance, and idiomatic patterns. Triggers on tasks involving TypeScript type architecture, narrowing, generics, error handling, or migration to modern TypeScript features.
30SKILL.mdUpdated Jul 14, 2026
shipshitdev/typescript-expert
tools
VerifiedTrustedCommunity
Resolves TypeScript and JavaScript problems across type-level programming, performance, monorepo management, migration, and modern tooling. Invoke when diagnosing "type instantiation excessively deep" errors, migrating JS to TS, configuring strict tsconfig, debugging module resolution, or choosing between Biome/ESLint/Turborepo/Nx.
30SKILL.mdUpdated Jul 14, 2026
shipshitdev/turborepo
tools
VerifiedTrustedCommunity
Turborepo monorepo build system guidance. Triggers on: `turbo.json`, task pipelines, `dependsOn`, caching, remote cache, the `turbo` CLI, `--filter`, `--affected`, CI optimization, environment variables, internal packages, monorepo structure, and package boundaries. Use when the user configures tasks or workflows, creates packages, sets up a monorepo, shares code between apps, runs changed packages, debugs cache behavior, or works in an `apps/` plus `packages/` workspace.
30SKILL.mdUpdated Jul 14, 2026
shipshitdev/tailwind
tools
VerifiedTrustedCommunity
Provides Tailwind CSS v4 performance optimization and best practices guidelines. Triggers when writing, reviewing, or refactoring Tailwind CSS v4 code; when working with Tailwind configuration, @theme directive, utility classes, responsive design, dark mode, container queries, or CSS generation optimization.
30SKILL.mdUpdated Jul 14, 2026