DEV Community: J Now

The growth quest picks what you avoid, not what you're already good at

J Now — Sat, 23 May 2026 18:58:02 +0000

Anthropics February 2026 study classified 11 observable collaboration behaviors across 9,830 Claude conversations. After months of daily Claude Code use I wanted to know which of those 11 behaviors showed up in my sessions — and which ones never appeared.

The answer was uncomfortable. I was running three behaviors on repeat: decomposing tasks, specifying output format, providing context. The other eight barely registered.

skill-tree analyzes your Claude Code or Cowork session history, classifies all 11 behaviors against the Fluency Index baseline, and assigns you one of seven archetype cards rendered as tarot-style images with curated museum art. The live example at skill-tree-ai.fly.dev/fixture/illuminator shows what a full result looks like.

The part I want to explain is the growth quest mechanic, because it's doing something specific: it doesn't pick a behavior you're close to improving. It picks the behavior you avoid most. The logic is that if you're already fast at decomposing tasks, doing more decomposition doesn't expand your range — it deepens a rut. The Dakan & Feller 4D Fluency Framework (Description, Discernment, Delegation, Diligence) covers behaviors that don't compose neatly. Getting better at delegation looks nothing like getting better at discernment. So picking the furthest behavior, not the nearest, is the only way to break out of a local optimum.

The quest persists across sessions via a SessionStart hook so Claude Code surfaces it at the start of the next conversation — stored in ~/.skill-tree/ on Claude Code, $CLAUDE_PLUGIN_ROOT/.user-state/ on Cowork because Cowork's $HOME is ephemeral.

End-to-end analysis takes 30–60 seconds: find session files, extract user messages, remote classifier (Claude Haiku on Fly.io), archetype assignment, narrative synthesis, render, return a stable URL.

Install in Claude Code:

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

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

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

Every work email I translated was a missed lesson

J Now — Sat, 23 May 2026 16:52:21 +0000

Six months into learning Japanese well enough to handle vendor emails, I noticed I'd translated the same polite refusal phrase four times without retaining it once. Google Translate gave me one answer, I pasted it in, moved on. Nothing stuck.

The problem isn't the translation itself — it's that a single output teaches you nothing about why that phrasing works, what register you're operating in, or what a more casual version would sound like if you were writing to someone you actually knew.

So I built konid as an MCP server. Every query returns three options ordered casual to formal, with the register explained and a cultural context note comparing them. For that refusal phrase, I got the stiff keigo version appropriate for a new vendor, a warmer alternative for someone I'd worked with for months, and a note on why mixing the two registers in the same email would read as odd to a native speaker.

Over enough work emails, that becomes a real learning loop instead of a copy-paste utility.

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

It runs inside Claude Code, Cursor, VS Code Copilot, Windsurf, Zed, JetBrains, and Claude Cowork. Also installs as a ChatGPT app via Developer mode at https://konid.fly.dev/mcp. Audio pronunciation plays directly through speakers via node-edge-tts — no external API key.

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

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

The MCP Registry, Smithery, and GitHub Topics don't index themselves

J Now — Sat, 23 May 2026 14:54:45 +0000

Shipping an MCP server means nothing if developers can't find it. The three places they actually look — the official MCP Registry, Smithery, and GitHub Topics — each require a separate submission, and the MCP Registry is what Glama and PulseMCP pull from automatically, so skipping it means skipping those too.

marketing onboard --name my-tool --repo owner/repo --kind mcp-server handles all three in one step. It fetches your README, extracts the problem and key facts via Claude, writes them to projects.yml, and files the directory submissions. After that, a GitHub Actions cron at 14:00 UTC on weekdays rotates through four social channels — Bluesky, Mastodon, Dev.to, Hashnode — picking the least-recently-used angle each run.

The part I spent the most time on is the antislop gate in pipeline/antislop.py. It hard-rejects specific tokens before any post goes out: excited, game-changer, unlock, empower, AI-powered, emoji, hashtags, exclamation points, and rhetorical questions. Every post has to clear that filter or it doesn't ship. Per-channel length limits are enforced the same way — 300 chars for Bluesky, 280 for X, 500 for Mastodon, 150–400 words for Dev.to and Hashnode.

One caveat worth knowing: awesome-claude-code submission can't be automated. Their rules require a human to file via their GitHub issue form. The pipeline generates the payload, but you submit it once manually.

You need an Anthropic API key plus credentials for at least Bluesky, Dev.to, and Hashnode to run the full pipeline. Mastodon and Slack are optional.

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

Why WCAG ratios misled me building a dark terminal theme

J Now — Sat, 23 May 2026 13:04:43 +0000

