3 added, 7 removed. Audit A to A.
---
name: css-grid-editorial-systems
- description: Create CSS Grid editorial layout systems for premium websites. Use for asymmetric grids, magazine layouts, portfolio indexes, case-study plates, image galleries, hero compositions, feature narratives, product proof layouts, masonry-like rhythms, and replacing generic card grids with stronger hierarchy.
+ description: "Implement asymmetric editorial CSS Grid layouts."
---
# CSS Grid Editorial Systems
## Use This Skill
Use this skill for build editorial grids beyond generic card layouts.
- ## Operating Contract
+ ## Scoped execution
- 1. Inspect the existing project before changing code.
- 2. Identify the styling system, token source, component primitive strategy, and available verification commands.
- 3. Keep premium visual standards active: no generic library defaults, no weak states, no one-off styling chaos.
- 4. Follow existing project conventions unless a change clearly improves the result.
- 5. Run available checks and visually inspect responsive output when the change affects UI.
+ Apply the [shared web contract](../website-operating-rules/references/scoped-web-contract.md) once when execution crosses phases; reuse it if already read. Load only the specialist guidance relevant to the requested surface and deliverable.
## Required Reference
Read [references/css-grid-editorial-systems-guide.md](references/css-grid-editorial-systems-guide.md) before making architectural or visible UI changes with this skill.