# Homepage Layout

> >

- **Type:** Skill
- **Install:** `agentstack add skill-lihongwei-cn-lihongwei-cn-homepage-layout`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [LiHongwei-cn](https://agentstack.voostack.com/s/lihongwei-cn)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [LiHongwei-cn](https://github.com/LiHongwei-cn)
- **Source:** https://github.com/LiHongwei-cn/lihongwei-cn/tree/main/global-specs/skills/homepage-layout
- **Website:** https://lihongwei-cn.github.io/lihongwei-cn/

## Install

```sh
agentstack add skill-lihongwei-cn-lihongwei-cn-homepage-layout
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 首页布局自检

> 适用：`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/`）
5. 子页面 footer 添加 GitHub 链接和 counter 显示

## 关键 CSS 约束

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

```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; } }
```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [LiHongwei-cn](https://github.com/LiHongwei-cn)
- **Source:** [LiHongwei-cn/lihongwei-cn](https://github.com/LiHongwei-cn/lihongwei-cn)
- **License:** MIT
- **Homepage:** https://lihongwei-cn.github.io/lihongwei-cn/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-lihongwei-cn-lihongwei-cn-homepage-layout
- Seller: https://agentstack.voostack.com/s/lihongwei-cn
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.