AGENT SKILL
responsive-layout
Design and verify responsive layouts for desktop, tablet, and mobile views without unwanted page overflow.
使用场景前端开发
- License 许可
- MIT
- 最近更新
- 2026-05-28
- Stars
- ★ 0
- Forks
- 0
01 前言 Front Matter
- name
- responsive-layout
- author
- Siming
- license
- MIT
- version
- 1.0.0
- metadata
- { "siming": { "tags": [ "frontend", "responsive", "layout" ] } }
- description
- Design and verify responsive layouts for desktop, tablet, and mobile views without unwanted page overflow.
03 SKILL.md 正文
Responsive Layout
Use this skill when a page must adapt across devices.
Workflow
- Identify fixed-height regions, scroll containers, headers, sidebars, and tables.
- Make content areas scroll internally instead of allowing the whole page to grow without bounds.
- Use stable dimensions, min-height, max-height, grid, flex, and overflow rules.
- Validate at common widths: 375, 768, 1024, and 1440 px.
Checks
- No accidental body scroll when only a panel should scroll.
- No text or controls overlap.
- Tables keep action columns usable.
04 同仓库更多 Skills
playwright-visual-check
Use Playwright to verify UI layout, screenshots, responsive behavior, and console/runtime errors.
★ 0
api-smoke-tests
Create API smoke tests for auth, CRUD, pagination, empty states, and error paths.
★ 0
secret-handling
Handle secrets, API keys, tokens, and credentials safely in code, logs, configs, and UI.
★ 0
dependency-risk-scan
Evaluate dependency risk, vulnerability scan results, package updates, and safe upgrade strategy.
★ 0
vector-search-quality
Improve vector retrieval quality with chunk strategy, metadata filters, thresholds, and reranking.
★ 0
rag-ingestion-pipeline
Build RAG document ingestion flows with upload, parsing, chunking, embedding, queueing, and status tracking.
★ 0