Padrão Apple para HTML

Faz a IA gerar páginas, dashboards e relatórios em HTML com cara de Apple: tokens prontos, lista do que é proibido, rodada de acabamento e teste no celular.

Pegue a skill

Baixar SKILL.md Baixar DESIGN.md

Esta skill usa dois arquivos: salve o SKILL.md e o DESIGN.md na mesma pasta.

Onde colar

Salve o arquivo em .cursor/skills/padrao-apple-html/SKILL.md dentro do seu projeto. No Claude Code, a pasta é .claude/skills/padrao-apple-html/SKILL.md. A IA lê sozinha quando a tarefa combina.

Quando usar

Ao pedir à IA uma página, um dashboard ou um relatório em HTML.
Para revisar uma página que ficou com cara de template feito por IA.
Quando o resultado precisa funcionar bem no celular.

Texto da skill

---
name: padrao-apple-html
description: Use ao criar ou revisar qualquer HTML, dashboard, relatório web ou página. Segue um padrão visual Apple único, descrito no DESIGN.md que vem junto.
---
# Padrão Apple para HTML

1. Leia o DESIGN.md antes de escrever ou revisar o HTML.
2. Use os tokens e os trechos de card, KPI e gráfico de lá: fonte do sistema, uma cor de destaque, cards compactos com borda de 1px.
3. Confira a lista de proibidos: emoji na interface, gradiente e glow, mais de uma cor de destaque, rótulo em caixa alta acima do título, numeração decorativa, selos que não medem nada, card dentro de card, variação sem contexto e dado não confirmado.
4. Faça a rodada de acabamento em separado: grade 4/8, escala de texto, ícones, estados de hover, toque e foco, e modo escuro.
5. Antes de entregar, teste em 1440 e 390 de largura: sem scroll horizontal, 0 erros no console e alvos de toque com 44 px ou mais.