responsive-design
Use when implementing responsive CSS layouts: mobile-first breakpoints, container queries, fluid typography, Grid and Flexbox, and responsive images. Covers touch targets, logical properties and common overflow issues.
- License 许可
- MIT
- 所属仓库
- monoes/monomind
- 最近更新
- 2026-11-10
- Stars
- ★ 23
- Forks
- 2
01 前言 Front Matter
- name
- responsive-design
- tags
- [ "design", "frontend", "ui", "accessibility" ]
- tools
- [ "monodesign_detect", "monodesign_fix" ]
- source
- https://github.com/wshobson/agents
- license
- MIT
- description
- Use when implementing responsive CSS layouts: mobile-first breakpoints, container queries, fluid typography, Grid and Flexbox, and responsive images. Covers touch targets, logical properties and common overflow issues.
- source_path
- plugins/ui-design/skills/responsive-design
- source_commit
- 4236bb91f8395b0435f1d8b8baf9e8e4c69a8620
02 资源文件 5
- 许可证LICENSE.txt1.0 KB
- 参考文档references/breakpoint-strategies.md10.4 KB
- 参考文档references/container-queries.md9.7 KB
- 参考文档references/details.md10.4 KB
- 参考文档references/fluid-layouts.md10.5 KB
03 SKILL.md 正文
Responsive Design
Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.
When to Use This Skill
- Implementing mobile-first responsive layouts
- Using container queries for component-based responsiveness
- Creating fluid typography and spacing scales
- Building complex layouts with CSS Grid and Flexbox
- Designing breakpoint strategies for design systems
- Implementing responsive images and media
- Creating adaptive navigation patterns
- Building responsive tables and data displays
Detailed patterns and worked examples
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Best Practices
- Mobile-First: Start with mobile styles, enhance for larger screens
- Content Breakpoints: Set breakpoints based on content, not devices
- Fluid Over Fixed: Use fluid values for typography and spacing
- Container Queries: Use for component-level responsiveness
- Test Real Devices: Simulators don't catch all issues
- Performance: Optimize images, lazy load off-screen content
- Touch Targets: Maintain 44x44px minimum on mobile
- Logical Properties: Use inline/block for internationalization
Common Issues
- Horizontal Overflow: Content breaking out of viewport
- Fixed Widths: Using px instead of relative units
- Viewport Height: 100vh issues on mobile browsers
- Font Size: Text too small on mobile
- Touch Targets: Buttons too small to tap accurately
- Aspect Ratio: Images squishing or stretching
- Z-Index Stacking: Overlays breaking on different screens
04 同仓库更多 Skills
zk-steward
Org role guidance for a ZK steward: engineer zero-knowledge proof systems with circuit design, SNARK vs STARK choice and security review. This is zero-knowledge cryptography, not Zettelkasten note-taking.
writing-plans
Use when you have a spec or requirements for a multi-step coding task and must write an implementation plan before touching code. Produces bite-sized TDD tasks with exact file paths, code and commands for an engineer with zero context.
write-spec
Write a feature spec or PRD from a problem statement or feature idea. Use when turning a vague idea or user request into a structured document, scoping a feature with goals and non-goals, defining success metrics and acceptance criteria, or breaking a big ask into a phased spec.
write-query
Write optimized SQL for your dialect with best practices. Use when translating a natural-language data need into SQL, building a multi-CTE query with joins and aggregations, optimizing a query against a large partitioned table, or getting dialect-specific syntax for Snowflake, BigQuery, Postgres, etc.
workflow-automation
Org role guidance for workflow automation: build and maintain CI/CD definitions in GitHub Actions or equivalent: triggers, jobs, matrices, caching. Covers path filters, dependency caching, parallel jobs, timeouts and fail-fast ordering.
workflow-architect
Org role guidance for a workflow architect: map full workflow trees for systems, user journeys and agents, covering every branch and failure. Covers discovering workflows from code, handoff contracts, timeouts, recovery paths and observable state.