---
name: editorial-layout
description: "Design a publication surface where content hierarchy leads. Use for editorial, grid, magazine."
---

# Редакционная сетка

Design a publication surface where content hierarchy leads.

## Implementation decisions

1. Derive grid spans from content importance instead of equal-size cards.
2. Pair expressive display typography with a restrained readable body face.
3. Keep reading measure independent of full-bleed imagery width.
4. Let an important image or quote break the grid purposefully.

## Working source

Read [components/templates.tsx](../webcraft-shared/source/components/templates.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- Reading order works without CSS.
- Captions remain associated with images.
- Long articles have descriptive headings.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/typography

Version 2.0.0 · Original WEBCRAFT content · MIT