DEV Community: Oikon

Run `gh` Command in Claude Code on the Web

Oikon — Mon, 12 Jan 2026 13:47:17 +0000

I'm Oikon. I typically share Claude Code insights on X (Twitter).

Recently, Claude Code on the Web removed gh from the disallowed_tools list, making GitHub CLI available. In this article, I'll show you how to configure it. I've also published a setup package, so you can get started right away.

oikon48 / gh-setup-hooks

Enable `gh` command in Claude Code on the Web environment, just adding SessionStartHooks

gh-setup-hooks

Auto-install GitHub CLI on Claude Code on the Web. Just add one line to settings.json.

Setup

1. Add hook to settings.json

Add to .claude/settings.json:

{
  "hooks": {
    "SessionStart": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "bun x gh-setup-hooks",
            "timeout": 120
          }
        ]
      }
    ]
  }
}

npx -y gh-setup-hooks is also ok.

2. Set up Claude Code on the Web

To use gh commands (e.g., gh pr create), you need to set GH_TOKEN or GITHUB_TOKEN:

Go to Claude Code on the Web
Open Settings → Custom Environment
Add environment variable:
- Name: GH_TOKEN or GITHUB_TOKEN
- Value: Your GitHub Personal Access Token

Note: The token needs repo scope for most operations.

Claude Code on the Web network should be Full or Custom. If using Custom, you need to allow release-assets.githubusercontent.com.

How

…

View on GitHub

TL;DR

Around December 17, 2025, gh was removed from disallowed_tools
Configure GITHUB_TOKEN in a custom environment
Easy setup with bun x gh-setup-hooks
Use CLAUDE_CODE_REMOTE to detect the "on the Web" environment

Note:
The specifications in this article are based on Claude Code on the Web as of January 8, 2026. Some setup steps may become unnecessary if gh command becomes installed by default in the future.

Quick Start

Here's how to get gh working in the shortest time possible.

1. Custom Environment Configuration

Create a custom environment in Claude Code on the Web and configure the following:

Environment Variable: GITHUB_TOKEN=ghp_xxxx... (Personal Access Token issued from GitHub)
Network Access: "Full" or "Custom" with release-assets.githubusercontent.com allowed

2. Hooks Configuration

Add the following to your repository's .claude/settings.json:

{
  "hooks": {
    "SessionStart": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "bun x gh-setup-hooks",
            "timeout": 120
          }
        ]
      }
    ]
  }
}

That's it! When you start a session in Claude Code on the Web, gh will be automatically installed, enabling PR creation and issue management.

⚠️ Warning:
Due to sandbox proxy configuration, you need to use the -R owner/repo flag when using gh commands. Claude Code often adds this automatically, but adding a note in CLAUDE.md makes things smoother.

What is Claude Code on the Web?

Claude Code on the Web is an environment where you can run Claude Code directly in your browser.

claude.ai

The main appeal is that you can develop with just a browser, even without a PC at hand. It works by cloning GitHub repositories and running Claude Code in a sandboxed environment. For detailed specifications, please check out my previous article:

Claude Code on the Webの仕様を徹底解剖

zenn.dev

As a side note, by prefixing your Claude Code prompt with &, you can send tasks from local Claude Code to Claude Code on the Web.

// Detect dark theme var iframe = document.getElementById('tweet-1996177293551747577-187'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1996177293551747577&theme=dark" }

The Removal of `gh` Command Restrictions

Previously, the gh command was explicitly blocked in Claude Code on the Web. The startup options included --disallowed-tools Bash(gh:*), and the system prompt contained this statement:

The GitHub CLI (gh) is not available in this environment.

In other words, any GitHub CLI operations like creating PRs or managing issues were completely unavailable.

However, around December 17, 2025, gh had been removed from the disallowed_tools list.

The diff in data/startup.json shows that "disallowed_tools": ["Bash(gh:*)"] has been removed. This means the gh command itself is no longer blocked. However, since gh isn't installed by default, you still can't use it out of the box.

How the Setup Works

The gh-setup-hooks package uses sessionStartHooks to automatically install gh at session start.

How It Works

Hook fires at session start
Checks if it's a "on the Web" environment using CLAUDE_CODE_REMOTE environment variable
Downloads and installs gh only in the "on the Web" environment
Writes PATH to CLAUDE_ENV_FILE to enable it throughout the session

About the Environment Variables

CLAUDE_CODE_REMOTE: An environment variable set to true only in the Claude Code on the Web environment. This allows the script to skip execution in local environments and run only in the "on the Web" environment.

if [ "$CLAUDE_CODE_REMOTE" != "true" ]; then
    log "Not a remote session, skipping gh setup"
    exit 0
fi

CLAUDE_ENV_FILE: An environment variable file path provided by Claude Code. Writing to this file persists PATH settings throughout the session.

if [ -n "$CLAUDE_ENV_FILE" ]; then
    echo "export PATH=\"$LOCAL_BIN:\$PATH\"" >> "$CLAUDE_ENV_FILE"
    log "PATH persisted to CLAUDE_ENV_FILE"
fi

Script Details (gh-setup.sh)

If you want to write your own script instead of using the package, here's a reference:

#!/bin/bash
# SessionStart hook: GitHub CLI auto-installation for remote environments
set -e

LOG_PREFIX="[gh-setup]"
log() { echo "$LOG_PREFIX $1" >&2; }

if [ "$CLAUDE_CODE_REMOTE" != "true" ]; then
    log "Not a remote session, skipping gh setup"
    exit 0
fi

log "Remote session detected, checking gh CLI..."

if command -v gh &>/dev/null; then
    log "gh CLI already available: $(gh --version | head -1)"
    exit 0
fi

LOCAL_BIN="$HOME/.local/bin"
mkdir -p "$LOCAL_BIN"

if [ -x "$LOCAL_BIN/gh" ]; then
    log "gh found in $LOCAL_BIN"
    export PATH="$LOCAL_BIN:$PATH"
    [ -n "$CLAUDE_ENV_FILE" ] && echo "export PATH=\"$LOCAL_BIN:\$PATH\"" >> "$CLAUDE_ENV_FILE"
    exit 0
fi

log "Installing gh CLI to $LOCAL_BIN..."

TEMP_DIR=$(mktemp -d)
trap "rm -rf $TEMP_DIR" EXIT

ARCH=$(uname -m)
case "$ARCH" in
    x86_64) GH_ARCH="amd64" ;;
    aarch64|arm64) GH_ARCH="arm64" ;;
    *) log "Unsupported architecture: $ARCH"; exit 0 ;;
esac

GH_VERSION="2.62.0"
GH_URL="https://github.com/cli/cli/releases/download/v${GH_VERSION}/gh_${GH_VERSION}_linux_${GH_ARCH}.tar.gz"

curl -sL "$GH_URL" -o "$TEMP_DIR/gh.tar.gz" || { log "Failed to download"; exit 0; }
tar -xzf "$TEMP_DIR/gh.tar.gz" -C "$TEMP_DIR" || { log "Failed to extract"; exit 0; }
mv "$TEMP_DIR/gh_${GH_VERSION}_linux_${GH_ARCH}/bin/gh" "$LOCAL_BIN/gh" || { log "Failed to install"; exit 0; }

chmod +x "$LOCAL_BIN/gh"
export PATH="$LOCAL_BIN:$PATH"
[ -n "$CLAUDE_ENV_FILE" ] && echo "export PATH=\"$LOCAL_BIN:\$PATH\"" >> "$CLAUDE_ENV_FILE"

log "gh CLI installed successfully: $($LOCAL_BIN/gh --version | head -1)"

Conclusion

With gh now available, you can read issues and execute tasks, or create PRs directly in Claude Code on the Web. The CLAUDE_CODE_REMOTE variable can also be useful for other remote-only workflows.

If you found this article valuable, follow the author on X (@oikon48) for ongoing Claude Code insights and updates.

References

GitHub

oikon48 / gh-setup-hooks

Enable `gh` command in Claude Code on the Web environment, just adding SessionStartHooks

gh-setup-hooks

Auto-install GitHub CLI on Claude Code on the Web. Just add one line to settings.json.

Setup

1. Add hook to settings.json

Add to .claude/settings.json:

{
  "hooks": {
    "SessionStart": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "bun x gh-setup-hooks",
            "timeout": 120
          }
        ]
      }
    ]
  }
}

npx -y gh-setup-hooks is also ok.

2. Set up Claude Code on the Web

To use gh commands (e.g., gh pr create), you need to set GH_TOKEN or GITHUB_TOKEN:

Go to Claude Code on the Web
Open Settings → Custom Environment
Add environment variable:
- Name: GH_TOKEN or GITHUB_TOKEN
- Value: Your GitHub Personal Access Token

Note: The token needs repo scope for most operations.

Claude Code on the Web network should be Full or Custom. If using Custom, you need to allow release-assets.githubusercontent.com.

How

…

View on GitHub

Documentation

Claude Code on the Web - Official Documentation

Claude Code Hooks - Official Documentation

Managing Personal Access Tokens - GitHub Docs

Claude Code on the Web Sandbox Specifications (Japanese)

Reflections of Claude Code from CHANGELOG

Oikon — Tue, 30 Dec 2025 14:53:24 +0000

I'm Oikon. I typically share Claude Code insights on X (Twitter).

As this eventful year of 2025 draws to a close, I wanted to reflect on Claude Code. For me personally, 2025 was the year AI agents took a massive leap forward. More specifically, it was the year of Claude Code.

The Claude Code CHANGELOG has been updated 176 times total. I have verified and tested every release since at least v1.0.x.

Version Series	Release Count (as of 2025/12/30)
v0.2.x	37
v1.0.x	82
v2.0.x	57
Total	176

Having worked closely with Claude Code throughout the year, I want to organize my thoughts on what I have learned. Please note that these are my personal observations.

TL;DR

Here are the key takeaways from a year of tracking Claude Code:

