Laboratório
5## Laboratório - dot-portrait: Um vídeo desenhado com os pontos da marca num único canvas; os pontos fogem do seu cursor. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/Portrait.astro) - view-as-agent: Um switch transforma cada seção no texto que um agente lê. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/AgentSwitch.astro) - mcp-live: Chame o servidor MCP de leitura deste site pela própria página. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/netlify/functions/mcp.mts) - perfectui-live: Componentes da Perfect UI funcionando na página, com o código. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/Showcase.astro) - workbench-evals: Skills do ai-workbench avaliadas com e sem a skill, num modelo forte e num barato. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/EvalRuns.astro)
dot-portrait
×Um vídeo desenhado com os pontos da marca num único canvas; os pontos fogem do seu cursor.
- dot-portrait: Um vídeo desenhado com os pontos da marca num único canvas; os pontos fogem do seu cursor. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/Portrait.astro)
<canvas role="img"
aria-label="Christopher Gonçalves no computador, desenhado em pontos">
</canvas>
view-as-agent
×Um switch transforma cada seção no texto que um agente lê.
- view-as-agent: Um switch transforma cada seção no texto que um agente lê. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/AgentSwitch.astro)
Sobre
Eu construo tecnologia que serve as pessoas, e conto como construo. Cresci numa favela da zona norte de São Paulo e conheci meu primeiro computador aos 6 ou 7 anos. De lá para cá, nunca parei de aprender.
Hoje sou engenheiro de software sênior, com mais de 6 anos entregando frontends em produção, e continuo empolgado como no primeiro dia.
Já fiz mais de 600 horas de live coding com público, e vivo por uma ideia: ensinando com o que aprendo, aprendendo com o que ensino.
## Sobre Eu construo tecnologia que serve as pessoas, e conto como construo. Cresci numa favela da zona norte de São Paulo e conheci meu primeiro computador aos 6 ou 7 anos. De lá para cá, nunca parei de aprender. Hoje sou engenheiro de software sênior, com mais de 6 anos entregando frontends em produção, e continuo empolgado como no primeiro dia. Já fiz mais de 600 horas de live coding com público, e vivo por uma ideia: ensinando com o que aprendo, aprendendo com o que ensino.
<label><input type="checkbox" class="pui-switch agent-toggle"> ver como agente</label>
[data-agent-scope]:has(.agent-toggle:checked) .agent-text { display: block }
[data-agent-scope]:has(.agent-toggle:checked) .human { display: none }
mcp-live
×Chame o servidor MCP de leitura deste site pela própria página.
- mcp-live: Chame o servidor MCP de leitura deste site pela própria página. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/netlify/functions/mcp.mts)
https://chrissgon.dev/api/mcp get_profile list_products list_posts
POST https://chrissgon.dev/api/mcp
{"jsonrpc":"2.0","id":1,"method":"tools/list"}
perfectui-live
×Componentes da Perfect UI funcionando na página, com o código.
- perfectui-live: Componentes da Perfect UI funcionando na página, com o código. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/Showcase.astro)
<a class="pui-btn pui-solid pui-theme" href="https://perfectui.dev">Perfect UI</a>
<a class="pui-btn pui-outline pui-surface" href="https://github.com/chrissgon/ai-workbench">ai-workbench</a>
Para agentes
Conecte seu agente a este site
https://chrissgon.dev/api/mcp
Leia o llms.txt
<div class="pui-card">
<div class="pui-card-header">Para agentes</div>
<div class="pui-card-content">
Conecte seu agente a este site
<code>https://chrissgon.dev/api/mcp</code>
<button class="pui-btn pui-outline pui-surface">Copiar</button>
<button class="pui-btn pui-outline pui-surface">tools/list</button>
<a href="/pt/llms.txt">Leia o llms.txt</a>
</div>
</div>
<button class="pui-btn pui-solid pui-theme" commandfor="notify" command="show-modal">
<i class="icon icon-bell"></i> Turn on notifications
</button>
<dialog class="pui-modal" id="notify" closedby="any" aria-labelledby="notify-title">
<div class="pui-card">
<div class="pui-card-header" id="notify-title">
<i class="icon icon-bell-ring"></i> Allow notifications?
</div>
<div class="pui-card-content">
We will let you know when someone mentions you or a build fails.
You can change this later in Settings.
<div style="display: flex; gap: 8px; justify-content: flex-end">
<button class="pui-btn pui-outline pui-surface" commandfor="notify" command="close">
Not now
</button>
<button class="pui-btn pui-solid pui-theme" commandfor="notify" command="close">
<i class="icon icon-check"></i> Allow
</button>
</div>
</div>
</div>
</dialog>
<label><input type="checkbox" class="pui-switch"> ver como agente</label>
| 1.014 | downloads no npm no último mês |
| 3,7 kB | Perfect UI, gzip, sem dependências |
| 600+ horas | de live coding com público |
| 48 | skills no ai-workbench |
<div class="pui-card">
<table class="pui-table">
<tbody>
<tr><td>1.014</td><td>downloads no npm no último mês</td></tr>
<tr><td>3,7 kB</td><td>Perfect UI, gzip, sem dependências</td></tr>
<tr><td>600+ horas</td><td>de live coding com público</td></tr>
<tr><td>48</td><td>skills no ai-workbench</td></tr>
</tbody>
</table>
</div>
npm i @chrissgon/perfectui
import "@chrissgon/perfectui/perfectui.css";
workbench-evals
×Skills do ai-workbench avaliadas com e sem a skill, num modelo forte e num barato.
- workbench-evals: Skills do ai-workbench avaliadas com e sem a skill, num modelo forte e num barato. (Código: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/EvalRuns.astro)
| Skill | Modelo | Rodada | Com a skill | Sem |
|---|---|---|---|---|
| ops-ci-pipeline | claude-haiku-4-5 (modelo floor) | 2 | 0,812 | 0,156 |
| ops-ci-pipeline | claude-opus-5-5 (modelo forte) | 2 | 1,0 | 0,75 |
<table class="pui-table">
<thead>
<tr><th>Skill</th><th>Modelo</th><th>Rodada</th>
<th>Com a skill</th><th>Sem</th></tr>
</thead>
...
</table>