Habilidade de Aplicativo Móvel

Produza um único mockup de tela de aplicativo móvel, emoldurado dentro de um dispositivo iPhone 15 Pro com aparência real.

Mapa de Recursos

mobile-app/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: device frame + screen primitives (READ FIRST)
└── references/
    ├── layouts.md          ← 6 screen archetypes (Feed / Detail / Onboarding / Profile / Checkout / Focus)
    └── checklist.md        ← P0/P1/P2 self-review (anti-fake-device)

Fluxo de Trabalho

Etapa 0 — Pré-voo

1. Leia assets/template.html do início ao fim no bloco <style>. A Ilha Dinâmica, os ícones SVG da barra de status, o indicador de início, as barras laterais e a barra de abas já estão desenhados em HTML/SVG — não os reimplemente diretamente em cada tela.
2. Leia references/layouts.md para saber quais 6 arquétipos existem.
3. Leia o DESIGN.md ativo — mapeie seus tokens para as seis variáveis :root na semente.

Etapa 1 — Copie a semente

Copie assets/template.html para a raiz do projeto como index.html. Substitua as seis variáveis :root pelos tokens do sistema de design ativo. Substitua o <title> da página e a legenda acima do dispositivo.

Etapa 2 — Escolha exatamente um arquétipo

Uma tela de celular faz um trabalho. Se o briefing parecer combinar dois, entregue uma tela e ofereça a outra como acompanhamento.

Etapa 3 — Cole e preencha

Copie o bloco do arquétipo de layouts.md para <main class="content">, substituindo o card placeholder. Preencha o texto entre colchetes com cópias reais e específicas do briefing. Remova o bloco <nav class="tabbar"> completamente para arquétipos que não exibem um (B, C, E).

Etapa 4 — Auto-verificação

Execute references/checklist.md. Preste atenção especial a:

• O frame ainda tem a Ilha Dinâmica, os SVGs da barra de status e o indicador de início
• Alvos de toque ≥ 44px
• Um destaque, usado ≤ 2 vezes na tela
• Os títulos de exibição ainda usam var(--font-display) (serifado)

Etapa 5 — Emita o artefato

<artifact identifier="mobile-slug" type="text/html" title="Mobile — Screen Name">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes descrevendo o que está lá. Pare após </artifact>.

Regras Rígidas

• O telefone é real. Espaço da Ilha Dinâmica, ícones SVG da barra de status, indicador de início. A semente protege os três — não reescreva o frame.
• Tela única, trabalho único. Sem tours com várias abas, sem fluxos divididos.
• Orçamento de destaque = 2. Uma aba ativa + uma ação principal é o padrão.
• Numéricos em mono via classe .num.
• Exibição em serifado via var(--font-display).
• Sem imagens externas — use placeholders .ph-img.