Claude Code shipped 176 updates in 2025, demonstrating rapid iteration from beta to v2.0
Context engineering emerged as the unifying theme across major features
Key milestones: CLAUDE.md memory files, Plan mode, Subagents, /context command, Skills, and Opus 4.5
Claude Code's strength lies in its harness design, optimized specifically for Claude models
Challenges remain: 200k context window (vs competitors' 400k-1M), compaction quality, and knowledge cutoff
2026 outlook: Long-running tasks, Swarming capabilities, and enhanced external tool integration

The Shock of First Contact

Before Claude Code

I first touched Claude Code in March 2025, not February when the beta released.

At the time, I was using GitHub Copilot and Cursor while asking ChatGPT and Claude's web version about code, then copy-pasting the good bits and tweaking them locally. Looking back, my development workflow has transformed dramatically over the past year.

Even then, Claude's web version had GitHub integration and could read codebases to answer questions. I personally felt Claude 3.7's coding quality was superior to other AI models at the time.

Meeting Claude Code

In March 2025, I discovered a product called Claude Code. I cannot find my posts from that period since I was not active on X yet, but I remember seeing someone demo it on social media. While IDE-based tools like Cursor and Windsurf were getting attention, the CLI approach caught my eye.

I was deeply impressed when I first tried Claude Code. Previous AI tools worked alongside you while coding, but even the early Claude Code could autonomously code and create multiple components on its own.

Watching an AI agent explore the codebase independently, gather necessary information, and implement features made me realize coding was about to change fundamentally.

From April onward, I continued using Claude Code with pay-as-you-go API billing while getting comfortable with CLI-based coding. Around that time, I started posting on X, praising Claude Code and expressing interest in trying Codex CLI. As a side note, the Codex CLI back then was honestly not very usable, and many people today do not even know it existed. When GPT-5 arrived, Codex CLI transformed dramatically, following a similar trajectory to Claude Code's official release.

"Claude Code is really good, so I want to try Codex too, but the heavy pay-per-use billing makes it hard to use comfortably."

// Detect dark theme var iframe = document.getElementById('tweet-1913180659004350849-956'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1913180659004350849&theme=dark" }

On April 9, the Claude Max plan was announced. On May 1, Claude Code became available at a flat rate through the Max plan. This did not get much attention at the time, but it laid the groundwork for Claude Code's wider adoption.

Claude Max Plan Announcement

A few days after that announcement, I subscribed to the Max 5x plan at $100/month. Until then, I had never spent more than $20 on AI tools, so this was a significant shift. Now I use the 20x plan at $200/month, which shows how much things have changed.

"Using Claude Code through Claude Desktop + MCP without API charges is nice, but it still can't match the speed of developing directly with Claude Code. I keep hitting Desktop's chat limits anyway. Better to stop being stingy and just subscribe to the Max plan. +12,000 yen monthly..."

// Detect dark theme var iframe = document.getElementById('tweet-1919078662323745066-937'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1919078662323745066&theme=dark" }

The Official Launch

On May 25, 2025, Anthropic announced Claude 4. I wrote a Zenn article about that moment, which you can read here:

My Zenn article about Claude 4 release

The major changes for Claude Code at this point were:

Claude 4 (Opus/Sonnet) performance was excellent
The Max flat-rate plan gained recognition

Claude Code had already shown autonomous capabilities, but with Claude 3.7, the model's performance was not quite sufficient to fully leverage the harness's power. Claude 4's arrival improved how Claude handled tools, reaching a level where it could truly excel.

The Max plan's recognition mattered too. Traditional AI coding involved cautious usage due to pay-per-use API billing. With flat-rate Claude Code access, the AI coding mindset shifted, enabling experimentation and multiple implementation attempts. This flat-rate model has been adopted across the industry, including Codex, Gemini, and some Cursor plans.

Tracking the CHANGELOG

anthropics / claude-code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

Claude Code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows -- all through natural language commands. Use it in your terminal, IDE, or tag @claude on Github.

Learn more in the official documentation.

Get started

Note

Installation via npm is deprecated. Use one of the recommended methods below.

For more installation options, uninstall steps, and troubleshooting, see the setup documentation.

Install Claude Code:

MacOS/Linux (Recommended):

curl -fsSL https://claude.ai/install.sh | bash

Homebrew (MacOS/Linux):

brew install --cask claude-code

Windows (Recommended):

irm https://claude.ai/install.ps1 | iex

WinGet (Windows):

winget install Anthropic.ClaudeCode

NPM (Deprecated):

npm install -g @anthropic-ai/claude-code

Navigate to your project directory and run claude.

Plugins

This repository includes several Claude Code plugins that extend functionality with custom commands and agents. See the plugins…

View on GitHub

With Claude 4's release, Claude Code itself received its first major update to v1.0.x. As of December 2025, we are on v2.0.x (v2.0.74 at the time of writing).

I cannot cover all 176 updates, so I will highlight the changes from v1.0.x onward that I found most impactful.

To summarize upfront: many features are strongly tied to context engineering, suggesting that understanding context engineering is essential right now.

Claude Code v1.0.x Era

CLAUDE.md (Memory Files)

CLAUDE.md existed since v0.2.x, but with the v1.0.x release, discussions about what should go in CLAUDE.md intensified. While Cursor Rules existed before, CLAUDE.md became more critical for Claude Code's autonomous implementation.

As the term context engineering spread and the importance of controlling AI agent context windows gained attention, CLAUDE.md's significance grew further.

In August, Codex CLI proposed AGENTS.md, attempting to unify project memory across AI tools. This move reflects the impact CLAUDE.md had on AI coding.

Incidentally, Claude Code does not support AGENTS.md. This has been discussed among users in a GitHub Issue:

GitHub Issue: AGENTS.md Support

Personally, I do not think Anthropic will support AGENTS.md. Here is why:

Adopting OpenAI's standard poses competitive challenges
Workarounds already exist in Claude Code
A universal project memory for all harnesses and models is difficult

Anthropic has created industry standards like MCP and recently Agent Skills, but they seem cautious about adopting others' specifications.

As the GitHub Issue shows, workarounds like @ imports and symbolic links exist. I covered these in my advent calendar article under Day 5:

24 Claude Code Tips - Claude Code Advent Calendar

Finally, I personally find the idea that one AGENTS.md can serve all AI tools somewhat challenging. AI tools combine models and harnesses, and fully leveraging each requires tool-specific project memory. Unlike MCP, AGENTS.md is natural language Markdown, not really a protocol.

This may be why Anthropic is not eager to consolidate around AGENTS.md.

Plan Mode

Plan mode was silently added around v1.0.18 on June 12. You can switch to it with Shift + Tab or set it as the default via /config. If I recall correctly, Cline had introduced Plan mode around April, before Claude Code.

At the time, I was caught up in Vibe Coding and foolishly running --dangerously-skip-permission, so I failed to immediately grasp its value. But as I used Claude Code longer, I came to appreciate Plan mode's utility.

Plan mode matters because it clarifies the AI agent's execution steps beforehand. Many AI coding failures stem from unclear execution sequences, where the agent does not follow the intended implementation path.

Plan mode's value extends to improving downstream bottlenecks. By clarifying specifications upfront, the agent follows them more closely, reducing deviation from expected output. This indirectly reduces review bottlenecks that have become apparent in AI coding. Like Shift Left Testing, eliminating rework early benefits later stages.

When I asked Boris Cherny, a Claude Code developer, about Plan mode's importance, he confirmed it. He said he starts in Plan mode almost every time.

"The single biggest tip is: almost always start in plan mode. Once you align on a detailed plan, Opus 4.5 gets it right pretty much every time."

// Detect dark theme var iframe = document.getElementById('tweet-2004711107018342430-748'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2004711107018342430&theme=dark" }

The latest Claude Code now creates Plan documents in ~/.claude/plans/, moving toward something like Spec Driven Development (SDD). I covered this in Advent Calendar Day 17.

Subagents

Subagents have existed since early Claude Code, operating as the Task tool. I wrote about them in this article:

My article on Subagents

Starting with v1.0.60, the /agents command enabled custom Subagents.

Subagents have these characteristics:

Parallel execution capability
Role specialization
Independent context windows

The independent context window is particularly important from a context engineering perspective. Current Claude Code context windows are limited, and heavy WebSearch or Read operations quickly fill them.

Subagents help by keeping extraneous information out of the parent context window, offloading it to their own. Given current context engineering constraints, having this escape valve matters.

As AI agent orchestration advances, Subagents' parallel execution capability will become increasingly important.

/context

The /context command was added in v1.0.86 on August 20. Its value lies in visualizing context.

While context engineering as a concept had spread, many people understood it abstractly without truly grasping it.

/context displays:

System prompt
System tools
MCP tools
Custom agents
Memory files
Messages

This makes it immediately clear how much context window is occupied and how much remains.

The /context command helped many users become aware of context windows and understand context engineering's importance. A common example now discussed: MCP tools consume significant space, so removing unnecessary ones helps. This conversation was impossible before /context.

By illuminating the abstract concept of context engineering and making it tangible, the /context command made a major contribution.

Claude Code v2.0.x Era

Opus 4.5

The v2.0.x era's most significant event was Claude Opus 4.5's release on November 24.

At the time, many were migrating from Claude Code to Codex CLI. Reasons included rumors of Claude Code degradation and GPT-5.1 Codex's excellence. I was still primarily on Claude Code with Codex CLI as backup, though Codex had a meaningful share of my tasks.

Claude Opus 4.5 Announcement

When Opus 4.5 became available in Claude Code starting v2.0.51, users gradually returned. I say "gradually" because at this stage, AI models had become difficult to distinguish through simple implementation tasks. Many felt they needed hours or days of use to understand the differences. Codex CLI had also evolved into an excellent tool, and Cursor had established its position with Composer-1.

Using it myself, I found Claude Opus 4.5 handled Claude Code's tool specifications well, with satisfactory implementation speed. The affinity between Opus 4.5 and the Claude Code harness felt higher than previous Claude Opus 4.1 or Sonnet 4.5. Claude Opus 4.5 undeniably elevated Claude Code's standing and pushed AI coding history forward.

As an aside, measuring AI model performance has become personally challenging. Simple tasks yield high-quality output from any AI tool now.

SWE-Bench is often cited, but it increasingly feels like marketing performance. Real confidence comes only from hands-on use. A recent YouTube talk by someone from PromptLayer addressed this point engagingly:

Claude Skills (Agent Skills)

Claude Skills was added in v2.0.22 on October 17. On December 18, it became an open standard as Agent Skills.

Skills have been widely discussed lately. I will skip details since many have explained them. This Code Summit video explains Skills well:

You only need to understand the concept of progressive context disclosure for Agent Skills. Context engineering matters here too. Skills enable tool orchestration, and combining that with agent orchestration will gain more attention.

Anthropic emphasizes these Skills characteristics while designing for portability across Claude Code, Claude Desktop, and beyond. As with MCP (Model Context Protocol), Anthropic excels at developing concepts and features essential to AI agents.

Interactive Question Tool

You may not recognize the name "Interactive Question Tool." It is the feature in Plan mode where Claude asks users detailed questions. I adopted this name from the CHANGELOG.

"A video of me trying the newly implemented 'Interactive plan tool' that lets you have a conversation with Claude while planning in Plan mode. Hope the vibe comes through."

// Detect dark theme var iframe = document.getElementById('tweet-1979338989330149754-292'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1979338989330149754&theme=dark" }

I find this feature groundbreaking because it clarifies specification boundaries during planning.

A major cause of AI coding rework was gaps between user-expected specifications and AI implementation. If users could draw clear specification boundaries through prompts or spec documents, problems would not arise. But often those boundaries are ambiguous, causing agents to deviate from user expectations.

The Interactive Question Tool lets the AI agent confirm specification details, much like a human colleague would. This shift from one-way user input to interactive exchange represents major progress in AI tools and significantly impacts AI coding's future.

Plugin Marketplace

Claude Code's Plugin system is another feature I am watching. AI tools are powerful, but many organizations still struggle with team adoption. A major reason is the AI tool learning curve.

Power users of tools like Claude Code can create their own Skills, Hooks, and custom slash commands, but there is a large gap compared to those unfamiliar with AI tools. This creates personalized CLAUDE.md files and individual variations.

The Plugin system distributes functionality, making AI tools more accessible for team development. Having already built an ecosystem for easy installation and sharing, like VSCode Marketplace, is a Claude Code strength.

Creating plugins is simple: just add marketplace.json and plugin.json in a .claude-plugin directory. Here is my demo GitHub project for reference:

oikon48 / cc-frontend-skills

Claude Code plugin for creating frontend UIs that avoid generic AI aesthetics. (Claude Skills is written in Japanese)

Frontend Skills Plugin

Note: This project is for demonstrating Claude Skills with Claude Code.

A Claude Code plugin for creating distinctive, production-grade frontend UIs that avoid generic "AI slop" aesthetics. This Skill and Subagent is generated with referring Anthropic blog: Improving frontend design through Skills

Features

Distinctive typography - Effective serif × sans-serif pairings
Custom color palettes - Beyond default Tailwind colors
Asymmetric layouts - 35/65 ratios, overlapping elements
Purposeful animations - Focused on high-impact moments

Demo

Left: With Skills
Right: Without Skills

Prompt:

Result:

Installation

Execute following /plugin slash commands in Claude Code.

# Add marketplace
/plugin marketplace add oikon48/cc-frontend-skills

# Install plugin
/plugin install frontend-skills@cc-frontend-skills

Usage

Simply make frontend-related requests and the design skill will be applied automatically:

Build me a flight lookup nextjs web app where the user can put in a flight number and the app gives you the start time, end time, time zones, start

…

View on GitHub

What Makes Claude Code Excellent

Having reviewed notable CHANGELOG features, I want to address Claude Code's excellence from a tool design perspective. I see many strengths, but I will highlight two.

The CLI Tool Approach

One of Claude Code's strengths is being a CLI tool. CLI tools are usable anywhere by any developer.

Historically, development tools moved from CLI to GUI (IDEs), but in the AI era, rather than returning to CLI, I see it as moving to an Agent UI. In other words:

CLI → GUI → Agent UI

While Claude Code appears to be a CLI tool, I personally feel it pioneered the Agent UI concept.

Claude Code started as Boris's side project, hence its CLI origins. But the CLI design persisted for several reasons, as explained in an Anthropic video:

Targeting the terminal that developers always use
LLMs enabled a return from rich UI to chat
Simple CLI lets users focus on tasks
CLI is the thinnest wrapper around the model, keeping things clean

The Claude Code Harness

Claude Code's growing prominence in AI coding stems from the harness's completeness.

Throughout this article, I have used "AI model" and "harness." These terms appear in Anthropic's video The future of agentic coding with Claude Code.

AI tools split into AI model and harness, with capabilities emerging from their combination. The video compares the AI model to a horse and Claude Code to a harness (horse equipment), explaining how it controls and guides the AI tool. I love this metaphor and frequently reference it in presentations.

The Claude Code harness is well-designed to appropriately provide tools, prompts, and context to the Claude model, guiding it toward task completion. This differentiates it significantly from other AI tools.

Current Challenges

I have focused on positives, but challenges certainly exist. Many remain. Here are some major ones.

Context Window Size

The first challenge is context window size. GPT-5.2 has 400k tokens, Gemini 3 Pro has 1M, while Claude Opus 4.5 remains at 200k. This significantly constrains users.

Claude Code mitigates context window issues through Subagents and recently implemented rules, but even the harness's power cannot fully hide this problem.

Fortunately, I had access to Claude Sonnet 4.5 [1M] and used it primarily before Opus 4.5 arrived. I remember feeling how much easier things became with a larger context window. Conversely, imagine what happens when Claude gets a standard 1M context window.

Compaction Quality

Even accepting Claude's current 200k context window, Claude Code's context compaction (/compact, auto-compact) has room for improvement.

I have felt Codex CLI handles compaction better in some situations. Claude Code seems to simply summarize the session unless you explicitly specify compaction instructions.

If model context windows grow larger, compaction may become less relevant. But for now, you either need compaction instructions or frequent /clear commands to keep the context window clean.

Knowledge Cutoff

This universal model problem affects Claude and others: knowledge cutoff impact appears frequently. Specifically, I often encounter bugs from models not knowing the latest libraries or versions.

Workarounds include using WebSearch or Context7 MCP to fetch current information, but ideally the Claude Code harness would handle this automatically. As Simon Willison's recent article suggested, centralizing version information and loading it via Skills when needed seems like a good approach.

Claude Code is still a product barely ten months old. I look forward to watching it grow.

Should You Use Third-Party Tools?

Claude Code's user base grew dramatically this year, and third-party tools proliferated. Notable examples include awesome-claude series collecting custom slash commands and Subagents (various authors), plus complex harness mechanisms built with Claude Hooks.

My personal opinion: use these third-party tools cautiously.

Claude Code works through the combination of the Claude model and Claude Code harness. Many third-party tools essentially build additional harness layers outside the existing harness.

Claude model and tool evolution is dramatic, and Claude Code's behavior changes significantly week to week. Unless third-party tools are maintained to keep pace, many become unnecessary harness overhead.

Given that future Claude Code versions may incorporate and improve upon these features, I personally do not recommend heavy third-party tool dependence.

The Future of Claude Code

In just ten months of 2025, Claude Code evolved dramatically. Having shared my personal views on Claude Code's present, I want to speculate about 2026.

Evolution Trajectories

Claude Code has established its position as an AI coding tool, but significant evolution potential remains. Drawing from hints gathered when I asked Claude Code developer Boris at the recent Claude Code Meetup Tokyo, I will explore possible directions.

"I asked Boris Cherny about Claude Code's future direction at the Claude Code Meetup Tokyo Q&A. I was curious about orchestration and scheduling. His answer: He is very interested in two things—'Long running' and 'Swarm'. Both seem to be at the demo stage. Quite a hot topic."

// Detect dark theme var iframe = document.getElementById('tweet-2003054927862718844-721'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2003054927862718844&theme=dark" }

Long-Running Tasks

Claude Code already acts quite autonomously, but not completely.

For tasks like reviewing an entire codebase and performing certain operations, Claude Code sometimes stops before completion. Users must then say "Continue, you're not done yet" to resume.

Future improvements should enable Claude Code to run longer and complete tasks.

Notably, an official Anthropic plugin called ralph-wiggum already enables long-running execution. This may become standard or improved.

"The ralph-wiggum plugin is a mechanism that creates a 'User prompt submit hook' to automatically inject '/ralph-loop' as user input. While in ralph-loop, it infinitely injects '/continue' as user input when Claude's turn ends."

// Detect dark theme var iframe = document.getElementById('tweet-2005105826730836374-328'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2005105826730836374&theme=dark" }

Swarming (Orchestrated Execution)

Orchestrated execution was also mentioned. This differs from parallel Subagent execution.

Around June 2025, using tmux to run multiple Claude Code instances with Manager and Worker roles for orchestration became a topic of discussion.

Claude Code may eventually support Swarming natively. I personally suspect the undocumented delegate mode may be part of swarming functionality.

"Claude Code 2.0.71 quietly added a mysterious 'delegate mode'"

// Detect dark theme var iframe = document.getElementById('tweet-2001064637845135572-389'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2001064637845135572&theme=dark" }

External Tool Integration

This is my personal prediction, not from Boris.

Currently, Claude Code has standard tools plus Skills and MCP tools that it uses autonomously. However, there is room for improvement in selecting the right tool at the right time.

MCP tools in particular are criticized for consuming context windows, suggesting tool call mechanisms need enhancement. This topic came up at Anthropic Builder Summit Tokyo, with discussions about using programs to mediate MCP tool calls.

Regarding MCP, a beta feature for dynamically loading MCP tools has been implemented and is available for testing.

"I saw a post saying that the feature to dynamically load MCP tools in Claude Code is available as a beta release, so I tried it. Setting these two environment variables: ENABLE_TOOL_SEARCH=true and ENABLE_EXPERIMENTAL_MCP_CLI=false lets you try it out. When I tested it, MCP tool context became 0 and I confirmed tools are loaded dynamically when used (see next post). This will likely be included in a Claude Code release soon."

// Detect dark theme var iframe = document.getElementById('tweet-2005803922167083152-248'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2005803922167083152&theme=dark" }

Expanding further on external tools: Physical AI will likely gain more attention in 2026. Robots and autonomous vehicles are already exciting areas, and I expect Claude Code to eventually perceive and interact with the physical world through external sensors.

The Value of Following Claude Code

Claude Code is an excellent tool. Since Opus 4.5's release especially, it has pulled ahead. But other AI tools have also improved significantly, and honestly, users should pick whatever suits their use case and preferences.

Even in this era of competing AI tools, Claude Code (and Anthropic) consistently sets milestones at the frontier, making it personally worthwhile to use and follow. At minimum, Claude Code led AI tools in 2025. The features and mechanisms Claude Code released will undoubtedly be recorded when we look back on engineering history years from now.

For those planning to work in engineering for the next decade or more, Claude Code is worth following.

Conclusion

I wrote this article to organize my personal thoughts from watching Claude Code throughout the year. I deeply realize how impactful this year was for me personally. I am genuinely grateful to be an active engineer during such fascinating times.

Next year feels like it will accelerate even more, but I intend to keep enjoying myself while occasionally gritting my teeth to avoid being left behind.

Side note: I was inspired to write this by the following article. It is long but excellent, so please take the time to read it in full:

Sankalp's Experience with Claude Code 2.0

If you found this article valuable, follow the author on X (@oikon48) for ongoing Claude Code insights and updates.

References

GitHub

anthropics / claude-code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

Claude Code

Learn more in the official documentation.

Get started

Note

Installation via npm is deprecated. Use one of the recommended methods below.

For more installation options, uninstall steps, and troubleshooting, see the setup documentation.

Install Claude Code:

MacOS/Linux (Recommended):

curl -fsSL https://claude.ai/install.sh | bash

Homebrew (MacOS/Linux):

brew install --cask claude-code

Windows (Recommended):

irm https://claude.ai/install.ps1 | iex

WinGet (Windows):

winget install Anthropic.ClaudeCode

NPM (Deprecated):

npm install -g @anthropic-ai/claude-code

Navigate to your project directory and run claude.

Plugins

This repository includes several Claude Code plugins that extend functionality with custom commands and agents. See the plugins…

View on GitHub

GitHub Issue: AGENTS.md Support

agentskills / agentskills

Specification and documentation for Agent Skills

Agent Skills

Agent Skills are a simple, open format for giving agents new capabilities and expertise.

Skills are folders of instructions, scripts, and resources that agents can discover and use to perform better at specific tasks. Write once, use everywhere.

Getting Started

Documentation — Guides and tutorials
Specification — Format details
Example Skills — See what's possible
Discord — Join the discussion!

This repo contains the specification, documentation, and reference SDK. Also see a list of example skills here.

About

Agent Skills is an open format maintained by Anthropic and open to contributions from the community.

License

Code in this repository is licensed under Apache 2.0. Documentation is licensed under CC-BY-4.0. See individual directories for details.

View on GitHub

anthropics / claude-plugins-official

Official, Anthropic-managed directory of high quality Claude Code Plugins.

Claude Code Plugins Directory

A curated directory of high-quality plugins for Claude Code.

⚠️ Important: Make sure you trust a plugin before installing, updating, or using it. Anthropic does not control what MCP servers, files, or other software are included in plugins and cannot verify that they will work as intended or that they won't change. See each plugin's homepage for more information.

Structure

/plugins - Internal plugins developed and maintained by Anthropic
/external_plugins - Third-party plugins from partners and the community

Installation

Plugins can be installed directly from this marketplace via Claude Code's plugin system.

To install, run /plugin install {plugin-name}@claude-plugins-official

or browse for the plugin in /plugin > Discover

Contributing

Internal Plugins

Internal plugins are developed by Anthropic team members. See /plugins/example-plugin for a reference implementation.

External Plugins

Third-party partners can submit plugins for inclusion in the marketplace. External plugins must meet quality and security standards for approval…

View on GitHub

External Articles

Claude Max Plan Announcement

Claude Opus 4.5 Announcement

Simon Willison - actions-latest

Sankalp's Experience with Claude Code 2.0

Videos

24 Claude Code Tips: #claude_code_advent_calendar

Oikon — Thu, 25 Dec 2025 13:26:51 +0000

TL;DR

Claude Code ships new features almost weekly, and the documentation often struggles to keep pace. If you have been using Claude Code since its early days, you know the feeling of discovering a powerful feature months after it was released, hidden in a CHANGELOG or mentioned casually on X.

I have been tracking Claude Code since March 2025, documenting every update, testing every feature, and sharing insights with the developer community. When December arrived, I decided to compile my knowledge into a Claude Code Advent Calendar: 24 days, 24 essential tips, shared daily on X with the hashtag #claude_code_advent_calendar.

This article consolidates all 24 tips into a single comprehensive guide. Whether you are a Claude Code newcomer or a power user, you will find actionable insights to level up your AI-assisted development workflow.

Quick Navigation

Day	Topic	Day	Topic
1	Opus 4.5 Migration Guide	13	Sandbox for rm -rf Prevention
2	Claude Code Statusline	14	Hooks for Sensitive Data Filtering
3	Send Tasks to Web with &	15	Hooks for Code Formatting
4	Thinking Keywords	16	External Editor with Ctrl + G
5	AGENTS.md Support	17	Plan Mode
6	On the Web Setup	18	GIF Creation with Claude in Chrome
7	MCP Tool Context Consumption	19	Agent Skills Best Practices
8	Skill Creator	20	Auto-compact Buffer Size
9	Skills + Subagents	21	Async Subagents
10	Project Rules	22	Code Action + Agent Skills
11	CLAUDE.md Loading	23	Parallel Execution
12	Preventing rm -rf Disasters	24	Claude Code Ecosystem

Day 1: Opus 4.5 Migration Guide

Anthropic maintains an official Skills plugin for migrating prompts from older Claude models to Opus 4.5. This migration guide reveals interesting behavioral differences in the latest model.

The migration addresses several tendencies specific to Opus 4.5:

Excessive tool invocations when unnecessary
Over-engineering solutions
Insufficient code exploration
Frontend design quality variations
Over-reaction to "think" keywords in prompts

Understanding these tendencies helps you craft more effective prompts. Opus 4.5 aggressively uses tools, which can fill your context window even when tool calls are not required. Monitor your agent's behavior closely when switching models.

Find the migration plugin at: anthropics/claude-code/plugins/claude-opus-4-5-migration

Original X post

Day 2: Claude Code Statusline

The statusline feature displays useful information below the chat input, including model name, Git branch, and custom metrics.

Configure it with /statusline <content> or add it to your settings.json:

{
  "statusLine": {
    "type": "command",
    "command": "bun x ccusage statusline"
  }
}

This configuration uses the ccusage tool to display your API usage directly in the Claude Code interface. The statusline is a small but impactful quality-of-life feature that many users overlook.

Original X post

Day 3: Send Tasks to Web with &

Starting with Claude Code v2.0.45, prefixing your prompt with & sends the task to Claude Code on the Web for background processing.

Claude Code on the Web executes tasks in a remote sandbox environment. You can also transfer tasks from Web back to your local CLI using the "Open from CLI" button. The model specified in your local environment carries over to the Web session.

This feature is particularly useful for offloading smaller tasks while continuing work on your main project locally.

Original X post

Day 4: Thinking Keywords

Extended thinking mode enables Claude to perform internal reasoning for complex tasks. You can toggle it with Tab in the interface.

Here is the critical insight many users miss: only ultrathink triggers extended thinking mode now. Keywords that previously worked have been disabled:

Works: ultrathink
Does NOT work: think, think hard, think deeply, or translated equivalents

This change occurred when Claude Code v2.0.0 introduced the thinking mode toggle. Even Anthropic engineers were unaware of this change initially. The official documentation was only updated on December 13, 2025, two months after the change.

Original X post

Day 5: AGENTS.md Support

Claude Code does not officially support AGENTS.md. This has been an ongoing discussion in GitHub issue #6235 since August.

Two workarounds exist. First, you can import AGENTS.md from within CLAUDE.md using the @AGENTS.md syntax. Verify the import worked with the /memory command.

Alternatively, create a symbolic link: ln -s AGENTS.md CLAUDE.md. This makes Claude Code read AGENTS.md content as if it were CLAUDE.md.

Original X post

Day 6: Claude Code on the Web Setup

Claude Code on the Web runs in a remote sandbox, which means your local setup does not transfer automatically. However, you can replicate your environment using SessionStart Hooks.

The environment variable CLAUDE_CODE_REMOTE indicates when Claude Code runs in the remote Web environment. Create a SessionStart Hook that checks this variable and runs your setup script only in remote sessions.

Claude Code on the Web includes a built-in session-start-hooks feature specifically for this purpose. Reference the official documentation for implementation details.

Original X post

Day 7: MCP Tool Context Consumption

MCP tools consume context window space just by being available, even when not used. Tool descriptions are loaded into the agent's context, and some tools consume 8-30% of your available context.

Use the /context command to see how much space each tool occupies. Browser automation MCP tools are particularly context-hungry.

A common misconception is that using Skills eliminates this problem. It does not. As long as MCP tools are registered in the agent's context, they consume space regardless of how you invoke them. The only way to reduce this overhead is to use equivalent scripts or API calls within Skills instead of MCP tools, or simply remove unused MCP servers.

Original X post

Day 8: Skill Creator

Skill Creator is a meta-skill that generates new Skills. Install it from the official Anthropic plugins:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

After restarting Claude Code, request "Create a skill for [your use case]" to invoke the skill-creator. This provides a solid starting point for custom Skills.

Note that skill-creator has existed since October 2025. While it generates functional Skills quickly, the output may not follow all best practices covered in Day 19. Treat its output as a foundation for further refinement.

Original X post

Day 9: Skills + Subagents

Skills provide knowledge and workflows. Subagents execute specialized tasks. These two features complement each other and can be combined.

Add Skills to a Subagent definition using YAML frontmatter:

---
skills:
  - frontend-design-system
  - testing-patterns
---
# Fullstack Developer Subagent
...

Skills defined in the frontmatter automatically load into the Subagent's context when invoked. The official Subagent documentation covers additional frontmatter options.

This combination became more relevant after Codex CLI added Skills support, increasing interest in Skills across the AI coding assistant ecosystem.

Original X post

Day 10: Project Rules

Version 2.0.64 introduced Project Rules as an alternative to CLAUDE.md. Store topic-specific rules in .claude/rules/ as Markdown files.

Organize rules by concern:

Code style guidelines
Testing conventions
Security requirements

Rules support YAML frontmatter for conditional application:

---
paths: src/api/**/*.ts
---
# API Development Rules
...

When Claude Code operates on files matching the glob pattern, the corresponding rules load dynamically. This provides more granular control than a single CLAUDE.md file.

Original X post

Day 11: CLAUDE.md Loading

Claude Code loads project CLAUDE.md from two locations at startup:

./CLAUDE.md
./.claude/CLAUDE.md

You can also place CLAUDE.md files in nested directories. These are not loaded at startup but are read when Claude Code operates within that directory.

With Project Rules (Day 10), you now have multiple options for organizing project instructions. Use nested CLAUDE.md for directory-specific context and Project Rules for cross-cutting concerns that apply to specific file patterns.

Original X post

Day 12: Preventing rm -rf Disasters

Stories of AI agents executing rm -rf and deleting important directories appear regularly on Reddit and X. New Claude Code users should configure safety guards immediately.

Add permission restrictions to ~/.claude/settings.json:

{
  "permissions": {
    "deny": ["rm", "DROP TABLE", "DELETE FROM"]
  }
}

The permissions.deny setting blocks specified commands entirely. For more flexibility, use permissions.ask to require confirmation before executing dangerous commands. These settings take precedence even when using --dangerously-skip-permissions.

Reference the Reddit incident that prompted this tip: Claude CLI deleted my entire home directory

Original X post

Day 13: Sandbox for rm -rf Prevention

The /sandbox command restricts Claude Code's file system and network access to your working directory and explicitly permitted paths.

Outside the sandbox, Claude Code cannot execute Edit, Read, or Bash commands like rm on unauthorized paths. Combine Sandbox with the permissions settings from Day 12 for comprehensive protection.

Additional safeguards like PreToolUse Hooks can intercept and block commands before execution. Layer multiple defenses for robust protection against accidental file operations.

Original X post

Day 14: Hooks for Sensitive Data Filtering

Claude Hooks trigger scripts at specific lifecycle events. Use UserPromptSubmit and PreToolUse hooks to filter sensitive information before it reaches the AI agent.

Create a hook that scans for API keys, credentials, or other sensitive patterns in prompts and file contents. Block execution when sensitive data is detected.

Beyond blocking, UserPromptSubmit hooks can append additional context to prompts. Hooks enable powerful automation while maintaining security boundaries.

Original X post

Day 15: Hooks for Code Formatting

Use PostToolUse hooks to run formatters automatically after Claude Code edits files.

Configure in settings.json:

{
  "hooks": {
    "PostToolUse": {
      "command": "prettier --write $CLAUDE_FILE_PATH"
    }
  }
}

The key advantage of Hooks is deterministic behavior outside Claude's context. Formatting always executes correctly without consuming context or relying on the AI to remember to format. This pattern works for linters, type checkers, and other code quality tools.

Original X post

Day 16: External Editor with Ctrl + G

Press Ctrl + G to open prompts or Plan mode documents in your preferred external editor.

Configure your editor using environment variables:

export VISUAL="vim"
export VISUAL="emacs"
export VISUAL="code --wait"
export VISUAL="cursor --wait"

Claude Code checks VISUAL first, then falls back to EDITOR. This is especially useful for composing complex multi-line prompts or editing detailed plans.

Original X post

Day 17: Plan Mode

Press Shift + Tab to switch to Plan mode. Claude creates a planning document that you can review and edit before execution.

Plan documents are now saved to ~/.claude/plans/, a change introduced around v2.0.34. You can review past plans and track how approaches evolved over time.

Currently, you cannot specify a custom path for plan documents, though this feature request exists. Combine Plan mode with Ctrl + G (Day 16) to edit plans in your preferred editor.

Original X post

Day 18: GIF Creation with Claude in Chrome

Version 2.0.72 introduced Claude in Chrome integration. Configure it with the /chrome command.

Claude in Chrome includes a GIF recording feature that captures browser automation sessions. Record your web application interactions and export them as animated GIFs, useful for creating quick tutorials or documenting workflows.

While Chrome DevTools MCP provides similar capabilities, Claude in Chrome leverages your browser's user profile, making authenticated interactions easier. The integration enables direct Chrome control via MCP tools from Claude Code.

Original X post

Day 19: Agent Skills Best Practices

Agent Skills became an open standard, now usable in Cursor, GitHub Copilot, and other AI coding assistants. When creating Skills, follow the official best practices:

Keep SKILL.md under 500 lines
Include specific, concrete examples
Limit file references to one directory level deep
Use progressive disclosure for complex information
Define clear workflow steps
Leverage scripts for deterministic operations
Avoid Windows-style paths
Build in verification and feedback loops
Include at least three evaluation scenarios
Test across multiple models

Start with Skill Creator (Day 8) for a quick prototype, then refine against these best practices. The Agent Skills registry provides examples to study.

Original X post

Day 20: Auto-compact Buffer Size

When auto-compact is enabled, Claude Code reserves a buffer for conversation compression. This Auto-compact Buffer varies based on CLAUDE_CODE_MAX_OUTPUT_TOKENS.

The default buffer is 32k tokens, consuming 22.5% of a 200k context window. Setting max output tokens to 64k (the maximum) increases the buffer to nearly 40% of available context.

If you have set CLAUDE_CODE_MAX_OUTPUT_TOKENS without considering this trade-off, revisit your configuration. Maximizing output tokens significantly reduces available context for code and conversation.

Original X post

Day 21: Async Subagents

Subagents can execute asynchronously in the background. When an async task completes, the main agent receives a notification.

Practical applications for async Subagents include parallel codebase exploration, concurrent code reviews, and simultaneous search operations across multiple sources.

Version 2.0.60 introduced this capability. While related tasks may still occasionally wait for Subagent completion, the workflow is substantially improved from earlier versions.

Anthropic engineers mentioned plans to enhance Swarming (orchestrated multi-agent execution) in 2026. Familiarizing yourself with parallel execution patterns now will prepare you for these capabilities.

Original X post

Day 22: Code Action + Agent Skills

Claude Code Action runs Claude Code in GitHub Actions on Ubuntu runners. When your repository contains Skills in .claude/skills/, they are available during Action execution.

Required setup:

Create Skills in .claude/skills/
Add "Skill" to claude_args: --allowed-tools
Use /install-github-app to configure CLAUDE_CODE_OAUTH_TOKEN automatically

Claude Code Action has existed for some time, but Skills integration enables more sophisticated automated workflows. Combined with the upcoming GitHub Actions pricing changes that reduce GitHub-hosted runner costs, this feature becomes increasingly attractive.

Original X post

Day 23: Parallel Execution

Two primary approaches enable parallel Claude Code execution.

Same-branch parallelism uses Subagents for concurrent tasks. This works well for read-only operations like code reviews, or when working on components with clear boundaries. Invoke multiple Subagents from Skills for structured parallel workflows.

Different-branch parallelism uses git worktree to create separate working directories. Run independent Claude Code instances in each worktree for parallel feature development or implementation comparisons. Combine with tmux for orchestrating multiple Claude Code sessions from a single interface.

At a recent Claude Code Meetup in Tokyo, Anthropic engineers confirmed that Swarming capabilities will receive significant attention in 2026. Early adoption of parallel execution patterns positions you well for these enhancements.

Original X post

Day 24: Claude Code Ecosystem

Looking back at 2025, the Claude Code ecosystem expanded remarkably from its February 24 launch. In just ten months, the platform grew from a CLI tool to a comprehensive development environment.

The ecosystem now includes:

Claude Code CLI and SDK for programmatic integration
IDE extensions for VSCode, JetBrains, and VSCode forks
Claude Code on the Web with remote sandbox execution
Mobile app, desktop, and Slack integration for task submission
Chrome extension for browser automation
GitHub Actions integration for CI/CD workflows

Tasks flow seamlessly between these components. Start work on your phone, continue on the Web, finish locally, and deploy through GitHub Actions. The 2026 ecosystem will likely be even more interconnected.

Original X post

Key Takeaways

Safety and security require proactive configuration. Set up permissions.deny, enable Sandbox, and use Hooks to filter sensitive data before an accident occurs.

Context management determines effectiveness. Monitor MCP tool overhead with /context, understand Auto-compact buffer trade-offs, and remove unused tools.

Extended thinking requires the right keyword. Only ultrathink works. Previous keywords like think hard have been disabled since v2.0.0.

Skills and Subagents work best together. Use YAML frontmatter to load Skills into Subagents for specialized workflows.

Parallel execution multiplies productivity. Async Subagents and git worktree enable concurrent work patterns that will become even more powerful with future Swarming capabilities.

The ecosystem rewards exploration. Features like statusline, external editor integration, and Plan mode document saving improve daily workflows significantly once discovered.

If you found these tips valuable, follow the author on X (@oikon48) for ongoing Claude Code insights and updates.

References

Can AI Tools Implement Designs Perfectly?

Oikon — Sun, 12 Oct 2025 05:52:28 +0000

AI tools promise to close the gap between design and implementation, but how close do they actually get? I decided to put three popular approaches to the test with the same Figma design.

The results revealed not just differences in output quality, but fundamentally different philosophies about how design-to-code translation should work. What I found challenges some common assumptions about pixel-perfect implementation and suggests a more nuanced view of what “perfectly” really means.

TL;DR

Kombai achieved the highest design fidelity at 75–80% with Material UI components and real image handling
Codex CLI excelled at semantic HTML and accessibility with proper aria attributes and document structure
Claude Code delivered thoughtful component architecture with 13 independent, well-organized components
Figma MCP enables AI agents to read design structure directly, while specialized tools like Kombai optimize specifically for frontend generation The Current State of AI-Driven Design Implementation

AI tools have become remarkably capable at backend implementation, yet frontend development presents unique challenges that remain partially unsolved. After working extensively with various AI coding assistants, I’ve identified four persistent challenges in translating designs to code.

Reproduction accuracy stands as the most visible issue. Capturing design intent in code requires understanding not just what elements appear on screen, but why they’re arranged that way. AI-generated interfaces often carry a certain recognizable aesthetic that experienced designers immediately spot.

Implementation gaps

Implementation gaps frequently surface around responsive design. Unless explicitly instructed, AI tools tend to create fixed layouts that break on different screen sizes. This happens even when the underlying framework fully supports responsive patterns.

Knowledge currency

Knowledge currency affects output quality in ways that aren’t always obvious. The latest libraries and frameworks evolve faster than training data, leading to outdated patterns or missed opportunities to use newer, better approaches.

Maintainability concerns

Maintainability concerns emerge most clearly in component design. Consistent, reusable component structures require architectural thinking that goes beyond making individual screens look correct. Without careful prompting, generated code often mixes abstraction levels or duplicates logic across components.

Even with experienced designers and engineers involved, achieving satisfying UI/UX completeness through AI assistance alone remains difficult. The common critique that outputs aren’t “pixel-perfect” misses a more nuanced point: pixel-perfect may not always be the goal, but intentional fidelity to design decisions absolutely is.

The most promising current approach for faithful design reproduction involves using Figma as the source of truth and generating code from that structured design data. This works because Figma files contain component hierarchies and relationships that remain invisible in screenshots or mockups. AI tools can parse this structure in ways they simply cannot with image-based inputs.

Methods for Figma to Code

Understanding Figma MCP

Figma MCP represents a bridge technology that allows AI agents to directly read and interpret Figma design data. Rather than describing a design through images or specifications, MCP enables the AI to access the actual design file structure, including layers, components, constraints, and properties.

Setting up Figma MCP requires Figma Desktop, which provides a local MCP server that AI tools can connect to. The process starts in Figma Desktop’s preferences, where enabling the “Enable desktop MCP server” option activates the local server on your machine.

Once the Figma side is configured, AI CLI tools need configuration to connect to that server. The exact format varies by tool, but the principle remains consistent: point the AI tool to the local MCP endpoint that Figma Desktop provides.

For Claude Code, configuration lives in ~/.claude.json:

{
  "mcpServers": {
    "figma-mcp": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

For Codex CLI, configuration lives in ~/.codex/config.toml:

[mcp_servers.figma]
command = "npx"
args = ["-y", "mcp-remote", "http://127.0.0.1:3845/mcp" ]

The key advantage of MCP over image-based approaches becomes clear when the AI needs to understand component relationships. A button nested inside a card component within a layout grid carries structural meaning that images alone cannot convey. MCP exposes this hierarchy directly.

Specialized Frontend AI Tools

While Figma MCP enables general-purpose AI tools to work with design files, another category of tools focuses specifically on frontend code generation. Several options exist in this space, including:

Locofy.ai
Anima
Builder.io
Kombai.

Kombai caught my attention for its distinct approach to the problem. Developed by an Indian startup, Kombai launched officially in August 2025 after gaining significant traction on Product Hunt. The tool’s architecture makes several opinionated choices about how design-to-code translation should work.

Rather than operating within the command line, Kombai functions as an IDE extension available for VSCode, Cursor, Windsurf, and Trae. This integration allows Kombai to analyze entire project contexts, understanding existing code patterns, dependencies, and architectural decisions.

The tool’s workflow differs notably from MCP-based approaches. Kombai executes code changes in a virtual environment first, allowing developers to review and test before accepting changes into their local codebase. This preview-then-accept pattern reduces the risk of breaking existing functionality.

Technology stack configuration represents another distinguishing feature. Developers can specify their preferred frameworks and libraries upfront, and Kombai generates code matching those choices rather than defaulting to a single tech stack.

Project-wide analysis sets Kombai apart from simpler screenshot-to-code tools. By understanding the broader codebase, Kombai can generate components that match existing patterns and integrate with established architecture rather than creating isolated, inconsistent code.

Comparing 3 AI tools

To compare these approaches fairly, I used an identical Figma design across all three tools. The design came from Figma Community: a portfolio website template with multiple sections, typography hierarchy, images, and interactive elements. This provided enough complexity to reveal meaningful differences between tools.

Figma template: https://www.figma.com/community/file/1170206889562959306

The testing methodology kept variables controlled. Each tool received the same input: a Figma design URL pointing to a specific frame. The prompt remained consistent across all tests:

FIGMA_DESIGN_URL Implement this Figma design

Obtaining the Figma URL requires using Figma’s “Copy/Paste as” menu and selecting “Copy link to selection.” This generates a URL that references a specific frame or component within the design file, which the AI tools can then retrieve through Figma’s API or MCP connection.

The evaluation focused on several dimensions: design fidelity measured visually against the original, component architecture examining how code was structured, responsive behavior testing across viewport sizes, and implementation quality looking at semantic HTML, accessibility, and maintainability patterns.

Claude Code with Figma MCP

Claude Code, powered by Sonnet 4.5, generated an implementation centered around Next.js 14 with App Router. The output consisted of 13 independent components, each representing a distinct section or functional element of the design.

The technical stack reflected modern React patterns:

Next.js 14 with App Router for routing and server components
TailwindCSS 3.4 for styling with utility classes
TypeScript for type safety and developer experience

Component organization showed thoughtful separation of concerns. Each major section of the portfolio received its own component file: Hero, About, Projects, Skills, Contact, and so on. This modularity would make future maintenance and updates more manageable.

Design fidelity reached approximately 65–70%, with particular success in replicating gradient backgrounds and blur effects. These subtle visual details often get lost in simpler implementations, so seeing them preserved indicated Claude’s attention to the complete visual hierarchy.

Typography implementation captured the design’s intent reasonably well. Heading sizes, font weights, and text spacing matched the Figma specifications closely, though some fine-tuning of line heights would improve the final polish.

The most significant limitation appeared in responsive design. While the implementation used some responsive patterns, several components relied on fixed pixel values that broke layouts on smaller screens. This partially responsive approach suggests the AI interpreted the desktop design literally rather than inferring adaptive behavior.

Image handling defaulted to placeholders, requiring manual replacement with actual assets. This makes sense given the AI cannot access project-specific images, but it does add a post-generation step to the workflow.

Overall, Claude Code with Figma MCP delivered a solid foundation that would require moderate refinement for production use. The component architecture particularly stood out as a strength, providing good starting structure for continued development.

Codex CLI with Figma MCP

Codex CLI took a notably different architectural approach, generating both Next.js components and pure HTML files. This hybrid strategy reflected an interesting interpretation of how to structure the implementation.

The technical stack combined modern frameworks with traditional web approaches:

Next.js 14 with App Router serving as the primary framework
Custom CSS using BEM-style naming conventions rather than utility classes
TypeScript for the React components
Semantic HTML with proper document structure in pure HTML sections

Semantic HTML usage stood out as the implementation’s strongest characteristic. The code extensively used appropriate HTML5 elements: <dl>\, <dt>\, and <dd>\ tags for definition lists, <article>\ for content sections, <nav>\ for navigation, and proper heading hierarchy throughout. This attention to document semantics improves accessibility and SEO significantly.

Accessibility received explicit attention through aria attributes. Interactive elements included aria-label\ properties, navigation sections contained aria-current\ indicators, and the overall structure supported screen reader navigation effectively.

Responsive design implementation outperformed the Claude Code version. The CSS included media queries at appropriate breakpoints, and layouts adapted reasonably well across device sizes. This suggested Codex either inferred responsive requirements or defaulted to responsive patterns.

Design fidelity measured around 70–75%, slightly higher than Claude Code’s output. The combination of semantic structure and careful CSS resulted in an implementation that captured both visual appearance and underlying document meaning.

The mixed architecture of React components plus standalone HTML felt somewhat inconsistent. In a real project, consolidating to a single approach would likely improve maintainability. However, the semantic HTML quality demonstrated that Codex CLI understands document structure at a deeper level than purely presentational frameworks might suggest.

Image placeholders appeared here as well, maintaining consistency with the Claude Code behavior. This remains an unavoidable limitation when AI tools cannot access actual project assets.

Kombai

Kombai’s implementation differed fundamentally from the MCP-based approaches, reflecting its specialization in frontend generation. The output leveraged Material UI extensively, using that component library’s established patterns throughout.

The technical stack centered on React with specific tooling choices:

React 18 with Vite for fast development and optimized builds
Material UI (MUI) version 5 providing comprehensive component primitives
TypeScript for type safety
Emotion for CSS-in-JS styling integrated with MUI’s theming

Design fidelity reached 75–80%, the highest among the three tools tested. This superior reproduction quality came partly from MUI’s polished components but also from Kombai’s optimization specifically for this task. Visual details like spacing, typography, and color matched the Figma design more precisely than either MCP-based approach.

Most strikingly, Kombai included actual profile images from the Figma file rather than placeholders. This asset handling demonstrated deeper integration with Figma’s resources and reduced post-generation work significantly.

Responsive implementation used MUI’s breakpoint system throughout. This declarative approach to responsive design resulted in layouts that adapted smoothly across viewport sizes. The code explicitly defined behavior at different breakpoints using MUI’s sx\ prop and theme breakpoint utilities. Component organization followed a more functional pattern than the MCP approaches. Rather than breaking the design into 13 small components, Kombai created 9 larger sections plus shared utility components. This reflected a different architectural philosophy focused on page sections rather than granular component decomposition.

The primary tradeoff came from Material UI dependency. Projects already using MUI would integrate this code seamlessly, but teams using other design systems or preferring unstyled components would face significant adaptation work. The implementation locked in not just component structure but an entire ecosystem of styling and theming.

Despite this constraint, Kombai’s output required less refinement to reach production quality. The combination of high visual fidelity, proper responsive design, and working asset integration meant fewer gaps to fill after generation.

3 AI tools analysis

Examining the three implementations side by side reveals distinct strengths and appropriate use cases for each approach.

Claude Code’s strength lies in component architecture thinking. The 13-component breakdown creates a maintainable structure that teams can extend incrementally. This matters more as projects grow and multiple developers contribute to the codebase. Codex CLI distinguished itself through semantic HTML and accessibility focus. Projects where SEO, screen reader support, or standards compliance are priorities would benefit most from this approach. The attention to document structure suggests a deeper understanding of web fundamentals. Kombai optimized for visual fidelity and development speed. Getting 75–80% reproduction accuracy reduces designer feedback cycles significantly. For projects using Material UI or willing to adopt it, Kombai delivers the most complete starting point.

Technology stack preferences heavily influence which tool fits best. Teams standardized on TailwindCSS would prefer Claude Code’s output. Projects prioritizing semantic HTML and custom CSS would lean toward Codex CLI. Material UI shops would find Kombai’s code immediately usable.

The responsive design gap in Claude Code’s output represents a correctable limitation. Adding appropriate responsive patterns to the generated code requires work but builds on a solid component foundation. In contrast, rearchitecting Kombai’s code away from Material UI would require more fundamental changes.

Key Takeaways and Practical Implications

This testing revealed that “faithful implementation” means different things depending on what you value. Pure visual matching, semantic structure, component architecture, and technology alignment all represent valid but distinct goals.

Current AI tools achieve 65–80% design fidelity without human intervention. This falls short of pixel-perfect reproduction but provides substantial value as a starting point. The remaining 20–35% typically involves refinement rather than fundamental rework. Framework and library consistency matters more than many developers initially expect. Generated code must fit into existing project structure, dependencies, and patterns. A beautiful standalone implementation that doesn’t match your tech stack creates integration work that reduces the time savings.

Engineer evaluation and adjustment remains necessary at this stage of AI capability. Reviewing generated code for responsive behavior, accessibility, semantic correctness, and architectural fit represents unavoidable steps. Treating AI output as a first draft rather than final code sets appropriate expectations.

The specialization versus generalization tradeoff manifests clearly in these results. Kombai’s frontend-specific optimization produces better immediate output for its narrow domain. Claude Code and Codex CLI offer more flexibility but require better prompting to achieve similar quality.

For simple implementations and prototypes, current tools deliver sufficient quality for many use cases. Moving from design to working demo in minutes rather than hours changes project workflows substantially. The draft generated becomes a conversation starter that designers and engineers refine collaboratively.

Follow me on X

I also post on X (Twitter) about development tools, AI experiments, and frontend techniques:

X → https://x.com/oikon48

References

Claude Code: https://claude.ai/code

Codex CLI: https://github.com/openai/codex-cli

Kombai: https://kombai.com/

Figma Community Portfolio Design: https://www.figma.com/community/file/1170206889562959306

nano-banana special prompt achieved rapid Mobile UI Mockups

Oikon — Sun, 14 Sep 2025 05:14:40 +0000

TL;DR

Use Gemini 2.5 Flash Image (a.k.a "nano-banana") to generate a single figure with exactly four iPhone screens showing a left‑to‑right user journey. A copy‑paste prompt blueprint is included below, along with three ready‑made customizations (Fitness, Cooking, Finance). Iterate lightly by adjusting theme, contrast, and density, keeping backgrounds minimal, and labeling each screen.

I recently dove into mobile app development and quickly ran into a familiar early-stage hurdle: turning fuzzy ideas into concrete UI directions. Traditional approaches like paper sketches, wireframes, or Figma all work well, but each comes with a learning curve and setup time. For quick ideation on layout, flow, and visual tone, without opening a design tool, Google’s Gemini 2.5 Flash Image (a.k.a “nano-banana”) is a surprisingly capable partner.

In this article, I’ll share a prompt-first workflow for generating high-quality, consistent, four-screen iOS mockups that communicate a complete user journey. You’ll get a copy‑paste prompt blueprint you can reuse, three ready‑made customizations (Fitness, Cooking, Personal Finance), and practical tips to tune outputs while avoiding common pitfalls.

This isn’t a replacement for proper product design. It’s a fast, visual way to explore directions, align with stakeholders, and then hand off to Figma or code with more confidence.

What is “nano-banana”?

Gemini 2.5 Flash Image (“nano-banana”) is Google’s image-generation model released in late August 2025.

It’s optimized for speed and consistency, and it does especially well with structured prompts that describe layout, device framing, and content constraints.

You can use nano-banana in Google AI Studio:

https://aistudio.google.com/

Why a prompt-first mockup?

A prompt-first approach delivers speed to clarity, producing realistic screens in minutes that are ideal for brainstorming and stakeholder conversations. It has low overhead because you can explore concepts without setting up design files or libraries. It also encourages journey‑first thinking by forcing clarity on the flow rather than on isolated screens, and it’s repeatable since a structured prompt makes results consistent and easy to iterate.

The 4‑screen mockup prompt blueprint

Use the following prompt to generate a single image with four iPhone screens laid out horizontally, telling a left‑to‑right user journey. Replace the bracketed fields with your app’s details.

<Create a professional iOS app mockup figure>
showing exactly 4 iPhone screens arranged horizontally in a single high-resolution image. The screens demonstrate a complete user journey for a [Application Type] application.

<APP SPECIFIC CUSTOMIZATION>
Application Core: [User Input of application core]
Primary Features:
1. [User Input of feature 1, example: Dashboard]
2. [User Input of feature 2, example: Figure]
3. [User Input of feature 3, example: Charts]
4. [User Input of feature 4, example: Log]
Visual Theme: [User Input of Theme, example: Energetic orange and black theme, bold sans-serif typography, high contrast design, motivational imagery]
Target Audience: [User Input of audience, example: Aged 20-40]
<END CUSTOMIZATION>

DETAILED VISUAL SPECIFICATIONS:
Device Frame: Modern iPhone 15/16 Pro Max with Dynamic Island, edge-to-edge display, no home button
Screen Resolution: High-quality, crisp rendering at 2796×1290 pixels per screen
Background Setting: Subtle blurred gradient or professional studio backdrop that complements the app theme
Lighting: Soft, even lighting with minimal shadows for professional presentation

UI/UX REQUIREMENTS:
Native iOS 17+ components using SwiftUI design language
System font (SF Pro) with proper typography hierarchy
Consistent spacing following Apple's Human Interface Guidelines (8pt grid system)
Interactive elements clearly distinguishable (buttons, toggles, text fields)
Proper safe areas and status bar implementation
Tab bar or navigation structure visible where appropriate
Realistic, meaningful content (no lorem ipsum) - use actual examples relevant to the app
Clear visual flow from left to right showing user progression

COMPOSITION AND STYLE:
Arrange 4 iPhone mockups in a horizontal line with equal spacing
Each screen labeled with its function at the top or bottom
Consistent color palette throughout all screens
Use depth and shadows to create professional mockup appearance
Include subtle animations indicators where relevant (like transition hints)
Show different states (empty states, filled states, active selections)

OUTPUT FORMAT:
Single cohesive figure, resolution minimum, professional presentation quality suitable for App Store submission or investor pitch deck. Photorealistic device rendering with the app screens perfectly integrated.

How to use it

Define the journey by picking four states that tell a cohesive story (for example, Overview → Details → Edit → Confirm). Fill the APP SPECIFIC CUSTOMIZATION with concrete, real content—avoid lorem ipsum entirely. Generate and assess the result by checking consistency across screens in type, spacing, colors, and data. Iterate with small edits by nudging theme, contrast, or content density and tightening typographic hierarchy. When you have a clear winner, export the figure for your deck, brief, or design kickoff.

Three ready‑to‑use customizations

1) Fitness Tracker

Use this block to replace the <APP SPECIFIC CUSTOMIZATION> section in the blueprint.

<Create a professional iOS app mockup figure>
showing exactly 4 iPhone screens arranged horizontally in a single high-resolution image. The screens demonstrate a complete user journey for a Fitness tracker application.

<APP SPECIFIC CUSTOMIZATION>
Application Core: Personal fitness tracking and workout planning application with AI coaching
Primary Features:
1. Dashboard - Daily activity summary, calories burned, steps, heart rate
2. Workout Library - Exercise videos, custom routines, difficulty levels
3. Progress Charts - Weight trends, strength gains, body measurements over time
4. Activity Log - Workout history, personal records, achievement badges
Visual Theme: Energetic orange and black theme, bold sans-serif typography, high contrast design, motivational imagery with gradient accents
Target Audience: Health-conscious individuals aged 20-40
<END CUSTOMIZATION>

2) Cooking Recipe App

Use this block to replace the section in the blueprint.

<Create a professional iOS app mockup figure>
showing exactly 4 iPhone screens arranged horizontally in a single high-resolution image. The screens demonstrate a complete user journey for a Cooking recipe application.

<APP SPECIFIC CUSTOMIZATION>
Application Core: Smart recipe organizer with meal planning and grocery list generation
Primary Features:
1. Recipe Feed - Curated daily recipes with dietary filters and seasonal suggestions
2. Meal Planner - Weekly calendar view with drag-and-drop meal scheduling
3. Shopping List - Auto-generated grocery lists organized by store sections
4. My Cookbook - Personal recipe collection with family recipes and notes
Visual Theme: Warm earth tones with sage green accents, elegant serif headers, food photography backgrounds, minimalist card-based layouts
Target Audience: Home cooks and food enthusiasts aged 25-50
<END CUSTOMIZATION>

3) Personal Finance Manager

