responsive-layout
Steps
- Design mobile first.
- Pick breakpoints from content, not devices.
- Use CSS grid and flexbox with fluid type.
- Test at narrow, medium and wide widths.
Done When
- [ ] No horizontal scroll at 320px
Registry
| id | role | version | status | owner | last_tested |
|---|---|---|---|---|---|
| SK-WEB-DESIGNER-responsive-layout | web-designer | 0.1.0 | seed | Thomas Cherickal | - |
Links
- Up: Web Designer skills
- Siblings: design-tokens, visual-hierarchy-review
- Frameworks: co-star, few-shot, xml-structured, chain-of-thought
- Tests: testing guide