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,018npm downloads last month
600+hoursof live coding with an audience
48skills in ai-workbench
## Numbers

- 1,018: npm downloads last month (2026-08-31 to 2026-09-29)
- 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,018 downloads from 2026-08-31 to 2026-09-29). 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

meuespresso

Ready
Web & UI · JavaScript, Vue (Nuxt), TypeScript, Node.js, MongoDB

A coffee e-commerce app with a catalogue, search, cart and account, installable as a PWA, built with Nuxt, a Node.js API and MongoDB.

GitHub

rickandmorty

Ready
Web & UI · TypeScript, React, Redux, Tailwind, Perfect UI

A Rick and Morty guide with characters, episodes and locations from the public API, search and favorites, built with React, Redux, Tailwind and Perfect UI.

chrissgon-rickandmorty.vercel.appGitHub

Perfect UI for agents

Ready
AI & agents · Web & UI · TypeScript, Node.js

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

GitHub

Agent-ready kit

Ready
AI & agents · TypeScript, Node.js

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

GitHub

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

Ready
AI & agents · Web & UI · TypeScript, Node.js

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

GitHub
## 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)
- [meuespresso](https://github.com/chrissgon/meuespresso): A coffee e-commerce app with a catalogue, search, cart and account, installable as a PWA, built with Nuxt, a Node.js API and MongoDB. (Type: Web & UI; Stack: JavaScript, Vue (Nuxt), TypeScript, Node.js, MongoDB)
- [rickandmorty](https://chrissgon-rickandmorty.vercel.app/): A Rick and Morty guide with characters, episodes and locations from the public API, search and favorites, built with React, Redux, Tailwind and Perfect UI. (Type: Web & UI; Stack: TypeScript, React, Redux, Tailwind, Perfect UI)
- [Perfect UI for agents](https://github.com/chrissgon/perfectui-mcp): An MCP server and a skill that teach coding agents to build interfaces with Perfect UI. (Type: AI & agents, Web & UI; Stack: TypeScript, Node.js)
- [Agent-ready kit](https://github.com/chrissgon/agent-ready-kit): One data file in, llms.txt, schema.org data and a read-only MCP server out. (Type: AI & agents; Stack: TypeScript, Node.js)
- [Light-site auditor](https://github.com/chrissgon/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; Stack: TypeScript, Node.js)

### In progress

- Social agent: The agent that answers comments on my posts within a policy, with a lock on sensitive topics, open source. (Type: AI & agents)
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)
05 · GitHub

Pick the next post

This week's slot is AI built in public. Pick the topic I write next: one pick per GitHub account, which you can change until the round closes on Oct 5, 2026.

  1. AA cheap model obeyed a prompt injection. How a skill fixed it.0 picksPick
  2. BLinkedIn's API won't let me read comments. What I did instead.1 pickPick
  3. CEvals with and without a skill: the real numbers.0 picksPick
## Pick the next post

This week's slot is **AI built in public**. Pick the topic I write next: one pick per GitHub account, which you can change until the round closes on Oct 5, 2026.

- A: [A cheap model obeyed a prompt injection. How a skill fixed it.](https://github.com/chrissgon/chrissgon/issues/new?template=pick.yml&title=pick%3A%20A) (0 picks)
- B: [LinkedIn's API won't let me read comments. What I did instead.](https://github.com/chrissgon/chrissgon/issues/new?template=pick.yml&title=pick%3A%20B) (1 pick)
- C: [Evals with and without a skill: the real numbers.](https://github.com/chrissgon/chrissgon/issues/new?template=pick.yml&title=pick%3A%20C) (0 picks)

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

06 · 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)
07 · 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)