Use this block to replace the section in the blueprint.

<Create a professional iOS app mockup figure>
showing exactly 4 iPhone screens arranged horizontally in a single high-resolution image. The screens demonstrate a complete user journey for a personal finance manager application.

<APP SPECIFIC CUSTOMIZATION>
Application Core: Smart personal finance manager with AI-powered spending insights and investment tracking
Primary Features:
1. Overview - Total balance, monthly spending summary, budget status, upcoming bills
2. Transactions - Categorized expense list with merchant logos, search and filters
3. Analytics - Spending breakdown charts, category trends, savings goals progress
4. Investments - Portfolio performance, stock watchlist, crypto holdings, market news
Visual Theme: Professional navy blue and gold accents, clean geometric patterns, financial data visualizations with glassmorphism effects, trust-inspiring design
Target Audience: Young professionals and investors aged 25-45
<END CUSTOMIZATION>

Quality tips and tuning

Keep it real by replacing placeholders with plausible, domain‑specific content such as dates, names, amounts, and imagery. Enforce hierarchy by asking for a clear typographic hierarchy using SF Pro and by constraining line lengths—for example, keep titles under 30 characters. Increase contrast if results look washed out by specifying high‑contrast, WCAG‑conscious color usage. Tighten spacing by including an 8pt grid and consistent spacing in prompts, and request more negative space if layouts feel crowded. Control density by limiting per‑screen content to six to eight distinct elements. Anchor the journey by explicitly naming each screen in the prompt and requesting labels on the mockups. Iterate lightly, changing one variable at a time—colors, data density, or component style—before regenerating.

