Passo-a-passo detalhado do skill, referenciando as fases cognitivas:
1SENSE — Identificar problemas com DevTools
```bash
# Abrir Chrome DevTools > Toggle Device Toolbar (Ctrl+Shift+M)
# Testar viewports: 375px, 390px, 768px, 1024px
# Via Playwright
npx playwright open --viewport-size 375,812 https://localhost:3000
```
2CONTEXTUALIZE — Verificar meta viewport e touch targets
```bash
# Verificar meta viewport
grep -r 'viewport' src/app/layout.tsx
# Identificar elementos com largura fixa
rg 'width: [0-9]+px' src/ --include="*.css" --include="*.tsx"
```
3RECOMMEND — Corrigir layout com Tailwind
```tsx
// ANTES: layout quebrado em mobile
<div className="flex gap-8">
<aside className="w-[300px]">...</aside>
<main className="flex-1">...</main>
</div>
// DEPOIS: responsivo
<div className="flex flex-col md:flex-row gap-4 md:gap-8">
<aside className="w-full md:w-[300px] shrink-0">...</aside>
<main className="min-w-0 flex-1">...</main>
</div>
```
4RECOMMEND — Corrigir touch targets e font size
```tsx
// Touch target mínimo 44x44px
<button className="min-h-[44px] min-w-[44px] px-4 py-3 text-base">
Ação
</button>
// Typography fluida
<style>{`
body { font-size: clamp(1rem, 2.5vw, 1.125rem); }
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
`}</style>
```
5EVALUATE — Lighthouse mobile audit
```bash
npx lighthouse https://localhost:3000 \
--form-factor=mobile \
--output=html \
--output-path=lighthouse-mobile.html
```
6REFLECT — Visual regression tests
```typescript
// playwright.config.ts
projects: [
{ name: 'mobile', use: { ...devices['iPhone 14'] } },
{ name: 'tablet', use: { ...devices['iPad Pro'] } },
]
```
Reportar telemetria via mcp-skillschain
SynapticSkills