chrissgon.dev
ENPT
01 · Index

Christopher Gonçalves

Tech enthusiast & Senior Software Engineer · Building tech that serves people · Creator of Perfect UI & ai-workbench

I build tech that serves people, and I talk about how I build it. I grew up in a favela in São Paulo's north zone and met my first computer at 6 or 7. I haven't stopped learning since.

npm i @chrissgon/perfectui
# Christopher Gonçalves

> Tech enthusiast & Senior Software Engineer · Building tech that serves people · Creator of Perfect UI & ai-workbench

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

## About

I build tech that serves people, and I talk about how I build it. I grew up in a favela in São Paulo's north zone and met my first computer at 6 or 7. I haven't stopped learning since.

Today I'm a senior software engineer with 6+ years shipping production frontends, and I still get as excited as I did on day one.

I've done 600+ hours of live coding with an audience, and I live by one idea: teaching with what I learn, learning from what I teach.
3.7kBPerfect UI, gzip, zero dependencies
1,014npm downloads last month
600+hoursof live coding with an audience
48skills in ai-workbench
## Numbers

- 1,014: npm downloads last month (2026-08-30 to 2026-09-28)
- 3.7 kB: Perfect UI, gzip, zero dependencies
- 600+ hours: of live coding with an audience
- 48: skills in ai-workbench
02 · Products

Perfect UI

a 3.7 kB UI library where the browser does the work, so pages stay light even on a slow connection.

<div class="pui-card">
  <div class="pui-card-header">For agents</div>
  <div class="pui-card-content">
    Connect your agent to this site
    <code>https://chrissgon.dev/api/mcp</code>
    <button class="pui-btn pui-outline pui-surface">Copy</button>
    <button class="pui-btn pui-outline pui-surface">tools/list</button>
    <a href="/llms.txt">Read the llms.txt</a>
  </div>
</div>
For agents
Connect your agent to this site https://chrissgon.dev/api/mcp Read the llms.txt 
## Products