I reached for WCAG contrast first. Checked IKB against my dark background, got a ratio above 3:1, and assumed it was usable. Then I actually rendered it: the blue was effectively invisible. WCAG's formula treats dark-on-dark the same as light-on-light at the same numerical ratio — it doesn't. APCA does.

APCA produces a signed lightness contrast (Lc). Positive values are light-on-dark; negative are dark-on-light. Pure IKB (hex 002FA7) on a near-black ground scores Lc -12. That's not a low-contrast blue. That's a blue that doesn't exist at reading size.

This distinction matters specifically for Claude Code because the tool uses ANSI slots for semantic roles — permission prompts in one slot, tool output in another, reasoning in a third. If you're calibrating a theme by WCAG, you'll pass a blue that reads as void.

The fix I landed on: split IKB across two slots. Pure 002FA7 goes into ansi:blue, which Claude Code only uses for decorative borders and structural chrome — things you register peripherally, not things you read. The readable slot, ansi:blueBright, gets A8BEF0: still in Klein's family, still cold and high-saturation, but lifted enough to clear the Lc 75 gate I set for "subtle" text.

The four variations ship with different per-role gate strictness. Klein Void Prot is the one where every single accent passes strict APCA gates — body text at Lc ≥90, subtle at Lc ≥75, muted at Lc ≥45, decorative accents at Lc ≥60. The other three trade some gate rigidity for aesthetic choices (accepting claude-sand as a second hero color, maximizing void, etc.).

One practical detail: none of this matters if you haven't set Claude Code's /theme picker to dark-ansi. If you leave it on the default, Claude Code ignores your Terminal.app ANSI profile and uses its own hardcoded RGB palette. The theme does nothing.

Installs via install.sh, fully rollback-able via restore.sh. macOS Terminal.app only.

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

Why shadow DOM beat iframe for inline tooltips

J Now — Sat, 23 May 2026 11:05:38 +0000

The iframe approach seems obvious: sandboxed, isolated, clean. I tried it first. The problem is that iframes can't inherit host-page fonts without a FOUC — you either flash unstyled content, or you hardcode a font stack and accept that your tooltip looks alien on every site with a custom typeface. On a site like Wikipedia or the NYT, that mismatch is immediately jarring.

Shadow DOM solves this differently. The extension's tooltip attaches as a shadow host, which means it's structurally isolated from the page's CSS cascade but physically in the same document. The host page's font rendering applies at the OS level, so body text in the tooltip inherits the same antialiasing and subpixel rendering as the surrounding article. No flash. No mismatch.

The tradeoff is that shadow DOM isolation isn't total. Some CSS custom properties (variables) can pierce the shadow boundary, so if the host page defines something like --background: transparent at the :root level, you need to explicitly reset inside your shadow styles. I ran into this on a few dark-mode sites where the tooltip was inheriting a near-invisible background until I added an explicit background: white block scoped to the shadow root.

The other thing iframes make hard: positioning. An absolutely-positioned iframe has to fight the host page's stacking context and overflow rules. I wanted the tooltip to anchor to cursor position, which means reading mouseup coordinates and placing a DOM node there. With shadow DOM the placement logic is just standard position: fixed math. With an iframe, you're fighting overflow: hidden on parent containers on sites you don't control.

For rabbitholes — a Chrome extension that renders inline explanations from Claude Haiku 4.5 for any text you highlight — the shadow DOM approach means the tooltip looks at home on every site, inherits correct fonts without polling, and doesn't trigger layout shifts when it appears.

Zero telemetry, Manifest V3. Requests go directly from your browser to api.anthropic.com.

https://github.com/robertnowell/rabbitholes

Scoring email designs before they ship, not after

J Now — Fri, 22 May 2026 19:24:50 +0000

Most email tools hand you a blank canvas and a template library. You assemble something, send it, and find out two weeks later from click data that your CTA was unreadable on mobile.

Kopi runs a design critique on every email before it leaves — scoring layout hierarchy, mobile readability, CTA contrast, and 12 other criteria on a 0–100 scale. The public gallery at trykopi.ai/emails has 400+ emails that scored 80 or above, so you can see what the rubric actually rewards before you start building.

The generation side works from a plain-text brief. Describe the campaign goal, your audience, any constraints — Kopi produces complete HTML in under 5 minutes. It can also learn your brand's fonts, colors, and layout preferences so you're not re-specifying them every run.

For teams already on Klaviyo, there's a direct export. For devs building on top of it, it runs as an MCP server inside Claude Code, Cursor, or ChatGPT.

// Example: MCP integration in Cursor
kopi.generate({
  prompt: "Abandoned cart email for a specialty coffee brand, two CTAs, dark mode friendly",
  brand: "roaster-co"
})
// returns scored HTML + critique JSON in <5 min

