DEV Community: Willie

Claude Code, Codex, Pi: Stop Rebuilding Your AI Coding Setup

Willie — Thu, 22 Oct 2026 16:02:47 +0000

Say your team uses Claude Code, Codex, and Pi. Someone catches an authorization bug and adds a useful rule to their review skill: check the denied request as well as the allowed one.

Where does that rule go next?

If it stays in one person's home directory, the next teammate's AI reviewer never gets it. Copy it into three tool folders and you now have three files to keep up to date.

I prefer keeping the checklist beside the code, where a pull request can change it. Each developer can use their preferred AI tool.

I maintain skillshare, the open-source tool used below. It manages skills, MCP connections, plugins, and hooks across supported tools. Start with one local review skill, then bring in the rest of your setup as needed.

A 20-second look

Watch the original demo (MP4). The original animation includes Cursor; this walkthrough uses Pi alongside Claude Code and Codex.

Start with one useful review task

For this example, the task is reviewing authorization and public API changes. A skill is a directory containing a SKILL.md file with a name, a description of when to use it, and the instructions.

Keep the first version short. A checklist with four rules your team agrees on is easier to review than a large prompt collection nobody has read.

On macOS or Linux, install the CLI with Homebrew:

brew install skillshare

Other installation options, including Windows, are in the installation instructions.

From the root of a project that doesn't already have a skillshare config:

skillshare init -p --targets claude,codex,pi
skillshare new team-review -p --pattern none

Choose the targets your team actually uses. -p keeps this setup scoped to the project. --pattern none creates the plain template.

Replace .skillshare/skills/team-review/SKILL.md with:

---
name: team-review
description: "Review a pull request for regressions in authorization and public API behavior. Use when asked for a team code review."
---

# Team review

Read the diff and the relevant callers before reporting findings.

- For authorization changes, check both allowed and denied requests.
- For public API changes, compare request and response shapes with existing consumers.
- Report only reachable bugs. Include the file, line, and an example that triggers each one.
- State which checks you ran and which behavior remains unverified.

Keep the review read-only. Propose fixes without changing files.

The description gives the tool a reason to load the skill. The body tells it what to do once loaded. Replace the rules with checks that matter to your codebase.

Inspect it, then sync it

Run these in order, stopping if a step fails:

skillshare audit -p
skillshare sync -p --dry-run
skillshare sync -p
skillshare status -p

The audit scans the skill for suspicious content. Read the instructions yourself too, especially when you start installing third-party skills; a clean scan isn't a guarantee of safety.

The dry run previews the sync. With the default merge mode on macOS and Linux, the real sync creates per-skill symlinks into the configured target directories. The checklist stays in .skillshare/skills/team-review/.

For this setup, the target directories are .claude/skills for Claude Code, .agents/skills for Codex, and .pi/skills for Pi. Each team-review link points back to the same project skill.

Copy mode is available for environments that need regular files; run sync again after edits when using it.

Review checklist changes in the same PR

Suppose a bug fix reveals a missing check. Add that check to team-review/SKILL.md in the same pull request as the fix. A reviewer can ask whether the new instruction would actually have caught the bug.

Commit the project config, the local skill, and the generated .skillshare/.gitignore using your normal Git workflow. Keep generated target links out of version control. If you later add remote skills, include their lockfile as well. The project setup guide covers what belongs in Git.

After a teammate clones or pulls the project, this local-only example needs:

skillshare audit -p && skillshare sync -p

Once the project declares remote skills, install those before auditing and syncing:

skillshare install -p && skillshare audit -p && skillshare sync -p

Git carries the local checklist and configuration. The sync step makes them available to the configured tools on that machine.

Bring MCP, plugins, and hooks along too

The review checklist is only part of a working setup. Changing tools can also mean re-entering MCP connections, finding the right plugin package, and rebuilding hooks. Skillshare manages these resources alongside skills, with separate previews for what each tool receives.

MCP: define a connection once

Keep a server's command or URL in one definition, choose its receiving tools, and let skillshare write their native configuration formats. The MCP setup guide covers adding a connection and importing one you already use.

Claude Code, Codex, and Pi are supported. Pi uses its built-in MCP support and needs Pi 0.99.0 or later. Keep credentials out of the project repository and use environment references where appropriate. Login, OAuth, and tool approvals still happen in the receiving agent.

Plugins: keep the package together

A plugin can bundle skills, MCP connections, hooks, and supporting files. Use the plugin manager to discover a source, select compatible tools, and review the installation. Pi packages are supported too.

Choose a package built for the target tool. Skillshare doesn't turn a Claude plugin into a Pi extension. Project plugin management is supported for Claude Code and Pi; Codex plugin management uses global scope. Native project trust still applies.

Hooks: keep the tool's own behavior

Hooks can run a project check at an agent event or load a native extension. Skillshare keeps named hook definitions, previews their destinations, and writes the relevant configuration or files.

