---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces and printable HTML decks with high design quality. Use when building web components, pages, apps, executive briefs, proposals, or slide-like HTML documents; when the user asks for landscape/portrait print layouts, print CSS, overflow checks, or embedding logos as base64.
---

# Frontend design

Create distinctive, production-grade UI that avoids generic AI aesthetics. Commit to one bold direction and execute it with precision.

## Before coding

1. **Purpose / tone / constraints / differentiation** — pick one intentional aesthetic; do not default to purple gradients, Inter/Roboto, or Space Grotesk.
2. **Format (required for documents/decks)** — if the deliverable is printable or slide-like and orientation was not specified, ask:
   - Landscape A4 · Portrait A4 · Web fluido
   Then follow [PRINT-DECKS.md](PRINT-DECKS.md).
3. **Brand assets** — locate logos early. Insert HTML embed markers, then run the base64 script (below). Ask for missing partner/client logo paths.

## Aesthetics

- Distinctive typography (display + body pair; no default system stacks as the hero voice)
- Cohesive CSS variables; dominant color + sharp accent
- Atmosphere (gradients, texture, depth) — not flat single fills unless intentional
- Motion with purpose (2–3 strong moments beat scattered noise)
- Match complexity to the vision (maximalist = elaborate; refined = restraint)

## Printable decks / executive HTML

When building proposals, briefings, or A4 pages:

1. Ask format if unknown → see [PRINT-DECKS.md](PRINT-DECKS.md)
2. Ship print CSS (`@page`, `print-color-adjust`, page breaks, hide toolbar)
3. Embed logos with the script (never ship placeholder “DF” text if an asset exists)
4. **Mandatory overflow check** on every `.slide` / `.page` until none overflow
5. Offer “Imprimir / salvar PDF” via `window.print()`

## Logo embed script

Resolve the script next to this skill (`scripts/embed_images_base64.py`). Fallbacks:

- Cursor: `~/.cursor/skills/frontend-design/scripts/embed_images_base64.py`
- Claude plugin: skill folder under `frontend-design/skills/frontend-design/scripts/`

```bash
python scripts/embed_images_base64.py \
  --html path/to/doc.html \
  --map logo-dfr=assets/logo-mark.svg
```

HTML markers: `data-embed="logo-dfr"`, `{{EMBED:logo-dfr}}`, or `<!-- EMBED:logo-dfr -->`. Full rules in [PRINT-DECKS.md](PRINT-DECKS.md).

Single URI dump:

```bash
python scripts/embed_images_base64.py assets/logo-mark.svg
```