The scoring pass alone is the thing I'd have paid for separately. Knowing a design has a 73 on CTA contrast before a campaign goes out is more useful than any A/B test you run after.

https://trykopi.ai

What 9,830 Claude conversations reveal about your own habits

J Now — Fri, 22 May 2026 16:16:51 +0000

Anthropologists studying 9,830 Claude conversations published a behavioral taxonomy in February 2026 — 11 observable collaboration behaviors across three axes (Description, Discernment, Delegation) from Dakan and Feller's 4D AI Fluency Framework. Anthropic's AI Fluency Index gives you a population baseline. I wanted to know where I landed on it.

The honest answer: I had no idea. I'd been using Claude Code daily for months and assumed I was improving. What I actually had was a faster version of the same four or five habits.

So I built skill-tree: it pulls your Claude Code session history, runs your user messages through a remote classifier (Claude Haiku on Fly.io), scores all 11 behaviors against the population baseline, assigns one of seven archetype cards rendered as tarot cards with curated museum art, and returns a stable URL with your results. The whole pipeline — find session files, extract messages, classify, assign archetype, synthesize narrative, render, return URL — takes 30–60 seconds.

The part I use most: the growth quest. It identifies a behavior you haven't touched and pins it to your next session via a SessionStart hook, persisted at ~/.skill-tree/ between sessions.

Install in Claude Code:

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

There's also an MCP package (skill-tree-ai on npm) for Cursor, VS Code, and Windsurf, and a skill-tree-ai.zip for Claude Cowork.

Live example of the rendered output: skill-tree-ai.fly.dev/fixture/illuminator

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

When one translation isn't enough to say what you mean

J Now — Fri, 22 May 2026 12:13:48 +0000

I was writing a message to my girlfriend in her first language — something small, just that I'd been thinking about her. Google Translate gave me one option. It was technically correct and read like a form letter.

The problem with literal translation tools isn't accuracy, it's flatness. You get the words but not the weight. There's no difference between what you'd text someone you love and what you'd write in a work email, no note on whether a phrase sounds natural or slightly stiff, no audio so you can hear whether you're about to say something embarrassing.

I built konid to fix that for myself. For any phrase you want to say, it returns three versions — casual, neutral, formal — in the right order, each with a note explaining the register and how the options differ culturally, not just grammatically. It plays the pronunciation through your speakers directly using node-edge-tts, no external API key.

The specific case I kept running into: saying something tender that actually lands. "I missed you" in Spanish has a few shapes — te extrañé, te he echado de menos, others — and which one you use signals something. konid surfaces that signal instead of collapsing it.

It covers 13+ languages including Mandarin, Japanese, Korean, Spanish, French, Arabic, Hindi, and Russian. Runs as an MCP server, so it works inside Claude Code, Cursor, VS Code Copilot, Windsurf, Zed, JetBrains, and Claude Cowork:

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

Also installs as a ChatGPT app via Developer mode at https://konid.fly.dev/mcp.

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

Cross-posting to four platforms by hand doesn't scale past week one

J Now — Thu, 21 May 2026 19:44:45 +0000

The workflow breaks down fast: you write a Bluesky post (300 chars), realize the Dev.to version needs 150+ words and a code block, forget you used the "onboarding" angle last Tuesday, and skip it because you have actual work to do. Two months later your tool has 3 stars and you've posted about it twice.

I built marketing-pipeline to handle the mechanical parts. The part I want to describe specifically: angle tracking and per-channel formatting.

Every project in projects.yml carries a list of angles — different framings of the same tool. The daily cron at 14:00 UTC picks the least-recently-used angle for each project × channel combination and generates a post shaped to that channel's constraints. Bluesky gets ≤300 chars, X gets ≤280, Dev.to and Hashnode get 150–400 words. You don't track any of that. The pipeline does.

Before anything posts, it runs through pipeline/antislop.py — a hard-reject gate that kills drafts containing excited, game-changer, unlock, empower, AI-powered, emoji, hashtags, exclamation points, or rhetorical questions. Not a style suggestion. A gate. Posts that fail it don't go out.

Onboarding a new project:

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

That command fetches the README, extracts the problem, facts, and angles, and writes them to projects.yml. From there the cron handles rotation. The kind field routes to type-specific directories — mcp-server hits MCP Registry, Smithery, Glama, and PulseMCP; claude-skill targets awesome-claude-code (generates the payload, but their rules require a human to submit via GitHub issue form).

Requires an Anthropic API key plus credentials for Bluesky, Dev.to, and Hashnode at minimum. Mastodon is optional.

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

The Wikipedia-philosophy game, but for everything you read

J Now — Thu, 21 May 2026 12:40:30 +0000