FAQ

Why four screens?

Four is enough to show context → explore → focus → commit without overwhelming the viewer, and the format fits neatly in a wide figure for decks.
In addition, Generative AI has less capability to make consistency when generating separate images.

When to use nano‑banana vs. a design tool

Use nano‑banana for early ideation and alignment when you need fast, realistic visuals to explore directions, align stakeholders, or kick off discussions without opening Figma or Sketch. It especially shines when you want to present a left‑to‑right user flow (onboarding → browse → detail → act) in one cohesive figure.

For specs and interactivity, move to Figma/Sketch/XD for component specs, typography tokens, responsiveness, and interactive prototypes, and refer to Apple’s Human Interface Guidelines (HIG) for platform‑correct patterns and accessibility. Treat nano‑banana as a way to visualize, then validate color/contrast and touch targets against WCAG and HIG in your design tool or implementation. In short, generate to decide direction and design to solidify implementation.

Summary

Nano-banana shows new way of UI designing. Prompt‑first mockups won’t replace design systems, but they’re fantastic for momentum. Use the blueprint to frame a journey, generate credible screens, and then bring the winning direction into Figma or code.

Follow on X

I share insights about AI development tools and trends on X:

X → https://x.com/oikon48

References

Google AI Studio:
https://aistudio.google.com/

