bobbit: Skill for Claude Code

File Explorer Like-for-Like Preview

Create a live preview of the File Explorer panel that is faithful enough for layout and interaction iteration.

Non-negotiables

• Import the exact source: market-packs/file-explorer/src/file-explorer-panel.ts.
• Do not copy panel HTML or CSS by hand.
• Do not define Bobbit theme variables in preview HTML.
• Use preview_open(file=..., assets=["bundle.js"]) so the iframe receives the real theme bridge.
• Keep route/store/session behavior in the harness only; production panel logic stays untouched.
• The default fixture must exercise a selected changed file, expanded folders, Git badges, File/Diff tabs, search, direct paths, filtering, and responsive narrow mode.

Bring up the preview

1. Create a temporary output directory and copy the stable HTML shell:

mkdir -p .bobbit/tmp/file-explorer-preview
cp .claude/skills/file-explorer-preview/index.html .bobbit/tmp/file-explorer-preview/index.html

1. Bundle the harness. It imports the exact panel source and supplies realistic mediated Host API fixtures:

npx esbuild .claude/skills/file-explorer-preview/entry.ts --bundle --format=esm --platform=browser --target=es2022 --outfile=.bobbit/tmp/file-explorer-preview/bundle.js --tsconfig=tsconfig.web.json

1. Open the file-backed preview:

preview_open({
  file: ".bobbit/tmp/file-explorer-preview/index.html",
  assets: ["bundle.js"],
})

Iterate

Edit the real panel source, rebuild only the preview bundle, then refresh the same preview slot:

npx esbuild .claude/skills/file-explorer-preview/entry.ts --bundle --format=esm --platform=browser --target=es2022 --outfile=.bobbit/tmp/file-explorer-preview/bundle.js --tsconfig=tsconfig.web.json

Call preview_open again with the same file and asset. This avoids build:packs, gateway restart, the production dist copy, and the runtime panel-module cache.

Use the harness fixture in entry.ts when a different visual state is needed. Do not add preview-only branches to the production panel.