Event names and payloads remain tool-specific. For Pi, supply extension code that matches your installed Pi version; skillshare writes the extension file without translating another agent's hook runtime. Review and test that code in Pi before relying on it.

After configuring these resources, preview them separately:

skillshare sync mcp -p --dry-run
skillshare sync hooks -p --dry-run
skillshare sync plugins -p --dry-run

For the configured project resources, skillshare sync --all -p includes skills, agents, extras, MCP, and hooks. Plugins are a separate operation: skillshare sync plugins -p. Review the preview and respect the supported scope before applying either.

Check the reviewer against a known bug

Open a configured tool and ask:

Use the team-review skill to review this diff. Keep it read-only and show a concrete input for each finding.

Try it against a past authorization bug whose cause you know. Check whether the tool finds the missed denied-request case, cites the right code, and distinguishes executed tests from assumptions. Verify that the skill is available in each tool you use; restart the tool if needed after syncing.

Sharing the instructions doesn't make different models produce identical reviews. It gives your team one checklist to inspect and improve when a review misses something.

skillshare is on GitHub. If you try this, I'd like to hear which project rule you put in your first shared skill. A star helps other developers find the project if it earns a place in your workflow.

I built figlens so cloud coding agents can read Figma files offline

Willie — Thu, 22 Oct 2026 15:42:42 +0000

A cloud coding agent can have your source code and still be missing the design. I built figlens around a file-based handoff: save a local .fig copy in Figma, then let the agent read it wherever it runs.

The machine reading the design needs no Figma installation, login or API key. Designers can keep working in Figma.

A real build, with a live preview

This is a real Pi session in Orca, shown at 8x speed. Pi reads the local design bundle, writes HTML/CSS, and checks the result in a browser. The finished page uses 19 SVG icons from the bundle and includes a local Share dialog and composer.

The design is the “List views” frame from MCP Apps for Claude (Community). System sans and Georgia replace the unavailable Anthropic fonts. Replies in the demo stay in the page and reset on reload.

Watch the 45-second video. The capture uses actual window snapshots, so motion is less smooth than a native recording.

Try it with your own design

Save your design with File > Save local copy in Figma. With Node.js 18+ installed, list its frames:

npx @runkids/figlens tree design.fig --depth 2

Choose a frame ID from that output, then create a bundle. Replace 12:345 below with your frame ID:

npx @runkids/figlens bundle design.fig 12:345 frame.zip

The npm launcher downloads and caches a native binary on its first run. You can also install a native release directly; users need neither Rust nor Docker.

Give your coding agent frame.zip and a prompt like this:

Extract frame.zip into its own directory and read context.md. Build this screen using this project’s stack and conventions. Use the supplied layout values and assets, then compare your result with references/screen.png.

The bundle contains layout and text data, bound variables, image and SVG assets, a reference render, and a list of any missing assets. That gives the agent concrete values to build from. Font files are not included.

For agents that support skills:

npx skills add runkids/figlens --skill figlens

There is also a local stdio MCP server. The README has native and npx configuration examples.

What “offline” covers

figlens reads the saved design locally without calling the Figma API. Your AI provider, initial binary download, and project dependencies may still need a network connection. A Figma URL alone does not supply the design: you need the saved .fig file, and a new copy when it changes.

One measured example

For this 57.5 MiB file, extracting the selected frame’s bundle took 0.47 seconds median over five warm runs. The frame had 153 nodes and produced 25 SVG assets with no missing assets.

That timing measures figlens bundle only. It excludes the AI’s implementation time. It was recorded with figlens 0.1.2 in an ARM64 Docker container using a prebuilt release binary. Individual runs, environment and reproduction commands are in the repository.

The .fig format is undocumented, and rendering has known gaps. I would like feedback from people using coding agents in headless or cloud environments: does a local design bundle fit your handoff, and what information would your agent still need?

Source and installation: https://github.com/runkids/figlens

How to Sync AI Skills Across Claude Code, OpenClaw, and Codex in 2 Minutes

Willie — Mon, 09 Feb 2026 21:17:38 +0000

You use Claude Code at work, Openclaw for side projects, and Codex for quick scripts.

You have 20+ skills. They need to exist in all three tools.

Here's how to set that up in under 2 minutes — and never manually copy a skill again.

The Problem

Every AI CLI stores skills in a different directory:

~/.claude/skills/          # Claude Code
~/.codex/skills/           # Codex CLI
~/.opencode/skills/        # OpenCode

When you install a skill, you pick which tools get it. When you edit a skill in one tool, the others don't know. When you remove a skill from one tool, you might break the others.

The root cause: there's no single source of truth. Skills are scattered.

The Fix: One Source, Symlinks Everywhere

skillshare keeps all your skills in one directory and creates symlinks to each AI CLI.

~/.config/skillshare/skills/     ← single source
  ├── code-review/
  ├── react-guidelines/
  └── _team-repo/
        ├── frontend/
        └── testing/