Apple Human Interface Guidelines (HIG):
https://developer.apple.com/design/human-interface-guidelines/

From Figma to Frontend in Minutes: A Hands-On Review of "Kombai"

Oikon — Sun, 03 Aug 2025 13:44:58 +0000

Note: this original post is in Zenn (Japansese)

I'm excited to share my experience with Kombai, an AI-powered frontend tool that specializes in Figma to Code conversion.

Kombai previously ranked #1 on Product Hunt and was officially released on July 31st, 2025.

My Overall Assessment

After testing Kombai extensively, here are my key takeaways:

Easy to use as VSCode or Cursor plugin
Excellent sandbox UI preview functionality
High UI compilation success rate
Not pixel-perfect for Figma to Code, but excellent as a starting point

AI coding tools like Claude Code often struggle with frontend and UI development, so I find frontend-specialized AI tools particularly interesting.

About Kombai

https://kombai.com/

Kombai is an AI agent specializing in frontend development and has gained attention as an AI-powered development assistance tool. In 2023, it was selected as the most upvoted tool on Product Hunt (link). Kombai aims to automate frontend development with AI.

At Kombai are building a developer tool for web app developers which takes away their mundane automatable tasks like writing and maintaining CSS and other boilerplate JS code. Our vision is to automate all the mundane tasks a frontend dev team has to do today, accounting for 60-70% of their work.

