chore(spindle-ui,spindle-mcp-server): テンプレート形式の Code Connect に移行

[herablog]

概要

Figma が framework-specific parser を廃止したため、Code Connect を parser 方式（.figma.tsx）からテンプレートファイル方式（.figma.ts）に移行しました。

これは将来対応ではなく、既に発生している破損の修復を兼ねています。

事実	根拠
parser のサポート終了 = 2026-08-17	Figma 公式アナウンス
@figma/code-connect@2.0.0 公開 = 2026-08-18	npm registry
v2.0.0 の publish は config に parser があると即エラー終了	CLI 実装の parserMode === 'forbid' ガード
CI は npm i -g @figma/code-connect（= latest = 2.0.0）を使用	figma-code-connect.yml

つまり .figma.tsx を触る次の main への push で、Publish Figma Code Connect ワークフローが失敗する状態でした。v2.0.0 は以下のエラーを出します。

Framework-specific parsers are no longer supported in Code Connect CLI v2.
Run `figma connect migrate` to convert parser-based Code Connect to template files

変更内容

figma connect migrate で機械移行したうえで、後述の要修正点を手で直しています。

コンポーネント（12ファイル → 10テンプレート）

同一の Figma ノードを variant で共有しているものは、v2 の仕様上1ファイルに統合されます（1ノード + 1ラベル = 1 doc で、variant の出し分けはテンプレート内の分岐でしか表現できないため）。

• NavigationTab: CapsuleTab / InlineTab / UnderlineTab が1ファイルに統合。3タブ共通ファイルとして親ディレクトリに NavigationTab.figma.ts を配置し、各タブの実装ファイル冒頭から参照コメントで辿れるようにしました
• SnackBar: 自動生成されるフォールバック分岐が Error になっていたため、Information を else に置き直しました（NavigationTab 側のフォールバックは CapsuleTab のまま）

アイコン（380件 → バッチ形式）

icons.figma.tsx 2499行を、共有テンプレート9行 + icons.figma.batch.json に縮約しました。CLI が差分を ${figma.batch.componentName} に畳み込んでいます。

scripts/figma-connect-icons.ts は .figma.batch.json の components のみを生成するよう変更したので、今後アイコンを追加しても差分は JSON の数行だけになります。

設定・CI

• figma.config.json から parser を削除し、label / language を明示。テンプレートファイルの既定ラベルは "Code" なので、明示しないと Dev Mode 上で別セクション扱いになり既存の React ドキュメントが残留します
• tsconfig.json の exclude に .figma.ts / .figma.batch.ts を追加。追加しないと include: ["src"] に一致して tsc がテンプレートをコンパイルしビルドが壊れます
• biome は formatter を有効のまま linter のみ無効化
• CI から npm i -g を廃止し、devDependency + pnpm exec に統一。floating な global install が勝手に v2 に上がったことが今回の破損の直接原因なので、バージョンを lockfile で固定します
• --exit-on-unreadable-files を追加。テンプレート方式ではパース失敗が「ログを出して次のファイルへ」となり、CI が緑のままそのコンポーネントだけ Dev Mode から消えるため。特にバッチファイルは1ファイルで380件を抱えています

spindle-mcp-server

.figma.tsx → .figma.ts のリネームに追従しました。copy-assets.js のコピー対象が *.{tsx,css,mdx,md} だけでテンプレートが assets に入っていなかったため、専用タスクも追加しています。3タブは自ディレクトリにテンプレートを持たないので、親ディレクトリの共有テンプレートにフォールバックします。

補足: CLI のバージョンは 1.4.9 のまま

一度 1.5.3 に上げましたが、1.4.9 の時点で既にテンプレートファイルと .figma.batch.json の両方をサポートしており、移行後の構成では結果が完全に同一だったため据え置きました。CI で使う --exit-on-unreadable-files も 1.4.9 に存在します。

結果として package.json / pnpm-lock.yaml はこの PR で一切変更していません。2.0.0 への更新は quarantine（minimumReleaseAge: 4320、解禁は 2026-08-21 23:05 JST）経過後に Renovate に任せられます。

検証

移行前後で figma connect parse の結果を突き合わせています。

• doc 数 394 → 390（SnackBar 3→1、NavigationTab 3→1）
• 対象 Figma ノードの欠落・追加ともにゼロ（390 → 390）
• 全390件が label=React / language=jsx
• アイコン380件すべて、移行前と import 文字列が完全一致（CLI が生成する import は from "..." になり Dev Mode の表示が変わってしまうため、from '...'; に直しています）
• biome 整形の前後で figma.code テンプレートリテラルの内容がバイト一致（整形がスニペットを壊していないことの確認）
• figma connect parse --exit-on-unreadable-files が exit 0 で完走
• tsc -p tsconfig.cjs.json --listFiles に .figma.* が0件

未確認の点

• figma connect preview / publish --dry-run は未実行です（FIGMA_ACCESS_TOKEN が必要なため）。マージ前に SnackBar と NavigationTab の分岐を figma connect preview --unique で目視確認いただけると安心です
• 旧 doc が Dev Mode に残った場合は figma connect unpublish --node <url> --label React で個別に削除できます

🤖 Generated with Claude Code

https://claude.ai/code/session_01JMEHqqeA4E13MMxhFQEceC

---

Generated by Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: b49188d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@openameba/spindle-mcp-server	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Visit the preview URL for this PR (updated for commit b49188d):

https://ameba-spindle--pr2192-claude-code-connect-d6bp3qzi.web.app

_{(expires Wed, 23 Sep 2026 01:18:35 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e7521619a2dd5c653490c8246e81ec2a5c8f1435}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 36a38f0e46

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[reg-suit]

reg-suit detected visual differences.

Check this report, and review them.

🔴 Changed	🔵 Passing
3	263

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.