Leio o arquivo aprovado no Figma de perto — espaçamento, tipografia, tokens, estados, movimento — e construo como frontend engineer: markup, SCSS, comportamento em TypeScript, renderizado dentro de views server-side. Game Center, classificação ao vivo com alternância casa/fora, calendários de times e views de playoff, o buscador de clubes, estatísticas de jogadores e de times. Quando um layout quebraria com dados reais — nomes de clube longos, escudos faltando, jogos adiados — resolvo no espírito do design, como parte da construção.

Umbraco v17 sobre .NET 10; os editores compõem páginas a partir de módulos Block Grid, cada um uma view Razor fortemente tipada. O frontend é TypeScript e SCSS vanilla — sem framework SPA — com nomenclatura BEMIT sobre design tokens como CSS custom properties. A interatividade é progressive enhancement com HTMX: filtros, busca e paginação trocam partials renderizados no lugar, então as páginas continuam funcionando e seguem compartilháveis. Os dados de jogo ao vivo chegam por SignalR.

Estados de foco, ordem de tabulação, ARIA e contraste real não estão no arquivo do Figma — são decisões de engenharia que tomo enquanto construo, verificadas contra a WCAG.

Módulos como o slider de patrocinadores vão pro ar com um harness: o componente montado isolado e exercitado nos seus estados do mundo real — quantidade de patrocinadores, larguras de container, breakpoints — para que o comportamento seja verificado antes de chegar a qualquer página.

Toda mudança passa por plano → execução → revisão. Um hook de pre-push faz o build da solução e roda os testes unitários; uma suíte ponta a ponta em Playwright exercita os fluxos do Game Center contra o deploy de preview do pull request antes de qualquer merge.