The product page showcases benchmarks for frontend development. Kombai reports better performance than commonly used AI coding agents in three areas: Code Review, Feature Implementation, and Compilation Success.

Pricing starts with a free plan that includes credits. As I'll explain later, loading one Figma design and creating UI typically costs around 20-40 credits.

Trying Kombai

Installation

Kombai is currently available on these marketplaces:

VSCode
Cursor
Windsurf

I'll explain the process of installing Kombai in Cursor.

Search for "Kombai" in the plugin search, and you'll see Kombai with a dog icon.

After installation, a Sign in screen appears in the editor view. If you don't have an account, select Sign up.

Upon successful sign-in, you'll see a screen like this:

Creating UI with Natural Language

First, I tried instructing UI creation using natural language. I entered the following prompt:

I want to create a Pokédex. Make it possible to view all 151 Pokémon from the first generation.

When you run the chat, it lists what technology stack to use for designing the frontend.

Framework: React 19 TypeScript
API Framework: RTK, RTK Query
Router: React Router v7 (declarative mode)
Component Library: MUI v7
Styling: Emotion

The technology stack choices provided seem a bit different from what's typically preferred in Japan. You can change the technology stack used from Configure stack if needed.

Available categories include:

Framework
API & State Management
Router
Components
Styling
Icons
Global Instructions
Advanced Configurations

After deciding on the technology stack, it moves to the Planning Phase. The Planning Phase lists what views and components to create. You can edit or provide input if there are issues.

If there are no issues with the Planning Phase content, you execute it. After execution, a Run in Sandbox button appears as shown in the image below.

When you run Run in Sandbox, you can view and interact with the actual frontend created on localhost. The ability to preview AI-generated frontend in a sandbox is one of Kombai's key strengths.

The Pokédex created this time looks like this. It has a MUI-style UI.

It prepared 5 mock data entries for me.

I tried adding the following additional prompt:

Make it 151 types of Pokémon. Also, make all UI language Japanese.

The Pokédex generated by the additional instruction is shown in the image below. It properly supported Japanese and prepared 151 types of mock data.

UI interactions were also possible in the sandbox. For example, when selecting a Pokémon, I could check individual Pokémon details.

Beyond this, I was able to confirm that search and filter functions worked correctly within the sandbox.

If there are no issues with changes in the sandbox, you can save the changes. Conversely, unless you adopt the changes, Kombai won't reflect changes to your local work environment. Items developed in the sandbox can also be restored to checkpoints in the chat.

The frontend output for this Pokédex is as follows:

Kombai not only created components but also organized the frontend folder structure.

Creating UI from Figma

Kombai also provides "Figma to UI" functionality that imports Figma designs and converts them to UI. You can add it from Add Figma link in the bottom right of the chat.

A dialog for entering the Figma URL appears. The dialog also explains how to get the Figma URL:

Right-click frame > "Copy/Paste as" > "Copy link to selection"

The first time requires authentication to connect Figma and Kombai.

When the Figma URL is correctly loaded, the Figma design appears in the prompt as shown in the image below. This design is treated as a @ resource, so it was possible to load multiple Figma designs.

I'll introduce some examples of UI created from actual Figma designs. For reference, all were one-shot prompts.

I'll show three examples, so please compare the Figma designs with Kombai's output. Each consumed about 20-40 credits.

Example 1

Figma Design (link):

Kombai's Output:

Example 2

Figma Design (link):

Kombai's Output:

Example 3

Figma Design (link):

Kombai's Output:

My impressions:

Not pixel-perfect reproduction
Sufficient as an initial mock
Seems to struggle a bit with transparency effects
Can be improved with few-shot prompting

Kombai's official site also provides design reference examples, which should be helpful for understanding what kinds of UI can be generated.

Summary

This time I introduced "Kombai," an AI tool for Figma to Code conversion.

Easy to use as VSCode or Cursor plugin
Excellent sandbox UI preview functionality
High UI compilation success rate
Not pixel-perfect for Figma to Code, but excellent as a starting point

While this was a frontend-focused AI tool, I think we'll see more domain-specific coding tools in the future.

I hope this helps anyone who's interested.

References

Follow me on X/Twitter for more tech content!

Enhancing Claude Code with MCP Servers and Subagents

Oikon — Sat, 14 Jun 2025 17:01:04 +0000

Introduction

I've been using Claude Code daily for personal development projects. However, I've encountered several cases where Claude struggled to solve complex problems dependent on specific library versions during web app development.

After extensive experimentation, I discovered that enabling Model Context Protocol (MCP) servers for Claude Code significantly improves its problem-solving capabilities. This article shares my findings and practical implementation.

Background and Motivation

While Claude Code is powerful, it sometimes lacks current information about rapidly evolving libraries and frameworks. This limitation becomes particularly evident when dealing with:

Version-specific compatibility issues
Recent library updates and breaking changes
Latest best practices and solutions

MCP Servers Used

Context7: Version-specific API documentation retrieval
Brave-Search: Web search functionality

Both are well-established MCP servers. Additionally, I experimented with custom slash commands that leverage subagents with MCP servers for more streamlined workflows.

Understanding Model Context Protocol (MCP)

MCP is a protocol proposed by Anthropic that connects AI systems with external tools. Simply put, it's a standard that enables AI agents to use external tools.

In our setup:

Host with MCP client = Claude Code
MCP server A/C = Context7 MCP server
MCP server C = Brave-Search MCP server

Context7 MCP Server

https://github.com/upstash/context7

Context7, developed by Upstash, is an MCP server that retrieves versioned API documentation. It addresses the common issue where AI models have outdated information about rapidly evolving OSS libraries.

Supported libraries are available at context7.com. The coverage includes most common web development libraries.

Setup for Claude Code:

Remote MCP Server:

claude mcp add --transport sse context7 https://mcp.context7.com/sse

Local MCP Server:

claude mcp add context7 -- npx -y @upstash/context7-mcp

Brave-Search MCP Server

https://github.com/modelcontextprotocol/servers-archived/tree/main/src/brave-search

Brave-Search provides web search functionality as an MCP server. While Claude Code has built-in web search, I found the dedicated MCP server more effective, especially when working with subagents.

The free plan allows up to 2,000 queries per month. Get your API key from the official site.

Setup:

claude mcp add brave-search -s user -- env BRAVE_API_KEY=`YOUR_API_KEY_HERE` npx -y @modelcontextprotocol/server-brave-search

Security Note: While these servers aren't in Anthropic's official repository (Brave-Search is archived), they're widely trusted. Always exercise caution with MCP servers due to potential security risks like tool poisoning.

Claude Code Subagents

Subagents are a default feature in Claude Code that many users overlook. Tasks shown under Task are executed by subagents, particularly for web fetching and file reading operations.

According to Anthropic's official documentation:

This is the part of the workflow where you should consider strong use of subagents, especially for complex problems. Telling Claude to use subagents to verify details or investigate particular questions it might have, especially early on in a conversation or task, tends to preserve context availability without much downside in terms of lost efficiency.

Subagent Characteristics

Lightweight execution
Parallel operation capability
Access to parent agent's available tools
Independent context windows
Task-specific lifecycle (created and destroyed per task)

This architecture enables parent agents to delegate tasks to subagents for execution, with parallel processing capabilities for improved efficiency.

Practical Implementation: Using MCP Servers with Subagents

Without Subagents

When not explicitly specifying subagent usage, Claude Code directly calls Context7 and Brave-Search MCP servers.

CLAUDE.md configuration:

- You can use web search including `use brave-search` MCP to search the latest solution.
- You should check the latest Next.js, Node.js, and other libraries with `use context7` MCP.

Benefits:

Complete context inheritance from Claude Code
Seamless problem-solving with current context

Drawbacks:

Higher context window consumption
Faster rate limit approach

With Subagents

Include "use subagent" or "multiple subagents" in your prompts to delegate tasks to subagents.

Benefits:

Parallel information processing
Clear separation of concerns
Reduced parent context window pressure

Drawbacks:

Minimal context sharing with subagents
Potentially less targeted search results

Pros and Cons Summary

Advantages:

Simple implementation
No RAG system required
Access to latest information

Disadvantages:

Context window consumption
Increased token usage
Claude Code's limited MCP server proficiency

The approach serves as improving the probability of successful code generation rather than a guaranteed solution.

Advanced Usage: Custom Slash Commands

Instead of repeatedly typing use subagent and use Context7, I recommend creating custom slash commands for streamlined bug resolution.

Setup: Place Markdown files in the commands directory:

Global: ~/.claude/commands/ (prefix: /user:)
Project-specific: <project root>/.claude/commands/ (prefix: /project:)

Example - ~/.claude/commands/bugfix.md:

Fix bug from user provided bug description: $ARGUMENTS

1. Understand the bug description and think the root cause. Try to recreate the issue.
2. Fix the issue. Use `context7` and `brave-search` MCP tools to understand the error. 
These MCP tool searching should be done by multiple subagents. Also use native Web search subagent for issue investigation.
3. If there is another error, always repeat this debugging process from 1 to 2.

Usage:

/user:bugfix Next.js Hydration error needs fixing.

Claude Code understands the predefined execution steps and prepares appropriate tasks automatically.

Case Study: Solving Next.js 15 Hydration Errors

In my testing, Claude Code successfully resolved Next.js 15 hydration errors that it previously couldn't handle alone. The combination of:

Context7 for latest Next.js documentation
Brave-Search for recent solution discussions
Subagents for parallel information gathering

