responsive-design – skill Thiết kế & UI cho agent AI
Triển khai bố cục responsive hiện đại bằng container queries, typography linh hoạt (fluid), CSS Grid và chiến lược breakpoint ưu tiên mobile. Dùng khi xây dựng giao diện thích ứng, triển khai bố cục linh hoạt hoặc tạo hành vi responsive ở cấp component.
Cài skill responsive-design bằng một lệnh
Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/responsive-design-b04b1.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /responsive-design – rồi mô tả công việc bạn muốn làm.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/responsive-design-b04b1.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $responsive-design – rồi mô tả công việc bạn muốn làm.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/responsive-design-b04b1.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /responsive-design – rồi mô tả công việc bạn muốn làm.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/responsive-design-b04b1.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /responsive-design – rồi mô tả công việc bạn muốn làm.
Nội dung SKILL.md
Nội dung SKILL.md gốc bằng tiếng Anh.
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
1. Mobile-First: Start with mobile styles, enhance for larger screens
2. Content Breakpoints: Set breakpoints based on content, not devices
3. Fluid Over Fixed: Use fluid values for typography and spacing
4. Container Queries: Use for component-level responsiveness
5. Test Real Devices: Simulators don't catch all issues
6. Performance: Optimize images, lazy load off-screen content
7. Touch Targets: Maintain 44x44px minimum on mobile
8. 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
Skill liên quan
- computer-vision-expert – Thiết kế và đánh giá pipeline thị giác máy tính. Chuyên về YOLO26, Segment Anything 3…
- loop-library – Khám phá, tìm, so sánh, kiểm toán, sửa chữa, điều chỉnh và thiết kế các vòng lặp agent…
- core-components – Thư viện component cốt lõi và mẫu design system. Dùng khi xây dựng UI, sử dụng design…
- crewai – Thiết kế agent theo vai trò, task, crew và flow với CrewAI.
- cyber-y2k – Hướng dẫn triển khai Web và App cho Cyber Y2K. Kích hoạt khi người dùng muốn phong cách…
- cyberpunk-ui – Hướng dẫn triển khai Web và App cho Cyberpunk UI. Kích hoạt khi người dùng muốn màu…
- daily-gift – Công cụ tạo quà tặng hằng ngày nhận biết mối quan hệ, với quy trình sáng tạo năm giai…
- dark-mode – Hướng dẫn triển khai Web và App cho Dark Mode Design. Kích hoạt khi người dùng muốn bề…