---
name: responsive-composition
description: "Adapt complex pages to small screens, touch and text enlargement. Use for responsive, container queries, mobile."
---

# Адаптивная композиция

Adapt complex pages to small screens, touch and text enlargement.

## Implementation decisions

1. Choose breakpoints where content fails rather than by named device.
2. Use minmax(0,1fr) and min-width:0 in flexible layouts.
3. Collapse secondary navigation while retaining primary actions in the flow.
4. Prefer container queries for portable components and dynamic viewport units for full-screen panels.

## Working source

Read [components/demos.tsx](../webcraft-shared/source/components/demos.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

- Essential controls remain visible at 360px.
- Touch targets are generous.
- Virtual keyboards do not trap the submit action.

## 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/comparison

Version 2.0.0 · Original WEBCRAFT content · MIT