This resulted in accurate identification and resolution of Next.js 15 and Material-UI compatibility issues.

Conclusion

This article explored using MCP servers with subagents to address Claude Code's limitation with current library information. While the implementation focused on search-related MCP servers, filesystem and popular Obsidian MCP servers could be equally effective for accessing local documentation.

Key takeaways:

MCP servers enhance Claude Code's problem-solving capabilities
Subagents provide parallel processing and context management benefits
Custom slash commands streamline complex workflows
The approach improves success probability rather than guaranteeing solutions

Future outlook: Subagent parallelization is an active research area. While we implemented basic multiple-subagent search within Claude Code, official improvements to this functionality are likely forthcoming.

The combination of MCP servers and subagents represents a significant step toward more capable AI-assisted development workflows.

Note

This original document is written in Japanese.

You can find original document here

References

Improving Japanese Input UX in Multilingual Applications: Properly Handling IME Conversion

Oikon — Sun, 09 Mar 2025 10:00:00 +0000

Introduction

In global web application development, multilingual support is an essential requirement. However, languages that use IME (Input Method Editor) such as Japanese, Chinese, and Korean have unique input and conversion processes that require special consideration. This article explains issues with form operations in Japanese input and their solutions.

Target Audience

Web application developers
Frontend developers
Those involved in developing globally accessible applications

The Problem: Event Handling During IME Conversion

Japanese input involves a conversion process from "hiragana" to "katakana/kanji". During this process, the following issue often occurs:

Example: When trying to search for "Tokyo Tower"
1. Type "とうきょうたわー" (hiragana)
2. Press spacebar to display conversion candidates
3. Press Enter to confirm "東京タワー" (kanji/katakana)
4. This Enter key mistakenly triggers the search execution

This results in an unintended search for "Tokyo Tower" and degrades the user experience. This problem is particularly noticeable in UIs where the Enter key executes actions, such as search forms and chat interfaces.

Technical Background: Composition Events

When inputting with IME, "Composition" events occur in addition to standard keyboard events:

compositionstart: Start of conversion process
compositionupdate: Update of text during conversion
compositionend: End of conversion process

Additionally, the KeyboardEvent object includes an isComposing property that indicates whether IME conversion is in progress. Understanding this characteristic is the first step toward improving UX.

Solution: Using the isComposing Property

IME support can be implemented in frontend frameworks like React, Vue, and Angular as follows:

React Implementation Example

function SearchField({ onSearch }) {
  const handleKeyDown = (event) => {
    // Ignore Enter during IME conversion confirmation
    if (event.key === "Enter" && !event.nativeEvent.isComposing) {
      event.preventDefault();
      const searchTerm = event.target.value.trim();
      if (searchTerm) {
        onSearch(searchTerm);
      }
    }
  };

  return (
    <input 
      type="text" 
      onKeyDown={handleKeyDown} 
      placeholder="Search..." 
    />
  );
}

Vue Implementation Example

<template>
  <input 
    type="text" 
    @keydown="handleKeyDown" 
    placeholder="Search..." 
  />
</template>

<script>
export default {
  methods: {
    handleKeyDown(event) {
      if (event.key === "Enter" && !event.isComposing) {
        event.preventDefault();
        const searchTerm = event.target.value.trim();
        if (searchTerm) {
          this.$emit('search', searchTerm);
        }
      }
    }
  }
}
</script>

HTML/JavaScript Implementation Example

document.querySelector('input').addEventListener('keydown', function(event) {
  if (event.key === 'Enter' && !event.isComposing) {
    event.preventDefault();
    const searchTerm = this.value.trim();
    if (searchTerm) {
      performSearch(searchTerm);
    }
  }
});

Handling More Complex UI Components

The same approach can be applied when using UI libraries like Material-UI, Ant Design, and Chakra UI. Here's an implementation example with Material-UI's Autocomplete component:

import { Autocomplete, TextField } from '@mui/material';

function SearchComponent({ onSearch, options }) {
  const [inputValue, setInputValue] = useState('');

  const handleKeyDown = (event) => {
    if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
      event.preventDefault();
      if (inputValue.trim()) {
        onSearch(inputValue.trim());
      }
    }
  };

  return (
    <Autocomplete
      freeSolo
      options={options}
      inputValue={inputValue}
      onInputChange={(event, newValue) => setInputValue(newValue)}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Search"
          variant="outlined"
          onKeyDown={handleKeyDown}
        />
      )}
    />
  );
}

Testing Methods

To test IME-related implementations:

Operate the application in Japanese input mode
Enter "hiragana" and display conversion candidates
Press Enter to confirm the conversion
Verify that pressing Enter again executes the search

It's ideal to test in a Japanese environment, but if Japanese IME is not available in your development environment, the following tools can be helpful:

Windows: Microsoft IME
macOS: Japanese Input System
Online emulators: Some browser extensions can simulate IME input

Browser Compatibility Notes

While the isComposing property is widely supported in modern browsers, it may behave differently in older browsers. As an alternative approach to ensure compatibility, consider implementing using compositionstart and compositionend events:

let isComposing = false;

input.addEventListener('compositionstart', () => {
  isComposing = true;
});

input.addEventListener('compositionend', () => {
  isComposing = false;
});

input.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && !isComposing) {
    // Execute search process
  }
});

Conclusion

In multilingual applications, input processing that considers IME is essential. Especially in cases where the Enter key executes actions such as in search forms and chat interfaces, it's important to use the isComposing property to distinguish between IME conversion processes and normal input.

This small consideration greatly improves the experience for users of languages such as Japanese, Chinese, and Korean. In global application development, attention to such details leads to true multilingual support.

References

How to Implement Dynamic Multilingual Sitemap with 40,000 URLs in Next.js App Router

Oikon — Sun, 09 Feb 2025 13:36:33 +0000

Introduction

This article explains implementing a dynamic sitemap for a large-scale website using Next.js App Router. I'll share the implementation method for a multilingual site containing over 40,000 content items.

TL;DR

By combining Next.js sitemap API with 24-hour caching, we implemented a practical dynamic sitemap solution for large-scale sites. This approach minimizes the impact on frontend build time while enabling daily data updates.

Development Environment

Frontend: Next.js (App Router)
Backend: Express + MongoDB
Infrastructure: Vercel (Frontend), Heroku (Backend)
Languages: 2 (bilingual)

Context

Over 20,000 unique pages
Each page has 2 language variations (total: 40,000+ URLs)
Daily data updates
Sitemap required for SEO requirements

Understanding Sitemap Generation

There are three main approaches to sitemap generation:

Static Generation
- Fast response time
- Low server load
- Longer build times
- Difficult to handle immediate data updates
Dynamic Generation
- Easy reflection of latest data
- No impact on build time
- Higher server load
- Potential slower response times
ISR (Incremental Static Regeneration)
- Balanced approach between static and dynamic
- Easy cache control
- Slightly more complex implementation

I had written about basic sitemap generation in the following document:
Implementing Multilingual Sitemap with next-intl in Next.js App Router

Implementation

We adopted an implementation combining Next.js sitemap API with 24-hour caching:

// app/sitemap.ts
import { MetadataRoute } from "next";

const BASE_URL = process.env.NODE_ENV === "production" 
  ? "https://example.com"
  : "localhost:3000";

const API_BASE_URL = process.env.NODE_ENV === "production"
  ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/util`
  : "http://localhost:3500/api/util";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const locales = ["en", "ja"];
  const routes = ["/", "/about", "/products", "/contact"];

  // Generate static routes
  const staticRoutes = routes.flatMap((route) =>
    locales.map((locale) => ({
      url: `${BASE_URL}/${locale}${route === "/" ? "" : route}`,
      lastModified: new Date(),
      changeFrequency: "monthly" as const,
      priority: route === "/" ? 1 : 0.8,
    }))
  );

  try {
    // Fetch product data with caching
    const response = await fetch(`${API_BASE_URL}/products`, {
      next: { revalidate: 86400 }, // Cache for 24 hours
      headers: { "Cache-Control": "public, max-age=86400" },
    });

    if (!response.ok) {
      throw new Error(`Failed to fetch products: ${response.statusText}`);
    }

    const products = await response.json();

    // Generate product URLs
    const productRoutes = products.flatMap((product: any) =>
      locales.map((locale) => ({
        url: `${BASE_URL}/${locale}/product/${product.id}`,
        lastModified: new Date(product.updatedAt),
        changeFrequency: "daily" as const,
        priority: 0.7,
      }))
    );

    return [...staticRoutes, ...productRoutes];
  } catch (error) {
    console.error("Error generating sitemap:", error);
    return staticRoutes; // Fallback to static routes on error
  }
}

Backend API implementation:

// Express route handler
router.get("/products", async (req, res) => {
  try {
    // Fetch minimal required data from MongoDB
    const products = await Product.find(
      {},
      {
        id: 1,
        lastUpdateDate: 1,
      }
    ).lean();
    res.json(products);
  } catch (error) {
    console.error("Failed to fetch products:", error);
    res.status(500).json({
      message: "Error fetching products",
      error: error instanceof Error ? error.message : String(error),
    });
  }
});

Implementation Results

Total URLs: 42,000 (21,000 for en, ja)
File size: 4.6MB
Generation time: Under 5 seconds
Impact on build time: Minimal
Cache duration: 24 hours

Checking results

You can check the generated sitemap in dev environment, localhost:3000/sitemap.xml.

Key Implementation Considerations

Caching Strategy
- Use both Next.js revalidation and HTTP caching
- 24-hour cache balances freshness and performance
- Implement fallback to static routes on errors
Error Handling
- Graceful degradation to static routes
- Structured error logging
- Monitoring integration recommended
SEO Optimization
- Proper lastModified dates
- Appropriate priority settings
- Consistent language codes

Conclusion

Next.js Sitemap API proves capable of handling large-scale multilingual sites effectively. The key to success lies in implementing proper caching strategies and error handling, enabling a balance between performance and maintainability.

Resources

Resolving Duplicate Key Issues in React Infinite Scroll with MongoDB Sort Behavior

Oikon — Fri, 07 Feb 2025 12:37:22 +0000

Introduction

While implementing infinite scroll functionality using React and MongoDB, I encountered an issue where data was duplicating at pagination boundaries. This article explores the cause of this problem, which stems from MongoDB's sorting behavior, and presents a concrete solution using the _id field.

Target Audience

Developers working with React and MongoDB applications
Those implementing or planning to implement infinite scroll/pagination
Anyone interested in understanding database sorting behaviors

TL;DR

MongoDB's sorting behavior can lead to inconsistent ordering of documents with identical sort values. This causes key duplication warnings in React infinite scroll implementations. The solution involves adding the _id field as a secondary sort key.

Development Environment

- React 18.x
- MongoDB 8.0.0
- MongoDB Node.js Driver 6.9.0
- TypeScript 5.x
- Node.js 23.5.0

Problem Details

When querying a MongoDB Collection with a large dataset using filters, duplicate data appeared in the infinite scroll display. Specifically, the last item from the first fetch overlapped with the first item from the second fetch.

Warning Message

Warning: Encountered two children with the same key, `.$xxxxxxxxxxxx`. 
Keys should be unique so that components maintain their identity across updates. 
Non-unique keys may cause children to be duplicated and/or omitted — the behavior 
is unsupported and could change in a future version.

Reproduction Conditions

The issue occurs when:

MongoDB query includes filter conditions
Sorting is in ascending order
Retrieving data beyond the first page

Problematic Code

// Backend: MongoDB query
const sortObject = {
  [sortBy]: order === "asc" ? 1 : -1
};
const items = await Collection.find(query)
  .sort(sortObject)
  .skip(skip)
  .limit(limit)
  .lean()
  .exec();

// Frontend: React component
const loadMore = async (page: number) => {
  const response = await fetchItems(page);
  setState((prev) => ({
    items: [...prev.items, ...response.items],
    page,
  }));
};

Root Cause Analysis

MongoDB Sorting Behavior Characteristics

Documents with identical sort values don't maintain consistent ordering
When combined with pagination (skip and limit), the same document might appear on different pages
This results in React displaying items with duplicate keys

Solution

Add _id as a secondary sort key.
Reference: MongoDB Documentation: sort()

Modified MongoDB Query

const sortObject = {
  [sortBy]: order === "asc" ? 1 : -1,
  _id: 1  // Add _id as a secondary sort key
};
const items = await Collection.find(query)
  .sort(sortObject)
  .skip(skip)
  .limit(limit)
  .lean()
  .exec();

Why This Works

The _id field in MongoDB guarantees uniqueness
When primary sort keys have equal values, _id ordering ensures consistent results
This prevents pagination duplication

Technical Analysis

MongoDB Sort Behavior

By default, the order of documents with identical sort values is indeterminate
This behavior becomes more pronounced in distributed systems and sharding scenarios
Stable sorting requires including a unique value in the sort keys

Summary

When implementing infinite scroll with MongoDB, sorting behavior can cause issues in these scenarios:

Sort fields contain duplicate values
Pagination boundaries in large datasets
Multiple filter condition combinations

Utilizing the _id field as a secondary sort key enables stable sort results and clean infinite scroll implementation.

References

SEO and i18n Implementation Guide for Next.js App Router: Dynamic Metadata and Internationalization

Oikon — Wed, 05 Feb 2025 13:41:08 +0000

This article will provide practical implementation methods for optimizing SEO in internationalized (i18n) web applications using Next.js 14's App Router and Next-intl. We'll focus on metadata configuration for dynamically generated pages and multilingual support, using an e-commerce site as a concrete example.

Target Audience

This guide is for developers who:

Have basic understanding of Next.js App Router
Know TypeScript fundamentals
Have basic SEO knowledge

Development Environment

{
  "next": "^14.2.22",
  "next-intl": "^3.26.3",
  "react": "^18",
  "typescript": "^5"
}

1. Project Structure

1.1 Directory Layout

src/
  ├── app/
  │   └── [locale]/
  │       └── product/
  │           └── [id]/
  │               ├── page.tsx
  │               └── layout.tsx
  ├── lib/
  │   └── metadata/
  │       └── productMetadata.ts
  ├── api/
  │   └── model/
  │       └── Product.ts
  └── i18n/
  │   ├── routing.ts
  │
  └── messages/
      ├── en.json
      └── ja.json

1.2 Implementing Internationalized Routing

// src/i18n/routing.ts
import { defineRouting } from "next-intl/routing";
import { createNavigation } from "next-intl/navigation";

export const routing = defineRouting({
  locales: ["en", "ja"],
  defaultLocale: "en",
});

export const { Link, redirect, usePathname, useRouter } = createNavigation(routing);

1.3 Product Data Type Definition

// src/api/model/Product.ts
export interface Product {
  id: string;
  name: string;
  code: string;
  category: {
    id: string;
    name: string;
  };
  manufacturer?: string;
  description: string;
  images: {
    small: string;
    large: string;
  };
  price: number;
  stock: number;
}

2. Dynamic Metadata Generation

2.1 Implementing Metadata Generation Logic

// src/lib/metadata/productMetadata.ts
import { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import type { Product } from "@/api/model/Product";
import { routing } from "@/i18n/routing";

export async function generateProductMetadata(
  productDataPromise: Promise<Product>,
  locale: string
): Promise<Metadata> {
  const [productData, t] = await Promise.all([
    productDataPromise,
    getTranslations({ locale, namespace: "metadataProduct" }),
  ]);

  // SEO optimization: Information structuring
  const descriptionParts = [
    productData.name,
    `${productData.category.name} #${productData.code}`,
    productData.manufacturer ? `${t("manufacturedBy")}${productData.manufacturer}` : "",
    t("checkPrice")
  ].filter(Boolean);

  const description = descriptionParts.join(" | ");

  // Dynamic keyword generation
  const productSpecificKeywords = [
    productData.name,
    productData.category.name,
    productData.manufacturer,
    `${productData.name} ${t("price")}`,
    `${productData.name} ${t("stock")}`,
    `${productData.category.name} ${t("products")}`
  ].filter(Boolean);

  const baseKeywords = t("keywords").split(", ");
  const allKeywords = [...new Set([...productSpecificKeywords, ...baseKeywords])];

  return {
    title: `${productData.name} | ${productData.category.name} | ${t("siteTitle")}`,
    description,
    keywords: allKeywords.join(", "),
    metadataBase: new URL("https://example.com"),

    alternates: {
      canonical: `/${locale}/product/${productData.id}`,
      languages: {
        "x-default": `/en/product/${productData.id}`,
        ...Object.fromEntries(
          routing.locales.map((l) => [l, `/${l}/product/${productData.id}`])
        ),
      },
    },

    openGraph: {
      type: "website",
      siteName: t("siteTitle"),
      title: `${productData.name} | ${productData.category.name}`,
      description,
      locale,
      alternateLocale: routing.locales.filter((l) => l !== locale),
      images: productData.images.large ? [
        {
          url: productData.images.large,
          width: 1200,
          height: 630,
          alt: productData.name,
        },
      ] : undefined,
    },
    robots: {
      index: true,
      follow: true,
    },
  };
}

