# Responsive

> 当用户发现页面在手机上显示有问题、布局错乱、需要适配移动端时使用 — 检查并修复响应式问题

- **Type:** Skill
- **Install:** `agentstack add skill-lightpointventures-claude-code-starter-responsive`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [lightpointventures](https://agentstack.voostack.com/s/lightpointventures)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [lightpointventures](https://github.com/lightpointventures)
- **Source:** https://github.com/lightpointventures/claude-code-starter/tree/main/skills/responsive
- **Website:** https://github.com/lighthouse-strategy/claude-code-starter

## Install

```sh
agentstack add skill-lightpointventures-claude-code-starter-responsive
```

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

## About

# 移动端适配

帮用户检查并修复网站在手机和平板上的显示问题。

## 步骤

### 1. 扫描响应式问题

读取项目中的 CSS 和 HTML，检查：

- **Viewport 设置** — 是否有正确的 viewport meta 标签
- **固定宽度** — 是否有硬编码的 px 宽度导致溢出
- **字体大小** — 移动端是否太小（最小 16px）
- **触摸目标** — 按钮和链接是否够大（最小 44x44px）
- **水平滚动** — 是否有元素超出屏幕宽度
- **媒体查询** — 是否有响应式断点
- **图片** — 是否设置了 max-width: 100%
- **导航** — 桌面导航在移动端是否可用

### 2. 输出问题报告

```
## 移动端适配报告

### 必须修复
- [文件:行号] 问题 + 修复方案

### 建议改进
- [文件:行号] 改进建议
```

### 3. 执行修复

用户确认后，修复所有问题：

- 添加 viewport meta 标签
- 固定宽度改为响应式（max-width、百分比、flex/grid）
- 添加移动端媒体查询
- 增大触摸目标尺寸
- 导航改为汉堡菜单（如果需要）

### 4. 验证

> 适配完成。建议用浏览器的设备模拟器检查以下尺寸：
> - 手机：375px（iPhone）、390px（iPhone Pro）
> - 平板：768px（iPad）

## Source & license

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

- **Author:** [lightpointventures](https://github.com/lightpointventures)
- **Source:** [lightpointventures/claude-code-starter](https://github.com/lightpointventures/claude-code-starter)
- **License:** MIT
- **Homepage:** https://github.com/lighthouse-strategy/claude-code-starter

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-lightpointventures-claude-code-starter-responsive
- Seller: https://agentstack.voostack.com/s/lightpointventures
- 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%.