There's a Wikipedia phenomenon where you start on any article, click the first linked concept you don't fully understand, repeat, and eventually land on Philosophy. The path is the point — each hop reveals how much scaffolding you were missing.

I wanted that for every page on the internet, not just Wikipedia.

The problem with tab-based research is the context switch. By the time you've typed a search, skimmed a result, and navigated back, you've lost the sentence you were in. So you either interrupt yourself every paragraph or skim past the gaps and finish the article knowing less than you could.

rabbitholes is a Chrome extension built around staying in place. Highlight any text, and a shadow-DOM tooltip renders an explanation from Claude Haiku 4.5 next to your cursor — no new tab, no host-page pollution. Click any word in that explanation to go one level deeper. Drag across a phrase to do the same.

The part I find myself using most: a rabbit-hole counter that tracks how many hops deep you've gone. Hit the right article on a topic you're genuinely curious about and you can watch it climb. It builds a shareable trail — same mechanic as the Wikipedia philosophy game, but on any page, about anything.

Each answer ends with two suggested threads: the most interesting next topics from where you landed. One click continues the chain.

For when inline explanation isn't enough, a globe icon re-answers the query enriched with Brave Search results, with source chips you can click through. A pencil icon opens a free-form follow-up that inherits the current context as background.

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

Highlight → explanation inline
Click word in explanation → one hop deeper
Repeat → counter increments, trail builds

https://github.com/robertnowell/rabbitholes

What separates a 93/100 email from a 70/100 email

J Now — Wed, 20 May 2026 20:04:11 +0000

A 70 has a CTA button that's 28px tall on mobile. A 93 has one that's 44px minimum, thumb-tappable, with contrast ≥4.5:1 against its background. That's not subjective taste — it's measurable, and most email tools never tell you which one you shipped.

The blank-canvas problem in email marketing is real: Klaviyo, Mailchimp, and every tool like them hand you a template and a send button. Whether your layout hierarchy guides the reader to the CTA, whether your text is legible at 375px wide, whether your button actually gets tapped — you find out from click rate, two days after it's already in 40,000 inboxes.

I built kopi to close that gap. Every email generated gets an automated design critique across 14 criteria — layout hierarchy, mobile readability, CTA contrast, whitespace, font sizing, and more — scored 0–100 before anything ships.

Here's what the score actually catches:

Design critique: 71/100
- CTA contrast: 2.8:1 (target ≥4.5) [-12]
- Mobile tap target: 28px height (target ≥44px) [-8]
- Hierarchy: 3 competing H2s above the fold, no clear primary [-6]
- Image-to-text ratio: 78% image (high spam filter risk) [-3]

A 93 doesn't fail any of those. The hierarchy leads with one statement, one supporting line, one CTA. The button is large enough to tap without zooming. The contrast passes WCAG AA at minimum.

The public gallery at trykopi.ai/emails has 400+ emails that scored 80 or above — browseable by industry and format, so you can see concretely what the scoring rewards before you generate your own.

Generation takes under 5 minutes from a text prompt. It supports brand-specific design systems (fonts, colors, layout preferences), exports directly to Klaviyo, and runs as an MCP server for Claude Code, Cursor, and ChatGPT if you want to build it into a content pipeline.

The scoring is the part I'd have paid for on its own.

https://trykopi.ai

Measuring AI fluency against 9,830 conversations — including yours

J Now — Wed, 20 May 2026 16:49:21 +0000

Anthropics February 2026 study classified 11 observable collaboration behaviors across 9,830 Claude conversations and published the distribution as the AI Fluency Index. I read it and immediately wanted to know: which of these behaviors show up in my sessions, and which ones am I skipping entirely.

The answer, when I actually looked, was embarrassing. I was hitting maybe 4 of the 11 behaviors on repeat. The others — things like iterative delegation and active discernment — I hadn't touched in months of daily use.

skill-tree plugs into Claude Code (or Cowork, or Cursor via MCP) and runs a 7-step orchestration against your actual session history: find session files, extract your messages, classify the 11 behaviors via a remote Haiku classifier on Fly.io, assign one of seven archetype cards, synthesize a narrative, render it, and return a stable URL. End-to-end takes 30–60 seconds.

The archetype cards are rendered as tarot cards with curated museum art — you can see a live example at skill-tree-ai.fly.dev/fixture/illuminator. But the part I actually use daily is the growth quest: one behavior you haven't tried, persisted across sessions via a SessionStart hook so Claude reminds you at the top of your next conversation.

The behavior taxonomy comes from Dakan & Feller's 4D AI Fluency Framework (Description, Discernment, Delegation — Diligence is the fourth axis but isn't visible in chat logs, so it's excluded).

Install in Claude Code:

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

Or as an MCP server for Cursor, VS Code, Windsurf:

npm install -g skill-tree-ai

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