~/.claude/skills/code-review → symlink to source
~/.codex/skills/code-review  → symlink to source

Edit the source, every tool sees the change instantly.

Step-by-Step Setup

1. Install

# macOS / Linux
curl -fsSL https://raw.githubusercontent.com/runkids/skillshare/main/install.sh | sh

# Homebrew
brew install runkids/tap/skillshare

# Windows PowerShell
irm https://raw.githubusercontent.com/runkids/skillshare/main/install.ps1 | iex

2. Initialize

skillshare init

This does three things:

Creates ~/.config/skillshare/skills/ (your source directory)
Detects which AI CLIs you have installed
Generates config.yaml with your targets

Output looks like:

✓ Created source directory
✓ Detected targets:
    claude  → ~/.claude
    codex   → ~/.codex/skills
✓ Config saved to ~/.config/skillshare/config.yaml

3. Import existing skills

Already have skills scattered across your AI CLIs? Collect them:

skillshare collect --all

This copies every skill from every detected target into the source directory. Duplicates are flagged so you can choose which to keep.

4. Sync

skillshare sync

Done. Every target now has symlinks pointing to your source directory.

Synced 3 targets:
  claude   → 15 linked, 0 skipped, 0 removed
  codex    → 15 linked, 0 skipped, 0 removed

From now on, this is the only command you need. Made changes to your skills? skillshare sync.

Day-to-Day Workflows

Install a skill from GitHub

skillshare install anthropics/skills/skills/pdf
skillshare sync

The skill is downloaded to your source directory, then synced to all targets.

Install a full team/org skill repo

skillshare install github.com/your-org/team-skills --track
skillshare sync

The --track flag preserves .git, so you can update later:

skillshare update _team-skills   # git pull
skillshare sync                  # push changes to all targets

Create a new skill

skillshare new my-custom-skill

Creates a SKILL.md template in your source directory. Edit it, sync, and every AI CLI has it.

Scan for security threats

Before syncing third-party skills to your AI agents, scan them:

skillshare audit

This checks every installed skill for prompt injection, data exfiltration, destructive commands, and other threats. Critical findings block installation by default — no malicious skill reaches your AI agent without you explicitly approving it.

Skills are also scanned automatically during skillshare install.

Pull back edits from a specific tool

You tweaked a skill in codex's UI. Pull the change back to source:

skillshare collect codex
skillshare sync             # propagate to other targets

Check status

skillshare status

Shows which targets are in sync, which have drifted, and which skills are unlinked.

Preview before syncing

skillshare diff

Shows exactly what sync will do — which symlinks will be created, updated, or removed.

Cross-Machine Sync

If your source directory is a git repo:

# Machine A
skillshare push

# Machine B
skillshare pull
skillshare sync

Or just version-control ~/.config/skillshare/ as part of your dotfiles.

Project-Scoped Skills

For skills that should live inside a specific repo:

cd your-project
skillshare init -p                              # Creates .skillshare/
skillshare install org/skills/skills/react -p   # Install to project
skillshare sync                                 # Sync to targets

Commit .skillshare/ to git. Teammates clone the repo and run skillshare sync — everyone gets the same skills, in every AI tool.

Web Dashboard

skillshare ui

Opens a web dashboard at http://localhost:19420 for visual skill management — browsing, installing, syncing, and searching skills without the terminal.

The Config File

Everything is controlled by ~/.config/skillshare/config.yaml:

source: /Users/you/.config/skillshare/skills
sync_mode: merge    # merge (per-skill symlinks) or symlink (whole directory)
targets:
  claude:
    path: /Users/you/.claude
  codex:
    path: /Users/you/.codex/skills

Want to add a new AI CLI? Add a target. Want to remove one? Delete the entry. Then sync.

Quick Reference

Command	What it does
`skillshare init`	Create config + detect targets
`skillshare sync`	Sync source → all targets
`skillshare install <source>`	Install skill from GitHub/local path
`skillshare collect [target]`	Import skills from target(s) to source
`skillshare list`	List skills in source
`skillshare status`	Show sync status
`skillshare diff`	Preview what sync will change
`skillshare search <query>`	Search skills on GitHub
`skillshare audit [name]`	Scan skills for security threats
`skillshare new <name>`	Create a new skill template
`skillshare update --all`	Update all tracked repos
`skillshare push` / `pull`	Cross-machine git sync
`skillshare ui`	Open web dashboard

Migration from Other Tools

If you're already using npx skills or manual management:

skillshare init          # detect your AI CLIs
skillshare collect --all # import everything
skillshare sync          # symlink to all targets

Full migration guide: skillshare.runkids.cc/docs/guides/migration

Architectural comparison: skillshare.runkids.cc/docs/guides/comparison

skillshare is open source (MIT), written in Go, and supports 40+ AI CLI targets.

GitHub: github.com/runkids/skillshare
Docs: skillshare.runkids.cc

If you found this useful, a ⭐ on GitHub would help others find it too.