The code and data behind xeiaso.net
Revert "Add draft blog post: Vibe Coding Trip Report - Making a sponsor panel…" (#1158)
This reverts commit e608de05adf6fb63e1acdde5847cf3574e4c9100.
-147
-147
lume/src/blog/2026/sponsor-panel-trip-report.mdx
-147
lume/src/blog/2026/sponsor-panel-trip-report.mdx
···
1
-
---
2
-
title: "Vibe Coding Trip Report: Making a sponsor panel"
3
-
desc: "I needed to ship this before my surgery, so I vibe coded it. It turned out well enough."
4
-
date: 2026-03-08
5
-
# hero:
6
-
# ai: ""
7
-
# file: ""
8
-
# prompt: ""
9
-
# social: false
10
-
---
11
-
12
-
import Conv from "../../_components/XeblogConv.tsx";
13
-
import Admonition from "../../_components/Admonition.jsx";
14
-
15
-
A few weeks before surgery, I stared at my project list and felt the clock. If I don't ship this now, it rots for months. I'm [on medical leave recovering from that surgery now](/blog/2026/killing-my-inner-necron/), and the window for meaningful work was closing fast.
16
-
17
-
The project: a sponsor panel at [sponsors.xeiaso.net](https://sponsors.xeiaso.net). A dashboard showing who sponsors me on GitHub, what tiers they're at, the financial plumbing of open source. Not glamorous, but I'd procrastinated long enough that it had become a guilt object.
18
-
19
-
I didn't build it the way I normally would. I vibe coded it -- directed an agent team, prepared skills, let the AI handle the parts that had defeated me three separate times. It worked. I'm still kind of surprised.
20
-
21
-
## The GraphQL swamp
22
-
23
-
Go and GitHub's GraphQL API are oil and water. I've tried to build this sponsor panel three times, and every attempt died in the same swamp.
24
-
25
-
<Conv name="Cadey" mood="facepalm">
26
-
Every. Single. Time.
27
-
</Conv>
28
-
29
-
The GraphQL libraries in Go are genuinely awful. You choose between [shurcooL/graphql](https://github.com/shurcooL/graphql), which uses reflection-based struct tag gymnastics to build queries, and code generation tools that produce mountains of boilerplate you will never understand. Neither sparks joy. Both make you question your career.
30
-
31
-
GitHub removed their GraphQL explorer too, so you can't interactively poke at the schema to discover what fields exist. You're reading raw docs and guessing. It's the kind of developer experience that makes you close your laptop and go outside.
32
-
33
-
Each attempt followed the same arc: excitement, an evening wrestling struct tags, the dawning realization that sponsor pagination is more complex than expected, frustration, then the shelving.
34
-
35
-
## The hail mary
36
-
37
-
With surgery looming, I figured: worst case, the vibe coding attempt fails and I'm exactly where I started. Best case it works and I ship something before disappearing into a haze of anesthesia and hospital food.
38
-
39
-
Needless to say, it works. The panel is live. You can go look at it right now.
40
-
41
-
<Conv name="Aoi" mood="wut">
42
-
Wait, you just... let AI write the GraphQL query code? The stuff that defeated
43
-
you multiple times?
44
-
</Conv>
45
-
46
-
<Conv name="Cadey" mood="coffee">
47
-
Yep. Turns out when you stop caring whether the struct tags are "clean", you
48
-
can just let it generate whatever accursed abomination parses the JSON
49
-
correctly and move on with your life.
50
-
</Conv>
51
-
52
-
Stack: Go, [Templ](https://templ.guide), [HTMX](https://htmx.org), Postgres via [Neon](https://neon.tech). GitHub OAuth handles login, the Sponsors GraphQL API feeds the sponsor data. Nothing exotic -- but solid enough to ship.
53
-
54
-
## Preparing the skills
55
-
56
-
Claude Code supports [agent skills](https://docs.anthropic.com/en/docs/claude-code/skills) -- pre-loaded context documents that tell the model how to work with a specific technology. I've been experimenting with them for months, and this project put them through their paces.
57
-
58
-
[Templ](https://templ.guide) barely exists in LLM training data. It's a young Go templating library, and most models confidently hallucinate syntax that looks plausible but doesn't compile. Without intervention, you get code that's 80% right and 100% broken.
59
-
60
-
Skills fix this. Loading reference documents into the context window gives the model needles to copy from its haystack rather than reconstructing syntax from vibes. It doesn't need to _infer_ how Templ works -- it reads the skills and copies the patterns.
61
-
62
-
I made four:
63
-
64
-
- **templ-syntax**: Templ's syntax, with detailed resources for edge cases. The most important one -- covers expressions, conditionals, loops, and how Go integration _actually_ works versus how you'd expect.
65
-
- **templ-components**: How to break UI elements into reusable components with props, children, and composition. Without this, the model dumps everything into one giant template.
66
-
- **templ-htmx**: Weird edge cases when combining Templ with HTMX. HTMX attributes interact with Templ's rendering model in subtle ways, and getting it wrong produces bugs that are maddening to track down.
67
-
- **templ-http**: Best practices for wiring Templ components into `net/http` handlers. Glue code that's easy to get subtly wrong in ways that only surface at runtime.
68
-
69
-
With these loaded, the model goes from "confidently wrong about Templ" to "reliably correct." The difference between fighting your tools and directing them.
70
-
71
-
## Specification
72
-
73
-
Before turning the agents loose, I worked with [Mimi](https://github.com/anthropics/claude-code) to draft a spec -- not "build me a sponsor panel" and walk away. That's how you get a mess.
74
-
75
-
I described the OAuth flow, the data I needed from the GraphQL API, the page structure, the tier management. We went back and forth until it felt right. Then I ran a second agent over the spec -- one prompted as a cynic whose job was to cut anything that wasn't strictly necessary for an MVP. It was ruthless. It was correct. Half the features I'd specced didn't survive.
76
-
77
-
<Conv name="Numa" mood="smug">
78
-
You mean you automated the "do we actually need this?" meeting. Like a normal
79
-
person would do if they had access to an infinite supply of skeptical coworkers.
80
-
</Conv>
81
-
82
-
What survived:
83
-
84
-
- GitHub OAuth login flow
85
-
- Querying the Sponsors GraphQL API for sponsor data (name, tier, avatar, URL)
86
-
- Caching sponsor data in Postgres
87
-
- A dashboard showing current sponsors grouped by tier
88
-
- Session management with secure cookies
89
-
90
-
Nothing revolutionary. But writing it down gave the agent team a clear target instead of letting them vibe their way into feature creep.
91
-
92
-
## Implementation with an agent team
93
-
94
-
Once I locked the spec, a second agent team split it into tasks and started building. Meanwhile, I did the one thing the agents couldn't do themselves: provision credentials.
95
-
96
-
GitHub OAuth client ID and secret. A Neon database URL. A personal access token with the `read:org` scope for the Sponsors API. The workflow: agent hits an error asking for a credential, I paste it in, agent continues.
97
-
98
-
Async pair programming. My partner wrote code faster than me but couldn't open a browser to create an OAuth app.
99
-
100
-
<Conv name="Aoi" mood="grin">
101
-
So you were the intern in this arrangement.
102
-
</Conv>
103
-
104
-
<Conv name="Cadey" mood="coffee">
105
-
I was the one with the password manager. Arguably more important.
106
-
</Conv>
107
-
108
-
The magic moment: OAuth worked on the first try. Click "Sign in with GitHub," get redirected, authorize the app, land on a page that said "Hi there, Xe!" with real sponsor data below. The first version looked incredibly generic -- bootstrap-y, default fonts, zero personality -- but it _worked_.
109
-
110
-
Sponsor avatars loaded. Tier names displayed correctly. Real data from the API that had defeated me for years.
111
-
112
-
<Conv name="Cadey" mood="aha">
113
-
I genuinely shouted at my monitor. My husband came in to check on me.
114
-
</Conv>
115
-
116
-
## UI v2: making it match my site
117
-
118
-
The generic look lasted about an hour before I couldn't stand it. I had the agents restyle everything -- the dark background, the fonts, the xeiaso.net vibe.
119
-
120
-
Mostly CSS and Templ component work. Swapping a bootstrap card for a custom styled component is where the Templ skills shine: the model knows the precise syntax for conditional classes, children composition, and attribute spreading. No hallucinated tag names, no broken renders.
121
-
122
-
<!-- TODO: screenshots of the final themed panel -->
123
-
124
-
## Org sponsorships
125
-
126
-
After the initial launch, I made another pass for organizational sponsorships. This proved gnarlier than individual ones -- different schema shape, different fields, different everything. GitHub treats org sponsors as a fundamentally different entity in the API.
127
-
128
-
<Conv name="Cadey" mood="facepalm">
129
-
Because of course they do.
130
-
</Conv>
131
-
132
-
Getting org sponsorships right required another round of GraphQL wrestling, but the pattern held: let the agent generate the query, verify the data comes back, move on. The code isn't pretty. The raw JSON parsing would make a linting tool weep. But it handles both individual and organizational sponsors, and that's what matters.
133
-
134
-
## Was it worth it?
135
-
136
-
The sponsor panel exists. It works. I shipped it before going under.
137
-
138
-
<Conv name="Cadey" mood="coffee">
139
-
We'll see how much I still like it in a few months when I look at the code
140
-
with fresh eyes. Post-surgery me will have opinions.
141
-
</Conv>
142
-
143
-
Vibe coding works best for exactly this: punching through a wall you've hit repeatedly, shipping a clean-enough MVP before a hard deadline. I wouldn't use it for codebases that whole teams need to understand and maintain. But for "generate the cursed GraphQL code so I never touch shurcooL struct tags again"? Four Markdown files loaded into the context window turned that frustrating experiment into a working product. Skills aren't optional -- they're the difference between an AI that flails and one that ships.
144
-
145
-
I suspect I'll rewrite the GraphQL code after recovery. There's a version of this with proper query types instead of raw JSON parsing, and future-me will demand it. But right now the panel exists, the data is correct, and my sponsors can see I appreciate them.
146
-
147
-
Knowing that loose end was tied before going under -- that mattered more than clean code.