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

Claude Code

$ npx -y skills add LiHongwei-cn/lihongwei-cn --skill homepage-layout --agent claude-code

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
@lihongwei-cn
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.

5200 skills1 agent
Get the whole plugin

Stars on GitHub

Momentum

stars in total
5
Star history of LiHongwei-cn/lihongwei-cn on GitHub, a chart by star-history.com

Other skills on lihongwei-cn.

cheat-on-content

cheat-on-content

给所有想把"感觉"变成可校准预测的内容创作者。**方法论通用**——打分 → 盲预测 → T+3d 复盘 → 进化 rubric 的循环适用任何能被量化(播放 / 阅读 / 收听 / 点击)的内容。**rubric…

cheat-bump

cheat-bump

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

cheat-init

cheat-init

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

cheat-migrate

cheat-migrate

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

cheat-persona

cheat-persona

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

More skills from other plugins.

agent-builder

agent-builder

Load immediately after an Agent intent, before the first agent_builder_* call. Governs how you create, configure, test, and…

n8n11d209k
@n8n-io@n8n-ioInstall Skill
browser-use

browser-use

Direct browser control via CDP for web interaction: automation, scraping, testing, screenshots, and site/app work. Also covers…

@browser-use@browser-useInstall Skill
agent-browser

agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling…

@vercel-labs-2@vercel-labs-2Install Skill
add-anydoc

add-anydoc

Add local office-document-to-Markdown conversion to NanoClaw agent containers with the pinned Firecrawl AnyDoc CLI. Use when…

@nanocoai@nanocoaiInstall Skill

Questions about homepage-layout.

Which coding agents can use homepage-layout?
homepage-layout installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.