Skip to content
Automation
Skill

/homepage-layout

网站首页布局自检与修复。每次新增/删除/修改项目页面后自动触发, 确保仪表盘无横向滚动条、卡片不重叠、列数随项目数量自适应。 MUST trigger when the user says: "主页布局", "首页排版", "check layout", "fix homepage", "检查页面", or after any project page add/remove/rename. Also triggered by any change to index.html or addition of new project directories.

From plugin
lihongwei-cn
5200 skills1 agent
Install
$ npx -y skills add LiHongwei-cn/lihongwei-cn --skill homepage-layout --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/homepage-layout

Context preview

The summary Claude sees to decide when to auto-load this skill.

网站首页布局自检与修复。每次新增/删除/修改项目页面后自动触发, 确保仪表盘无横向滚动条、卡片不重叠、列数随项目数量自适应。 MUST trigger when the user says: "主页布局", "首页排版", "check layout", "fix homepage", "检查页面", or after any project page add/remove/rename. Also triggered by any change to index.html or addition of new project directories.

SKILL.md

homepage-layout.SKILL.md
name: homepage-layout
description: >
  网站首页布局自检与修复。每次新增/删除/修改项目页面后自动触发,
  确保仪表盘无横向滚动条、卡片不重叠、列数随项目数量自适应。
  MUST trigger when the user says: "主页布局", "首页排版", "check layout",
  "fix homepage", "检查页面", or after any project page add/remove/rename.
  Also triggered by any change to index.html or addition of new project directories.

首页布局自检

> 适用:`lihongwei-cn` GitHub Pages 主页 `index.html`

检查并修复主页布局,确保每项标准都达标。

检查清单

逐项验证,不达标的立即修复:

  • [ ] **无横向滚动条**:`body { overflow-x: hidden }` 已设置
  • [ ] **容器不溢出**:`.container` 使用 `max-width` 而非 `width`,且 `width: 100%`
  • [ ] **仪表盘自适应**:`.dashboard` 使用 `grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))`
  • [ ] **卡片不重叠**:每个 `.card` 的 `.card-body { min-width: 0 }`,文本有 `overflow: hidden; text-overflow: ellipsis; white-space: nowrap`
  • [ ] **分类区块等宽等高**:同一行的 `.cat-section` 高度一致,不会因内容多少而参差
  • [ ] **响应式断点合理**:小屏(≤540px)下 `grid-template-columns: 1fr`
  • [ ] **所有分类都有至少 1 个项目**:空分类应从 HTML 中移除
  • [ ] **所有卡片链接可达**:`href` 指向存在的目录,且该目录包含 `index.html`

修复流程

1. 读 `index.html`,核对以上清单 2. CSS 问题直接改 `index.html` 3. 链接验证:检查每个 `href` 是否存在对应目录 4. 修改完成后 `git add` + `git commit` + `git push`

新增项目时的额外检查

当新增项目页面时,除了以上检查,还需:

1. 确认新项目归类到哪个 `.cat-section` 2. 若现有分类都不合适,新建分类区块 3. 在 `stats.json` 中添加新项目的初始计数 4. 各子页面添加 page counter(使用 `counterapi.dev`,命名空间 `lihongwei-cn/<project-id>`) 5. 子页面 footer 添加 GitHub 链接和 counter 显示

关键 CSS 约束

这些值不可随意改动,否则会造成布局问题:

.container { max-width: 1100px; width: 100%; }
.dashboard { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
body { overflow-x: hidden; }
.card-body { min-width: 0; }
@media(max-width: 540px) { .dashboard { grid-template-columns: 1fr; } }
Read more
Ships withlihongwei-cn

MUNDO - THE EMPEROR. Complete AI orchestration system with 1208 skills, 25 capability modules, self-evolving, collective consciousness. GitHub Actions 24/7 automation.

Get the whole plugin
Stats
5
Stars
1
Forks
Maintained
Maintenance
Python
Language
MIT
License
1mo ago
Last commit
4mo ago
Created

Repo: LiHongwei-cn/lihongwei-cn

Other skills on lihongwei-cn.

cheat-on-content
Skill

cheat-on-content

给所有想把"感觉"变成可校准预测的内容创作者。**方法论通用**——打分 → 盲预测 → T+3d 复盘 → 进化 rubric 的循环适用任何能被量化(播放 / 阅读 / 收听 / 点击)的内容。**rubric 是循环的内容,不是循环本身**——当前内置一份观点视频 rubric(参考博主 25+…

cheat-bump
Skill

cheat-bump

提议并执行 rubric 或 bucket 升级。两种模式:**完整 rubric bump**(最高风险动作,5 步强制 + 跨模型审核)和 **--bucket-only 轻量重校**(只换 bucket 边界,不动 rubric 公式)。**Phase 2 强制走 cheat-score-blind…

cheat-init
Skill

cheat-init

cheat-on-content 的首次 onboarding 与脚手架创建器。统一流程——所有用户都走相同 5 阶段闭环,唯一区别是"发过视频的人"会在 init 时多一步:抓取已有视频建立历史 context(用于后续 cheat-seed 给更贴合的选题、更准的…

cheat-migrate
Skill

cheat-migrate

把老用户的 .cheat-state.json 升级到当前 schema_version。读 migrations/registry.md 算迁移链,按顺序应用每一步迁移文件。幂等:跑两次结果一样。失败停在中间版本不前进。触发词:"迁移"/"升级 state"/"migrate"/"我的 state…

cheat-persona
Skill

cheat-persona

从复盘评论数据派生 / 刷新账号的受众画像,写入 audience.md。这是和 rubric 平行的第二个派生物——rubric 答"怎么打分",persona 答"谁在看"。cheat-seed 选题 / 写稿时读它。**audience.md 含实绩信号,cheat-score-blind…