mcpField
H
html-style

html-style

github.com/shipshitdev设计与 UI38232 次安装2 天前更新
代码仓库

关于 html-style

html-style 是一项将基础 HTML 按指定设计系统添加样式的技能，面向需要整理 HTML 输出的工作流。它提供 CSS 类映射，并说明何时添加交互脚本。

主要功能

  1. 01按设计系统设置 HTML 样式
  2. 02提供状态、趋势和标签类
  3. 03支持表格与分区样式
  4. 04说明折叠区和交互脚本
  5. 05提供暗色主题规则

适用场景

  1. 01为表格和状态文本添加视觉样式
  2. 02为草稿或复制按钮添加交互
  3. 03将 quick-view 或 table-filters 输出套用样式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shipshitdev/skills --skill html-style

安装后在 Claude Code 中输入/html-style确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

plugin.json
README.md
assets/
base.css
references/
style-guide.md

详细介绍

html-style

使用特定设计系统，将基础 HTML 转换为带样式的输出。

工作流

  1. 阅读用户的 HTML
  2. 识别需要设置样式的元素（表格、列表、状态文本、按钮、分区）
  3. 注入 assets/base.css 中的 <style> 块
  4. 为 HTML 元素添加适当的类
  5. 根据需要添加交互式 JS（复制按钮、草稿、可折叠分区）

快速类参考

元素类效果
状态文本.stale .warm .pending红色／绿色／橙色行内文本
趋势.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-label28px 数字，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）：用于数值变化，会自动添加箭头
分区

使用带有 emoji 前缀的 .section-header 来区分内容：

<div class="section-header">🔴 URGENT</div>
<div class="section-header">🟠 PENDING</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 = 'Copied!';
        setTimeout(() => btn.textContent = 'Copy', 1500);
    });
}
深层链接

将 URL 转换为原生应用链接：

  • Telegram：tg://resolve?domain=username
  • SMS：sms:+14155551234

主题

  • 默认：浅色（background: #fff）
  • 深色模式：用户要求深色主题或上下文涉及交易／实时信息时，为 <body> 添加 class="dark"

与结构技能的兼容性

为 quick-view 或 table-filters 的输出设置样式时，适用以下类映射：

quick-view 类
它们的类设置为以下样式
.type-user.status-pending（蓝色边框）
.type-draft.status-pending（橙色边框）
.type-done.status-success（绿色边框）
.source已设置样式（柔和、小号）
.meta已设置样式（柔和标题）
.actions行内按钮组
table-filters 类
它们的类设置为以下样式
.filter-bar带间距的弹性行
.filter-chips行内标签容器
.chip带有 .chip-remove 的深色胶囊
.filter-menu下拉面板（.filter-menu）
.empty-state居中、柔和的文本

base.css 会自动包含这些类的样式。

资源

评论

支持 Markdown