DEV Community: J Now

Built a Terminal Theme Around One Specific Blue From 1960

J Now — Tue, 14 Jul 2026 15:06:30 +0000

Yves Klein registered International Klein Blue as a pigment in 1960 — a binder formula that lets ultramarine hold its full saturation without going flat on canvas. The depth it produces reads less like a color than like an absence. That quality is the entire design rationale for this project.

The reading problem it's solving: spending hours a day inside Claude Code means spending hours reading prose — tool output, reasoning traces, permission prompts, multi-paragraph explanations. The terminal themes I had were tuned for token differentiation in syntax trees. Wrong job.

Klein Void ships as four macOS Terminal.app .terminal profiles, built with a variation-aware Objective-C builder and installed via install.sh (rollback via restore.sh). Contrast verification uses APCA's Lc metric with per-role minimums: body text at Lc 90, subtle roles at 75, muted at 45, accents at 60.

Pure IKB (the hex I'm not writing here because validators eat color codes as hashtags) fails as readable text on dark ground — Lc -12, effectively invisible. So it's split across two ANSI slots: ansi:blue gets pure IKB for decorative borders and highlights where legibility isn't required, and ansi:blueBright gets a lifted Klein-family blue, APCA-cleared for permission-prompt text.

The four variants differ mainly on one slot: ansi:redBright, which Claude Code routes its claude-sand brand color through. Klein Void Sand & Sea accepts that as a second hero alongside IKB. Klein Void Refined and Gallery suppress it; Klein Void Prot verifies every accent slot against strict APCA gates — the only variant where all accents pass.

Font options: CommitMono-Regular on V1 and V3, IBM Plex Mono on V2 and V4, both installed to ~/Library/Fonts/.

One non-obvious requirement: Claude Code must be set to dark-ansi via its /theme picker. On any other setting it ignores the Terminal.app ANSI palette and renders its own hardcoded RGB values. The theme does nothing until that's switched.

https://github.com/robertnowell/klein-void

When a word stops you cold, you shouldn't have to leave the page

J Now — Tue, 14 Jul 2026 14:13:14 +0000

Here's the pattern that drove me to build this: reading a dense article, hit a term I half-know — say, "apophenia" — open a new tab, read the Wikipedia entry, open two more tabs from that, come back six minutes later with no idea where I was in the original piece. The article is still there. My thread of thought isn't.

rabbitholes is a Chrome extension that renders an inline explanation next to your cursor when you highlight text. The tooltip lives in a shadow DOM so it doesn't touch the host page's styles or layout. You never leave the article.

The part I use most: every word in the explanation is itself clickable. Highlight "apophenia," read the explanation, notice the word "pareidolia" in the response, drag across it — new explanation, same inline panel, same page. The rabbit-hole counter ticks up. You can go six hops deep into a concept tree without a single new tab.

Two suggested follow-on topics appear at the bottom of each answer — not random, but the most interesting threads from that specific explanation. There's also a globe icon that re-runs the query enriched with Brave Search results, with source chips you can open if you want to verify something.

Requests go directly from your browser to api.anthropic.com. No intermediary server, zero telemetry, no analytics. Your Anthropic API key lives in chrome.storage.sync and never leaves the browser.

// shadow DOM attachment keeps tooltip styles isolated from host page
const shadow = container.attachShadow({ mode: 'open' });

The reason for shadow DOM over an iframe overlay: iframes can't inherit host-page fonts without a flash of unstyled content, and matching typography matters when the tooltip is sitting inline with an article you're reading.

https://github.com/robertnowell/rabbitholes

Pronunciation is how you remember what you learned

J Now — Tue, 14 Jul 2026 12:55:03 +0000

I built konid after spending six months translating work emails in French and retaining almost nothing. I'd get a translation, paste it in, move on. Same words came up two weeks later and I had to look them up again — the task got done but nothing stuck.

The missing piece wasn't more vocabulary. It was audio. Hearing the actual vowel length, the liaison, the stress pattern — that's what converts a string of characters into something your brain files as language rather than text. So konid plays pronunciation through your speakers directly, using node-edge-tts with no external API key.

But pronunciation alone isn't enough if the phrase is wrong for the situation. Literal translation tools return one answer with no indication of whether it sounds like a native speaker, a textbook, or someone who learned the language from a phrasebook. konid returns three options per query, ordered casual to formal, with the register explained and a cultural context note comparing the options. If you're trying to tell your partner something that sounds real in their first language — not technically correct, actually real — the difference between those three options matters.

It runs as an MCP server, so it lives inside the tools you're already in. Claude Code setup is one line:

claude mcp add konid-ai -- npx -y konid-ai

Also works in Cursor, VS Code Copilot, Windsurf, Zed, JetBrains, and Claude Cowork. If you're on ChatGPT, it installs as an app via Developer mode using the endpoint https://konid.fly.dev/mcp.

13+ languages: Mandarin, Japanese, Korean, Spanish, French, German, Portuguese, Italian, Russian, Arabic, Hindi, and more.

MIT licensed. https://github.com/robertnowell/konid-language-learning

From a text brief to a scored HTML email: how Kopi works

J Now — Tue, 14 Jul 2026 11:59:37 +0000

Here's the brief I sent:

Black Friday flash sale. 30% off all bundles. Ends Sunday midnight. Urgent tone. Brand colors: deep navy and gold. CTA button above the fold.

What came back four minutes later: a complete HTML email with a nav bar, hero section, product grid, countdown reference in the copy, and a gold CTA button sitting at 680px above the fold on desktop.

That part I expected. The part that changed how I work: before I could export it, Kopi scored it. Layout hierarchy: 88. Mobile readability: 91. CTA contrast: 94. Twelve other criteria, each with a number between 0 and 100 and a short note on what pulled the score down.

I'd been using Klaviyo's template builder for two years. The builder isn't bad — the problem is it starts blank. You drag in a hero block, pick a font, realize the mobile preview looks broken, fix the padding, forget to check CTA contrast, send anyway. The design feedback loop only closes after the campaign goes out and click rates tell you something was off.

Kopi closes it before you hit export. The scoring runs on every generated email automatically — you're not running a separate audit tool or squinting at a contrast checker. The critique ships with the email.

A few things worth knowing if you're evaluating it:

It integrates directly with Klaviyo, so export is one step, not download-reupload.
You can feed it your brand's fonts, colors, and layout preferences and it holds to them across campaigns.
There's a public gallery at trykopi.ai/emails with 400+ emails that scored 80 or above — useful for seeing what a high-scoring brief actually produces before you write your own.
It runs as an MCP server, so if you work in Claude Code or Cursor it fits into that workflow without switching tools.

The brief-to-scored-email flow is at trykopi.ai

Why I Built a Skill Tracker for Claude Code Sessions

J Now — Tue, 14 Jul 2026 11:06:10 +0000

I've been using Claude Code daily for months. At some point I noticed I was fast — but I couldn't tell if fast meant skilled or just habitual. Same prompting patterns, same delegation moves, same blind spots I never examined.

Anthropic published a study in February 2026 covering 9,830 Claude conversations, measuring 11 observable collaboration behaviors across their user base. I wanted to know what my distribution looked like against that baseline, and specifically which behaviors I was skipping entirely.

skill-tree analyzes your Claude Code or Cowork session history, classifies those same 11 behaviors using the 4D AI Fluency Framework (Dakan & Feller), assigns one of seven archetype cards, and picks a behavior you haven't touched as a growth quest for your next session.

The behavior taxonomy runs on three visible axes — Description, Discernment, Delegation — plus a fourth (Diligence) that doesn't surface in chat logs. The classifier runs on Fly.io using Claude Haiku, takes 30–60 seconds end-to-end across seven steps: find session files, extract user messages, classify, assign archetype, synthesize narrative, render, return a stable URL. The cards are rendered as tarot cards with curated museum art. You can see a live example at skill-tree-ai.fly.dev/fixture/illuminator.

The design detail worth explaining: Cowork's $HOME is ephemeral — anything written there doesn't survive across sessions. Growth quests need to persist, so the tool uses ~/.skill-tree/ on Claude Code and $CLAUDE_PLUGIN_ROOT/.user-state/ on Cowork. Same tool, two state paths, different reasons.

Install in Claude Code:

claude plugin marketplace add robertnowell/ai-fluency-skill-cards
claude plugin install skill-tree-ai@ai-fluency-skill-cards

Cowork users: skill-tree-ai.zip. Also available as an MCP server (npm: skill-tree-ai) for Cursor, VS Code, and Windsurf.

https://github.com/robertnowell/ai-fluency-skill-cards

Terminal themes tune for syntax. Claude Code is 80% prose.

J Now — Mon, 13 Jul 2026 15:29:32 +0000

For hours every day I'm reading paragraphs — tool output, reasoning traces, permission prompts, explanations. Almost none of it is code. Standard terminal themes spend their contrast budget on syntax token differentiation: keywords, strings, numbers. That's the wrong allocation when your screen is 80% English at body size.

So I built four Terminal.app themes tuned specifically for Claude Code's ANSI slot usage.

The constraint that drove every decision: pure IKB (hex 002FA7) — Yves Klein's pigment — fails APCA contrast as text on a dark ground (Lc -12, effectively invisible). I wanted that blue in the theme because it's the right blue, so I split it. Pure IKB goes into ansi:blue, which Claude Code uses for decorative borders and highlights where legibility isn't load-bearing. A lifted Klein-family A8BEF0 goes into ansi:blueBright, which Claude Code uses for permission-prompt text that you actually need to read.

Contrast targets are per-role: body >= 90 Lc, subtle >= 75, muted >= 45, accent >= 60. Klein Void Prot (V3) is the only variation where every accent slot clears strict gates — the others make deliberate tradeoffs between brand fidelity and maximum legibility.

The four variations split on one specific differentiator: how they handle ansi:redBright, which Claude Code maps to the claude-sand brand color. Refined and Prot neutralize it to avoid competing with IKB. Sand & Sea accepts it as a second hero color, which produces a warm/cool contrast that happens to mirror Claude's own brand palette.

Install requires one step that's easy to miss: Claude Code's /theme picker must be set to dark-ansi. If it's on any other setting, Claude Code ignores the Terminal.app ANSI palette entirely and falls back to hardcoded RGB values.

git clone https://github.com/robertnowell/klein-void
cd klein-void
bash install.sh

Then /theme → dark-ansi in Claude Code. Rollback via restore.sh if it's not for you.

https://github.com/robertnowell/klein-void

Inline explanations on every page, without opening a new tab

J Now — Mon, 13 Jul 2026 14:20:53 +0000

Built rabbitholes because I kept half-reading articles. Technical words I sort-of knew, historical references I could have looked up — I'd skip them because opening a new tab meant losing my place and usually my thread of thought.

The extension does one thing: highlight any text, and a shadow-DOM tooltip renders an explanation next to your cursor. No new tab. No page pollution. The shadow DOM is intentional — it can't bleed into the host page's styles, so it works consistently across Wikipedia, Substack, arXiv, wherever.

What keeps me using it past the first day is the traversal. Click any word in the explanation to drill into that. Drag across a phrase to treat it as a new query. Every answer surfaces two suggested rabbit-hole topics — the most interesting threads from that point — one click away. There's a counter tracking how many hops deep you are.

When the explanation alone isn't enough, a globe icon re-answers the query enriched with Brave Search results, with clickable source chips. The pencil icon opens a follow-up input that inherits everything you've read so far as context.

No intermediary server. Requests go directly from the browser to api.anthropic.com and api.search.brave.com. Manifest V3, API key stored in chrome.storage.sync, zero telemetry.

https://github.com/robertnowell/rabbitholes

When one translation isn't enough: building a language coach for real speech

J Now — Mon, 13 Jul 2026 13:20:30 +0000

I was working on a Japanese work email last year, translating sentence by sentence, when I realized I had no idea whether my phrasing sounded junior or senior, distant or warm. Google Translate gave me one answer with no signal about where it sat on any of those axes. I sent the email and never found out if it landed wrong.

That's the gap konid fills. For anything you want to say, it returns three options — casual, neutral, formal — with the register explained and a cultural note on what each choice signals to a native speaker. Not a list of synonyms. An explanation of the relationship the phrase implies.

Here's what that looks like for a concrete case. Say you want to tell someone in Japanese "I missed you today." A literal tool gives you one sentence. konid gives you:

Option 1 (casual): what you'd text someone you're close to
Option 2 (warm/neutral): usable across most relationships without risking sounding cold
Option 3 (formal/tender): appropriate when the emotional weight matters and you want to be precise

Each option includes a note on when it fits and what it signals. Audio pronunciation plays directly through your speakers — no API key required, handled via node-edge-tts.

The install in Claude Code is one line:

claude mcp add konid-ai -- npx -y konid-ai

It also works in Cursor, VS Code Copilot, Windsurf, Zed, JetBrains, and Claude Cowork. If you're on ChatGPT with Developer mode, the endpoint is https://konid.fly.dev/mcp.

Supports 13+ languages: Mandarin, Japanese, Korean, Spanish, French, German, Portuguese, Italian, Russian, Arabic, Hindi, and more.

I built this because I was translating work emails in a language I'm still learning, and every translation that just got me through the task taught me nothing. Seeing three options side by side — with the cultural delta explained — is what actually built my intuition over time.

MIT licensed. https://github.com/robertnowell/konid-language-learning

When the launch spike fades and you stop showing up

J Now — Mon, 13 Jul 2026 11:36:29 +0000

The post that gets traction isn't the first one — it's the fifteenth. Most tools die before anyone gets there because after the launch spike, daily distribution is just repetitive manual work: write a post, pick a channel, pick an angle, stay under 280 characters for X but 500 for Mastodon, check what you already said last week, repeat tomorrow.

I built marketing-pipeline to handle that recurring work after a project ships.

Onboarding a new project is one command:

marketing onboard --name my-tool --repo owner/repo --kind mcp-server

That fetches the README, sends it to Claude, and saves a structured profile — problem statement, specific facts, rotation angles — to projects.yml. After that, a GitHub Actions cron at 14:00 UTC on weekdays runs marketing cycle, which picks the least-recently-used angle for each project, drafts channel-appropriate posts, and publishes across Bluesky, Dev.to, Hashnode, and Mastodon without any manual intervention.

Two constraints worth knowing about. First, per-channel length limits are enforced in code: 280 chars for X, 300 for Bluesky, 500 for Mastodon, 150–400 words for Dev.to and Hashnode. Second, there's an antislop gate in pipeline/antislop.py that hard-rejects specific tokens before any post goes out — "excited", "game-changer", "unlock", "AI-powered", emoji, hashtags, and exclamation points are all blocked at the gate. The drafts read like a practitioner wrote them or they don't ship.

The kind field routes projects to type-specific directories automatically. An mcp-server hits MCP Registry, Smithery, Glama, and PulseMCP; a claude-skill targets awesome-claude-code (payload generated, but their rules require a human to submit via GitHub issue — that one can't be fully automated); a browser-extension covers Chrome Web Store, Firefox AMO, and Edge Add-ons.

Requirements: Anthropic API key, plus credentials for at least Bluesky, Dev.to, and Hashnode. Mastodon and Slack are optional.

https://github.com/robertnowell/marketing-pipeline

Why IKB Fails as Terminal Text (and How I Split It Across Two ANSI Slots)

J Now — Sun, 12 Jul 2026 14:48:38 +0000

Most terminal themes are built for code. Mine is built for Claude Code, which means most of what I read in it is prose — tool output, reasoning traces, permission prompts. After a few months of daily sessions, the default theme started feeling wrong in a way I couldn't immediately name.

The problem I eventually landed on: no one had tuned an ANSI theme for the specific slots Claude Code actually uses. So I built klein-blue — four Terminal.app variations anchored to Yves Klein's International Klein Blue pigment.

The interesting constraint is that pure IKB fails as text on a dark ground. APCA Lc -12. That's not a borderline fail — it's effectively absent. Which creates a real design problem when the whole point is IKB.

The fix I settled on: split the pigment across two ANSI slots with different jobs.

ansi:blue       002FA7   — decorative only: borders, dividers, highlights
ansi:blueBright A8BEF0   — readable Klein-family tone for permission-prompt text

Claude Code routes permission-prompt text through ansi:blueBright, not ansi:blue. That slot assignment is the thing that makes the split workable — I'm not fighting Claude Code's rendering, I'm mapping to what it already does.

The four variations use APCA Lc gates per role: body >= 90, subtle >= 75, muted >= 45, accent >= 60. Klein Void Prot (V3, CommitMono) is the only one where every accent passes strict gates. The others make deliberate tradeoffs — Klein Void Gallery pushes maximum blue presence at the cost of some accent strictness.

The second design decision worth naming: ansi:redBright is the slot Claude Code uses for its claude-sand brand color. That's where the variations diverge most visibly. Klein Void Sand & Sea accepts it as a second hero color alongside the blue. Klein Void Refined neutralizes it to avoid competition. That single slot choice accounts for most of the visual difference between variations.

Ships as .terminal profile files for macOS Terminal.app. Requires Claude Code's /theme picker set to dark-ansi — otherwise Claude Code ignores the ANSI palette entirely and uses its hardcoded RGB values.

https://github.com/robertnowell/klein-void

I built inline Wikipedia for every page I read

J Now — Sun, 12 Jul 2026 14:04:42 +0000

Reading a dense article about monetary policy last week, I hit "Triffin dilemma" and did what I always do: opened a new tab, read half of Wikipedia, forgot what I was originally reading, and spent twenty minutes somewhere else entirely. The context switch isn't a minor annoyance — it compounds. By the time I return, the thread I was following has gone cold.

So I built rabbitholes: a Chrome extension where highlighting any text renders an explanation in a shadow-DOM tooltip next to your cursor. You never leave the page.

The shadow DOM detail matters. A lot of overlay extensions inject markup directly into the host document, which breaks host styles or gets clobbered by them. Shadow DOM keeps the tooltip isolated — no style pollution in either direction.

The part I actually use most: every word in the explanation is itself clickable. Highlight "Triffin dilemma," get an explanation that mentions "Bretton Woods," click that phrase, go deeper. There's a hop counter so you can see how far you've traveled from the original article. Go deep enough on almost anything and you hit philosophy — the trail is shareable.

Two other features worth naming:

Globe icon → re-runs the query enriched with Brave Search results
Pencil icon → free-form follow-up that inherits the current context

The search-enriched mode returns source chips you can click. It's useful when you want primary sources rather than an explanation.

On the privacy side: zero telemetry, no intermediary server. Requests go directly from your browser to api.anthropic.com and api.search.brave.com. Your Anthropic API key lives in chrome.storage.sync — encrypted, never leaves the browser. Manifest V3.

The mental model I was chasing: every concept in every article I read should be one highlight away from becoming clear, without breaking the read. That's what it does.

https://github.com/robertnowell/rabbitholes

Every work email I translated taught me nothing

J Now — Sun, 12 Jul 2026 12:51:46 +0000

I translate work emails in French every day. For months I was copying sentences into Google Translate, getting one flat answer back, sending it, moving on. Nothing stuck. I wasn't learning registers or idioms — I was just shipping text.

The problem isn't the translation. It's that literal translation tools treat every request as a one-shot task. You ask for a phrase, you get a phrase. No sense of whether it's too casual for a client, too stiff for a colleague, or just technically correct but weirdly phrased in a way a native speaker would notice.

So I built konid — an MCP server that returns three options per query, ordered casual to formal, with the register explained and a nuance comparison between them. Supports 13+ languages including French, Japanese, Arabic, and Korean.

The difference in practice: I ask how to write a polite follow-up to a delayed supplier. I get back three versions — one I'd use with a close contact, one for a standard professional context, one for a formal or bureaucratic situation. Each one explains what makes it land at that register. I pick the one that fits, but I also now understand why the other two exist.

Audio pronunciation plays directly through speakers via node-edge-tts — no external API key, no setup beyond the install.

Adding it to Claude Code is one line:

claude mcp add konid-ai -- npx -y konid-ai

Also works in Cursor, VS Code Copilot, Windsurf, Zed, JetBrains, and Claude Cowork. If you're on ChatGPT, there's a Developer mode endpoint at https://konid.fly.dev/mcp.

MIT licensed. Source at https://github.com/robertnowell/konid-language-learning.