---
name: visual-direction
description: "Choose a coherent visual direction for a new website or requested redesign. Use for art direction, styles."
---

# Визуальное направление

Choose a coherent visual direction for a new website or requested redesign.

## Implementation decisions

1. Preserve existing visual authority on a refinement. Infer audience, environment and primary task before choosing a new direction.
2. Choose a dominant type treatment, spatial rule, accent and meaningful interaction. Do not combine every available trend.
3. Use the style registry as starting tokens, not as a requirement to reproduce its sample layout.
4. Document the direction and the conditions under which it should change.

## Working source

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

- The first viewport exposes the primary task.
- Mobile recomposes the content.
- Commercial claims come from real supplied facts.

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