- [Perfect UI](https://perfectui.dev): a 3.7 kB UI library where the browser does the work, so pages stay light even on a slow connection. Code: https://github.com/chrissgon/perfectui. npm: @chrissgon/perfectui (1,014 downloads from 2026-08-30 to 2026-09-28). License: MIT.

ai-workbench

skills, agents and workflows that let an AI build software end to end, tested on strong and cheap models.

48skills in ai-workbench
ai-workbench
- [ai-workbench](https://github.com/chrissgon/ai-workbench): skills, agents and workflows that let an AI build software end to end, tested on strong and cheap models. Code: https://github.com/chrissgon/ai-workbench. 48 skills in ai-workbench. License: MIT.
03 · Projects

Shipped and in progress

Perfect UI

Ready
Web & UI · JavaScript, TypeScript, CSS

a 3.7 kB UI library where the browser does the work, so pages stay light even on a slow connection.

perfectui.devGitHub

perfectui.dev

Ready
Web & UI · TypeScript, Vue (Nuxt)

The documentation site of Perfect UI, built with Nuxt and Perfect UI itself.

perfectui.dev

ai-workbench

Ready
AI & agents · Python, Shell

skills, agents and workflows that let an AI build software end to end, tested on strong and cheap models.

GitHub

goddd

Ready
Docs & architecture · Go

A Go REST API for users laid out with DDD and SOLID, one README per package.

GitHub

doc-github-workflow

Ready
Docs & architecture · Go

A CI/CD workflow with GitHub Actions and SonarCloud, on a minimal Go example.

GitHub

doc-git-patterns

Ready
Docs & architecture · Markdown

Commits and flow patterns for repositories

GitHub

Perfect UI for agents

In progress
AI & agents · Web & UI

An MCP server and a skill that teach coding agents to build interfaces with Perfect UI.

Agent-ready kit

In progress
AI & agents

One data file in, llms.txt, schema.org data and a read-only MCP server out.

Social agent

In progress
AI & agents

The agent that answers comments on my posts within a policy, with a lock on sensitive topics, open source.

Light-site auditor

In progress
AI & agents · Web & UI

An agent that checks a small business's site for weight, speed on 3G and accessibility, and explains the fixes in plain words.

## Projects

### Ready

- [Perfect UI](https://perfectui.dev): a 3.7 kB UI library where the browser does the work, so pages stay light even on a slow connection. (Type: Web & UI; Stack: JavaScript, TypeScript, CSS)
- [perfectui.dev](https://perfectui.dev): The documentation site of Perfect UI, built with Nuxt and Perfect UI itself. (Type: Web & UI; Stack: TypeScript, Vue (Nuxt))
- [ai-workbench](https://github.com/chrissgon/ai-workbench): skills, agents and workflows that let an AI build software end to end, tested on strong and cheap models. (Type: AI & agents; Stack: Python, Shell)
- [goddd](https://github.com/chrissgon/goddd): A Go REST API for users laid out with DDD and SOLID, one README per package. (Type: Docs & architecture; Stack: Go)
- [doc-github-workflow](https://github.com/chrissgon/doc-github-workflow): A CI/CD workflow with GitHub Actions and SonarCloud, on a minimal Go example. (Type: Docs & architecture; Stack: Go)
- [doc-git-patterns](https://github.com/chrissgon/doc-git-patterns): Commits and flow patterns for repositories (Type: Docs & architecture; Stack: Markdown)

### In progress

- Perfect UI for agents: An MCP server and a skill that teach coding agents to build interfaces with Perfect UI. (Type: AI & agents, Web & UI)
- Agent-ready kit: One data file in, llms.txt, schema.org data and a read-only MCP server out. (Type: AI & agents)
- Social agent: The agent that answers comments on my posts within a policy, with a lock on sensitive topics, open source. (Type: AI & agents)
- Light-site auditor: An agent that checks a small business's site for weight, speed on 3G and accessibility, and explains the fixes in plain words. (Type: AI & agents, Web & UI)
04 · Writing

Posts on LinkedIn

PTEN3 reactions · 5 commentsPerfect UI 1.0 is out.PTEN8 reactions · 1 commentPerfect UI 1.0 ships tomorrow.PT89 reactions · 10 commentsSabe aquele frio na barriga por estar ao lado de referências?EN28 reactions · 3 commentsA definitive guide to Rick and Morty, using React, Redux, React Router and Perfect UI.
## Writing

- [Perfect UI 1.0 is out.](https://pt.linkedin.com/posts/chrissgon_perfect-ui-10-est%C3%A1-no-ar-perfect-ui-10-activity-7510677333259964416-xJQ7) (2026-09-29; Languages: PT, EN)
- [Perfect UI 1.0 ships tomorrow.](https://pt.linkedin.com/posts/chrissgon_amanh%C3%A3-sai-o-perfect-ui-10-perfect-ui-activity-7510310057717334016-jHho) (2026-09-28; Languages: 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; Languages: 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; Languages: 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; Languages: 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; Languages: 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; Languages: PT)
- [I created my Pokédex](https://pt.linkedin.com/posts/chrissgon_pokedex-pokemon-nuxt-activity-6994304183386443776-Jfyl) (2022-11-04; Languages: EN)

Trajectory

  1. Before 2020

    First computer at 6 or 7; 4+ years of study before the first job.

  2. 2020 – 2021 · Software Engineer

    A platform for NGOs: PHP, dashboards, e-mail alerts.

  3. 2021 · JavaScript Instructor

    A bootcamp: 120+ students, 600+ hours of live coding.

  4. 2021 – 2024 · Senior Frontend Engineer

    A company design system, an in-house lightweight CSS framework, a Vue 2 → Nuxt 3 migration.

  5. 2024 – 2026 · Senior Software Engineer

    The frontend of a Web3 trading platform: architecture, design system, performance, accessibility, pipelines.

  6. Now

    Perfect UI 1.0 and ai-workbench.

## Trajectory

- Before 2020: First computer at 6 or 7; 4+ years of study before the first job.
- 2020 – 2021, Software Engineer: A platform for NGOs: PHP, dashboards, e-mail alerts.
- 2021, JavaScript Instructor: A bootcamp: 120+ students, 600+ hours of live coding.
- 2021 – 2024, Senior Frontend Engineer: A company design system, an in-house lightweight CSS framework, a Vue 2 → Nuxt 3 migration.
- 2024 – 2026, Senior Software Engineer: The frontend of a Web3 trading platform: architecture, design system, performance, accessibility, pipelines.
- Now: Perfect UI 1.0 and ai-workbench.
- Education: Bachelor's degree in Information Systems

### Proofs

- ~28× smaller in-house CSS framework (~5 KB vs ~144 KB gzip)
- Vue 2 → Vue 3: bundle −38%, TTI −42%, test coverage 7% → 87%
- ~10 s to under 3 s load on slow 3G (−70%)
- 300+ WebSocket messages per second under 100 ms
- 600+ hours of live coding

Education

Bachelor's degree in Information Systems

Proofs

  • ~28× smaller in-house CSS framework (~5 KB vs ~144 KB gzip)
  • Vue 2 → Vue 3: bundle −38%, TTI −42%, test coverage 7% → 87%
  • ~10 s to under 3 s load on slow 3G (−70%)
  • 300+ WebSocket messages per second under 100 ms
  • 600+ hours of live coding

05 · Lab

## Lab

- dot-portrait: A video drawn as brand dots on one canvas; the dots move away from your pointer. (Code: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/Portrait.astro)
- view-as-agent: One switch turns every section into the text an agent reads. (Code: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/AgentSwitch.astro)
- mcp-live: Call this site's read-only MCP server from the page. (Code: https://github.com/chrissgon/chrissgon.dev/blob/main/netlify/functions/mcp.mts)
- perfectui-live: Perfect UI components working on the page, with their code. (Code: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/Showcase.astro)
- workbench-evals: ai-workbench skills scored with and without the skill, on a strong and a cheap model. (Code: https://github.com/chrissgon/chrissgon.dev/blob/main/src/components/EvalRuns.astro)
06 · For agents

Connect your agent to this site

https://chrissgon.dev/api/mcp
Read the llms.txt
## For agents

- [Connect your agent to this site](https://chrissgon.dev/api/mcp): MCP, Streamable HTTP, POST (get_profile, list_products, list_posts)