html-style by shipshitdev/library
npx skills add https://github.com/shipshitdev/library --skill html-style使用特定设计系统将基础 HTML 转换为带样式的输出。
assets/base.css 注入 <style> 代码块| 元素 | 类 | 效果 |
|---|---|---|
| 状态文本 | .stale .warm .pending | 红色/绿色/橙色内联文本 |
| 趋势 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
.trend-up.trend-down| 绿色 ↑ / 红色 ↓ |
| 分类标签 | .tag-group .tag-dm .tag-money | 蓝色/紫色/橙色药丸状标签 |
| 状态药丸 | .status-success .status-error .status-pending | 填充绿色/红色/橙色 |
| 筛选器开关 | .filter .filter.active | 描边 / 填充黑色 |
| 时间筛选器 | .pill .pill.active | 小型药丸，激活时为黑色 |
| 统计框 | .stat > .stat-value + .stat-label | 28px 数字，12px 标签 |
| 表格 | 默认或 .table-styled | 极简或带颜色数值 |
| 区块标题 | .section-header | 深色背景条配白色文字 |
| 可折叠 | <details> + <summary> | 原生 HTML 折叠 |
| 洞察 | .insight | 斜体，黄色背景 |
| 等级 | .tier-gold .tier-silver .tier-bronze | 行背景颜色 |
.table-styled 用于：悬停效果、.positive/.negative 单元格颜色、.highlight 行th.sortable 中添加 <a href="?sort=col">Col ▼</a>.stale/.warm/.pending)：用于句子中的内联状态.status-*)：用于徽章式指示器，通常带图标 (✓ ✗ ◷).trend-up/.trend-down)：用于数值变化，自动添加箭头使用带表情符号前缀的 .section-header 实现视觉分隔：
<div class="section-header">🔴 紧急</div>
<div class="section-header">🟠 待处理</div>
当 HTML 包含草稿或复制按钮时，添加此 JS：
function saveDraft(el) {
localStorage.setItem('draft:' + el.dataset.threadId, el.textContent);
}
function copyToClipboard(text, btn) {
navigator.clipboard.writeText(text).then(() => {
btn.textContent = '已复制！';
setTimeout(() => btn.textContent = '复制', 1500);
});
}
将 URL 转换为原生应用链接：
tg://resolve?domain=usernamesms:+14155551234background: #fff)<body> 添加 class="dark"当为来自 quick-view 或 table-filters 的输出添加样式时，适用以下类映射：
| 它们的类 | 样式化为 |
|---|---|
.type-user | .status-pending (蓝色边框) |
.type-draft | .status-pending (橙色边框) |
.type-done | .status-success (绿色边框) |
.source | 已有样式 (弱化，小号) |
.meta | 已有样式 (弱化标题) |
.actions | 内联按钮组 |
| 它们的类 | 样式化为 |
|---|---|
.filter-bar | 带间隙的弹性行 |
.filter-chips | 内联标签容器 |
.chip | 带 .chip-remove 的深色药丸 |
.filter-menu | 下拉面板 (.filter-menu) |
.empty-state | 居中，弱化文本 |
base.css 会自动包含这些类的样式。
<head> 中的 <style> 标签每周安装次数
96
代码仓库
GitHub 星标数
16
首次出现
2026年1月20日
安全审计
安装于
gemini-cli69
codex69
opencode69
claude-code61
github-copilot60
cursor59
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) |
| 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>Weekly Installs
96
Repository
GitHub Stars
16
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli69
codex69
opencode69
claude-code61
github-copilot60
cursor59
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
120,000 周安装
.meta| Already styled (muted header) |
.actions | Inline button group |