chrissgon.dev
ENPT
01 · Índice

Christopher Gonçalves

Entusiasta de tecnologia e Engenheiro de Software Sênior · Construindo tecnologia que serve as pessoas · Criador da Perfect UI e do ai-workbench

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.

npm i @chrissgon/perfectui
# Christopher Gonçalves

> Entusiasta de tecnologia e Engenheiro de Software Sênior · Construindo tecnologia que serve as pessoas · Criador da Perfect UI e do ai-workbench

- [GitHub](https://github.com/chrissgon): chrissgon
- [LinkedIn](https://www.linkedin.com/in/chrissgon): chrissgon
- [npm](https://www.npmjs.com/~chrissgon): @chrissgon

## 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.
3,7kBPerfect UI, gzip, sem dependências
1.014downloads no npm no último mês
600+horasde live coding com público
48skills no ai-workbench
## Números

- 1.014: downloads no npm no último mês (2026-08-30 a 2026-09-28)
- 3,7 kB: Perfect UI, gzip, sem dependências
- 600+ horas: de live coding com público
- 48: skills no ai-workbench
02 · Produtos

Perfect UI

uma biblioteca de interface de 3,7 kB em que o navegador faz o trabalho, para as páginas continuarem leves até numa conexão lenta.

<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>
Para agentes
Conecte seu agente a este site https://chrissgon.dev/api/mcp Leia o llms.txt 
## Produtos

- [Perfect UI](https://perfectui.dev): uma biblioteca de interface de 3,7 kB em que o navegador faz o trabalho, para as páginas continuarem leves até numa conexão lenta. Código: https://github.com/chrissgon/perfectui. npm: @chrissgon/perfectui (1.014 downloads de 2026-08-30 a 2026-09-28). Licença: MIT.

ai-workbench

skills, agentes e workflows para uma IA construir software de ponta a ponta, testados em modelos fortes e baratos.

48skills no ai-workbench
ai-workbench
- [ai-workbench](https://github.com/chrissgon/ai-workbench): skills, agentes e workflows para uma IA construir software de ponta a ponta, testados em modelos fortes e baratos. Código: https://github.com/chrissgon/ai-workbench. 48 skills no ai-workbench. Licença: MIT.
03 · Projetos

Entregues e em construção

Perfect UI

Pronto
Web e UI · JavaScript, TypeScript, CSS

uma biblioteca de interface de 3,7 kB em que o navegador faz o trabalho, para as páginas continuarem leves até numa conexão lenta.

perfectui.devGitHub

perfectui.dev

Pronto
Web e UI · TypeScript, Vue (Nuxt)

O site de documentação da Perfect UI, feito com Nuxt e com a própria Perfect UI.

perfectui.dev

ai-workbench

Pronto
IA e agentes · Python, Shell

skills, agentes e workflows para uma IA construir software de ponta a ponta, testados em modelos fortes e baratos.

GitHub

goddd

Pronto
Documentação e arquitetura · Go

O repositório é uma API com listagem e cadastro de usuários. Foram utilizados princípios SOLID e DDD para a arquitetura, com o objetivo de proporcionar maior adaptabilidade e manutenção do código.

GitHub

doc-github-workflow

Pronto
Documentação e arquitetura · Go

Workflow CI/CD com Github Actions e SonarCloud

GitHub

doc-git-patterns

Pronto
Documentação e arquitetura · Markdown

Padrões de commit e de fluxo para repositórios

GitHub

Perfect UI for agents

Em construção
IA e agentes · Web e UI

Um servidor MCP e uma skill que ensinam agentes de código a montar interfaces com a Perfect UI.

Agent-ready kit

Em construção
IA e agentes

Um arquivo de dados entra; saem o llms.txt, os dados schema.org e um servidor MCP de leitura.

Social agent

Em construção
IA e agentes

O agente que responde comentários nos meus posts dentro de uma política, com trava de temas sensíveis, em código aberto.

Light-site auditor

Em construção
IA e agentes · Web e UI

Um agente que confere o site de um pequeno negócio (peso, velocidade em 3G, acessibilidade) e explica as correções em palavras simples.

## Projetos

### Pronto

- [Perfect UI](https://perfectui.dev): uma biblioteca de interface de 3,7 kB em que o navegador faz o trabalho, para as páginas continuarem leves até numa conexão lenta. (Tipo: Web e UI; Stack: JavaScript, TypeScript, CSS)
- [perfectui.dev](https://perfectui.dev): O site de documentação da Perfect UI, feito com Nuxt e com a própria Perfect UI. (Tipo: Web e UI; Stack: TypeScript, Vue (Nuxt))
- [ai-workbench](https://github.com/chrissgon/ai-workbench): skills, agentes e workflows para uma IA construir software de ponta a ponta, testados em modelos fortes e baratos. (Tipo: IA e agentes; Stack: Python, Shell)
- [goddd](https://github.com/chrissgon/goddd): O repositório é uma API com listagem e cadastro de usuários. Foram utilizados princípios SOLID e DDD para a arquitetura, com o objetivo de proporcionar maior adaptabilidade e manutenção do código. (Tipo: Documentação e arquitetura; Stack: Go)
- [doc-github-workflow](https://github.com/chrissgon/doc-github-workflow): Workflow CI/CD com Github Actions e SonarCloud (Tipo: Documentação e arquitetura; Stack: Go)
- [doc-git-patterns](https://github.com/chrissgon/doc-git-patterns): Padrões de commit e de fluxo para repositórios (Tipo: Documentação e arquitetura; Stack: Markdown)

### Em construção

- Perfect UI for agents: Um servidor MCP e uma skill que ensinam agentes de código a montar interfaces com a Perfect UI. (Tipo: IA e agentes, Web e UI)
- Agent-ready kit: Um arquivo de dados entra; saem o llms.txt, os dados schema.org e um servidor MCP de leitura. (Tipo: IA e agentes)
- Social agent: O agente que responde comentários nos meus posts dentro de uma política, com trava de temas sensíveis, em código aberto. (Tipo: IA e agentes)
- Light-site auditor: Um agente que confere o site de um pequeno negócio (peso, velocidade em 3G, acessibilidade) e explica as correções em palavras simples. (Tipo: IA e agentes, Web e UI)
04 · Escrita

Posts no LinkedIn

PTEN3 reações · 5 comentáriosPerfect UI 1.0 está no ar.PTEN8 reações · 1 comentárioAmanhã sai o Perfect UI 1.0.PT89 reações · 10 comentáriosSabe aquele frio na barriga por estar ao lado de referências?EN28 reações · 3 comentáriosA definitive guide to Rick and Morty, using React, Redux, React Router and Perfect UI.
## Escrita

- [Perfect UI 1.0 está no ar.](https://pt.linkedin.com/posts/chrissgon_perfect-ui-10-est%C3%A1-no-ar-perfect-ui-10-activity-7510677333259964416-xJQ7) (2026-09-29; Idiomas: PT, EN)
- [Amanhã sai o Perfect UI 1.0.](https://pt.linkedin.com/posts/chrissgon_amanh%C3%A3-sai-o-perfect-ui-10-perfect-ui-activity-7510310057717334016-jHho) (2026-09-28; Idiomas: PT, EN)
- [Sabe aquele frio na barriga por estar ao lado de referências?](https://pt.linkedin.com/posts/chrissgon_devnagringasummit-devnagringa-coders-activity-7398749686079299588-0T6D) (2025-11-24; Idiomas: PT)
- [A definitive guide to Rick and Morty, using React, Redux, React Router and Perfect UI.](https://www.linkedin.com/posts/chrissgon_rickandmorty-react-redux-activity-7180867678318780416-Fdln) (2024-04-02; Idiomas: EN)
- [How to create your own Bootstrap: Part 2](https://www.linkedin.com/posts/chrissgon_how-to-create-your-own-bootstrap-part-2-activity-7082357473440899073-PYRt) (2023-07-05; Idiomas: EN)
- [How to create your own Bootstrap: Part 1](https://www.linkedin.com/posts/chrissgon_how-to-create-your-own-bootstrap-part-1-activity-7079820769987280896-Pi6K) (2023-06-28; Idiomas: EN)
- [Explorando o mundo dos mangás com Golang!](https://pt.linkedin.com/posts/chrissgon_github-chrissgongomanga-a-powerful-manga-activity-7072557890481397761-qwyE) (2023-06-08; Idiomas: PT)
- [I created my Pokédex](https://pt.linkedin.com/posts/chrissgon_pokedex-pokemon-nuxt-activity-6994304183386443776-Jfyl) (2022-11-04; Idiomas: EN)

Trajetória

  1. Antes de 2020

    Primeiro computador aos 6 ou 7 anos; mais de 4 anos de estudo antes do primeiro emprego.

  2. 2020 – 2021 · Software Engineer

    plataforma para ONGs (PHP, dashboards, alertas por e-mail)

  3. 2021 · JavaScript Instructor

    bootcamp; mais de 120 alunos, mais de 600 h de live coding

  4. 2021 – 2024 · Senior Frontend Engineer

    design system da empresa, framework CSS próprio e leve, migração Vue 2 → Nuxt 3

  5. 2024 – 2026 · Senior Software Engineer

    frontend de uma plataforma de trading Web3: arquitetura, design system, performance, acessibilidade, pipelines

  6. Hoje

    Perfect UI 1.0 e ai-workbench.

## Trajetória

- Antes de 2020: Primeiro computador aos 6 ou 7 anos; mais de 4 anos de estudo antes do primeiro emprego.
- 2020 – 2021, Software Engineer: plataforma para ONGs (PHP, dashboards, alertas por e-mail)
- 2021, JavaScript Instructor: bootcamp; mais de 120 alunos, mais de 600 h de live coding
- 2021 – 2024, Senior Frontend Engineer: design system da empresa, framework CSS próprio e leve, migração Vue 2 → Nuxt 3
- 2024 – 2026, Senior Software Engineer: frontend de uma plataforma de trading Web3: arquitetura, design system, performance, acessibilidade, pipelines
- Hoje: Perfect UI 1.0 e ai-workbench.
- Formação: Bacharelado em Sistemas de Informação

### Provas

- Framework CSS próprio ~28× menor (~5 KB vs ~144 KB gzip)
- Migração Vue 2 → Vue 3: bundle −38%, TTI −42%, cobertura de testes de 7% para 87%
- Carregamento de ~10 s para menos de 3 s em 3G lento (−70%)
- Dashboards com mais de 300 mensagens WebSocket por segundo, latência abaixo de 100 ms
- 600+ horas de live coding

Formação

Bacharelado em Sistemas de Informação

Provas

  • Framework CSS próprio ~28× menor (~5 KB vs ~144 KB gzip)
  • Migração Vue 2 → Vue 3: bundle −38%, TTI −42%, cobertura de testes de 7% para 87%
  • Carregamento de ~10 s para menos de 3 s em 3G lento (−70%)
  • Dashboards com mais de 300 mensagens WebSocket por segundo, latência abaixo de 100 ms
  • 600+ horas de live coding

05 · Laboratório

## 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)
06 · Para agentes

Conecte seu agente a este site

https://chrissgon.dev/api/mcp
Leia o llms.txt
## Para agentes

- [Conecte seu agente a este site](https://chrissgon.dev/api/mcp): MCP, Streamable HTTP, POST (get_profile, list_products, list_posts)