---
name: velin-design-hero-compose
description: Compose first-viewport hero with VelinStyle hierarchy after reuse-gate. Brand-first; no invent tokens.
---
# Hero Compose

## Purpose
Composes first viewport hero following VelinStyle hierarchy and CTA constraints.

## Domain
B · category `design`

## Capabilities
- `build.design`

## Permission
`write` · **requiresApproval: true**

## Allowed actions
- READ
- PLAN
- WRITE

## Forbidden actions
- APPLY
- ROLLBACK
- ACCEPT
- DEFER
- NOTE
- ACKNOWLEDGE
- CATALOG
- MANIFEST
- CLASSIFY
- invent-target

## Stop conditions
- SR-11
- SR-12

## Agent role / risk
Builder · risk `med`

## Reuse (mandatory before build)

Follow `velin-reuse-gate` (BP-R01…R04):

1. **SEARCH** existing VelinStyle skills, components/Web Components, utilities, tokens, and patterns.
2. **EXISTING?** If a fit exists, document it.
3. **COMPATIBLE?** If yes → **REUSE** (or EXTEND). If no → document the incompatibility.
4. **NEW** only with evidenced gap — never "create because needed".
5. Skipping reuse on non-greenfield work → **STOP** (SR-12).

## Workflow
1. Run reuse-gate: prefer existing hero/marketing patterns and tokens.
2. Plan composition (BP-B01): one viewport, brand dominant, one headline, one CTA group, one dominant visual plane.
3. Prefer `velin-*` classes/tokens (BP-B03). No one-off undocumented classes.
4. Emit HTML; do not skip a11y/contrast basics.
5. Hand off to review skills — this skill must not silent-apply rewrite/migrate.

## Best practices
- BP-B01, BP-B03, BP-R01–R04, BP-C01, BP-T01

## Examples
- Reuse existing marketing-hero block / `velin` surface tokens before inventing a new hero.
- Bad: "Create a modern hero" without SEARCH.

## Anti-patterns
- Auto-create component without gap evidence.
- Multiple competing CTAs / card clutter in first viewport.

## Inputs / Outputs
- Inputs: prompt, html, screenshot
- Outputs: html, review-json