2.2 Translation File Setup

// messages/en.json
{
  "metadataProduct": {
    "siteTitle": "Example Store",
    "manufacturedBy": "Manufactured by",
    "checkPrice": "Check price and availability",
    "price": "price",
    "stock": "stock",
    "products": "products",
    "keywords": "online store, ecommerce, shopping, price comparison, stock check, product reviews, online shopping"
  }
}

// messages/ja.json
{
  "metadataProduct": {
    "siteTitle": "Example Store",
    "manufacturedBy": "製造元",
    "checkPrice": "価格と在庫状況をチェック",
    "price": "価格",
    "stock": "在庫",
    "products": "商品",
    "keywords": "オンラインストア, eコマース, 通販, 価格比較, 在庫確認, 商品レビュー, オンラインショッピング"
  }
}

2.3 Page Component Implementation

// app/[locale]/product/[id]/page.tsx
import { generateProductMetadata } from "@/lib/metadata/productMetadata";
import { cache } from 'react';
import { notFound } from 'next/navigation';

const getProductDataCached = cache(async (id: string) => {
  const response = await fetch(`/api/products/${id}`);
  if (!response.ok) {
    notFound();
  }
  return response.json();
});

export async function generateMetadata({ 
  params 
}: { 
  params: { id: string; locale: string } 
}) {
  const productDataPromise = getProductDataCached(params.id);
  return generateProductMetadata(productDataPromise, params.locale);
}

export default async function ProductPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  const productData = await getProductDataCached(params.id);
  // Page content implementation
}

3. SEO Optimization Key Points

3.1 Metadata Structuring

When structuring metadata, consider:

Title Optimization
- Order information by importance
- Use pipes (|) for proper separation
- Include site name for brand recognition
Description Structuring
- Clear information segmentation
- Include only necessary information
- Match search intent
Keyword Optimization
- Combine dynamic and static keywords
- Consider search patterns
- Natural keyword placement

3.2 Multilingual Considerations

URL Structure Design
- Include language codes
- Set proper canonical URLs
- Configure x-default
Content Optimization
- Language-appropriate descriptions
- Cultural considerations
- Proper keyword translation

3.3 OpenGraph Configuration

For OpenGraph settings:

Basic Configuration
- Choose appropriate type settings
- Maintain siteName and title consistency
- Optimize descriptions
Image Handling
- Set appropriate sizes and ratios
- Configure alt attributes
- Handle missing images gracefully

4. Performance Optimization

4.1 Data Fetching Optimization

Utilizing Cache

   const getProductDataCached = cache(async (id: string) => {
     // Data fetching logic
   });

Prevent duplicate requests
Improve response time
Ensure consistent data

Error Handling
- Display 404 pages appropriately
- Maintain user experience
- Ensure crawlability

4.2 Rendering Optimization

Separate Metadata Generation
- Clear logic separation
- Improve reusability
- Enhance maintainability
Optimize Async Processing
- Parallel processing for speed
- Efficient resource usage

Summary

We've covered key implementation points for SEO and internationalization in Next.js App Router:

Dynamic metadata generation implementation
Multilingual support considerations and optimization
SEO best practices
Performance optimization techniques

These implementations enable building SEO-optimized multilingual web applications effectively.

References

Implementing Multilingual Sitemap with next-intl in Next.js App Router

Oikon — Thu, 30 Jan 2025 12:49:06 +0000

Introduction

This article describes the journey of implementing a multilingual sitemap in a Next.js App Router project. Initially attempting to use next-sitemap, we ultimately switched to the App Router's built-in sitemap generation functionality. Here's what we learned along the way.

Development Environment

- Next.js 14.x (App Router)
- TypeScript 5.x
- next-intl 3.x
- next-sitemap 4.x

Requirements

Sitemap generation supporting multiple languages (/en, /ja, etc.)
Proper alternate links configuration for each language
SEO-compliant XML format
Appropriate priority and update frequency settings for pages

Initial Implementation with next-sitemap and Its Challenges

Initial Setup

// next-sitemap.config.js
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  exclude: ['/_not-found', '/404', '/500'],
  generateIndexSitemap: false,

  transform: async (config, path) => {
    return {
      loc: path,
      changefreq: 'daily',
      priority: 0.7,
      lastmod: new Date().toISOString(),
    }
  }
}

Technical Issues Encountered

Alternate Links Generation Error

The issue where /en/about incorrectly follows /ja/about:

<!-- Incorrect generation example -->
<url>
  <loc>https://example.com/en/about</loc>
  <xhtml:link rel="alternate" hreflang="ja" 
    href="https://example.com/ja/about/en/about"/>
</url>

Sitemap Index Structure Issues

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!-- Empty index generation -->
</sitemapindex>

Troubleshooting Process

During npm run build, we can observe static (SSG) and dynamic page generation:

Route (app)
┌ ○ /_not-found 
├ ● /[locale]   
├   ├ /en
├   └ /ja
├ ● /[locale]/about   
├   ├ /en/about
├   └ /ja/about
├ ƒ /[locale]/blog/[id]
├ ● /[locale]/contact
├   ├ /en/contact
├   └ /ja/contact
└ ● /[locale]/products
    ├ /en/products
    └ /ja/products

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
ƒ  (Dynamic)  server-rendered on demand

Attempted Solutions

Transform Approach

// next-sitemap.config.js
module.exports = {
  transform: async (config, path) => {
    const parts = path.split('/').filter(Boolean);
    const locale = parts[0];

    if (!['en', 'ja'].includes(locale)) {
      return null;
    }

    return {
      loc: `${config.siteUrl}${path}`,
      changefreq: 'weekly',
      priority: 0.7,
      alternateRefs: [{
        href: `${config.siteUrl}/${locale === 'en' ? 'ja' : 'en'}${path}`,
        hreflang: locale === 'en' ? 'ja' : 'en'
      }]
    }
  }
}

This approach failed to resolve the issue of redundant paths in alternateRefs URLs.

Additional Paths Approach

module.exports = {
  additionalPaths: async (config) => {
    const urls = [];
    const locales = ['en', 'ja'];
    const routes = [
      { path: '', priority: 1.0 },
      { path: '/about', priority: 0.8 },
      { path: '/contact', priority: 0.8 },
      { path: '/products', priority: 0.8 }
    ];

    locales.forEach(locale => {
      routes.forEach(({ path, priority }) => {
        urls.push({
          loc: `/${locale}${path}`,
          changefreq: 'weekly',
          priority,
          alternateRefs: [/* ... */]
        });
      });
    });
    return urls;
  }
}

This approach required manual URL management, leading to maintenance issues.

Solution Using App Router's Built-in Functionality

Inspired by next-intl's example implementation:

// app/sitemap.ts
import { MetadataRoute } from 'next'
import { routing } from "@/i18n/routing";

const host = process.env.NEXT_PUBLIC_HOST || "http://localhost:3000";

export default function sitemap(): MetadataRoute.Sitemap {
    const baseUrl = 'https://example.com'

    const routes = [
        { path: '', priority: 1.0 },
        { path: '/about', priority: 0.8 },
        { path: '/contact', priority: 0.8 },
        { path: '/products', priority: 0.8 }
    ]

    return routes.flatMap((route) =>
        routing.locales.map((locale) => ({
            url: `${host}/${locale}${route === "/" ? "" : route}`,
            alternates: {
                languages: Object.fromEntries(
                    routing.locales.map((altLocale) => [altLocale, `${host}/${altLocale}${route === "/" ? "" : route}`])
                ),
            },
        }))
    );
}

Place this in src/app/sitemap.ts, and Next.js will automatically generate the sitemap.xml. You can verify the generated sitemap by accessing localhost:3000/sitemap.xml in development.

Comparison of Implementation Approaches

next-sitemap

Advantages:

Automatic robots.txt generation
Rich configuration options
Sitemap index generation

Disadvantages:

Complex configuration for multilingual support
Compatibility issues with App Router
Difficult debugging process

App Router Built-in Functionality

Advantages:

Full TypeScript support
Easy integration with App Router
Simple implementation structure
Straightforward debugging

Disadvantages:

Requires separate robots.txt implementation
Limited configuration options
Lacks sitemap index functionality

Implementation Decision Criteria

Choose next-sitemap when:

Using Pages Router
Complex sitemap requirements
Single language site

Choose App Router Built-in when:

Using App Router
Multilingual site requirements
TypeScript-focused development

Conclusion

For multilingual sitemap implementation in Next.js App Router, the built-in functionality proves to be the optimal solution. The TypeScript support and implementation simplicity significantly enhance development efficiency. For SEO requirements in multilingual sites, the App Router's built-in functionality is recommended.

DEV Community: Oikon

Run `gh` Command in Claude Code on the Web

oikon48 / gh-setup-hooks

Enable `gh` command in Claude Code on the Web environment, just adding SessionStartHooks

gh-setup-hooks

Setup

1. Add hook to settings.json

2. Set up Claude Code on the Web

How

TL;DR

Quick Start

1. Custom Environment Configuration

2. Hooks Configuration

What is Claude Code on the Web?

Claude Code on the Webの仕様を徹底解剖

The Removal of gh Command Restrictions

How the Setup Works

How It Works

About the Environment Variables

Conclusion

References

GitHub

oikon48 / gh-setup-hooks

Enable `gh` command in Claude Code on the Web environment, just adding SessionStartHooks

gh-setup-hooks

Setup

1. Add hook to settings.json

2. Set up Claude Code on the Web

How

Documentation

Related Articles

Reflections of Claude Code from CHANGELOG

TL;DR

The Shock of First Contact

Before Claude Code

Meeting Claude Code

The Official Launch

Tracking the CHANGELOG

anthropics / claude-code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

Claude Code

Get started

Plugins

Claude Code v1.0.x Era

CLAUDE.md (Memory Files)

Plan Mode

Subagents

/context

Claude Code v2.0.x Era

Opus 4.5

Claude Skills (Agent Skills)

Interactive Question Tool

Plugin Marketplace

oikon48 / cc-frontend-skills

Claude Code plugin for creating frontend UIs that avoid generic AI aesthetics. (Claude Skills is written in Japanese)

Frontend Skills Plugin

Features

Demo

Installation

Usage

What Makes Claude Code Excellent

The CLI Tool Approach

The Claude Code Harness

Current Challenges

Context Window Size

Compaction Quality

Knowledge Cutoff

Should You Use Third-Party Tools?

The Future of Claude Code

Evolution Trajectories

Long-Running Tasks

Swarming (Orchestrated Execution)

External Tool Integration

The Value of Following Claude Code

Conclusion

References

GitHub

anthropics / claude-code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

Claude Code

The Removal of `gh` Command Restrictions