Agent Skill に wa-prose と wa-flex-wrap を追加
Web Awesome のエージェントスキル自動生成に wa-prose と wa-flex-wrap が含まれなかった問題を解消し、エージェントがこれらのユーティリティを認識できるようにしました。
背景
自動生成されるエージェントスキルは、Web Awesome の CSS ユーティリティを参照リストとして提供しますが、wa-prose と wa-flex-wrap のエントリが抜けていました。その結果、エージェントはこれらのユーティリティを検索対象にできず、開発者がドキュメントを手動で参照する必要がありました。
両ユーティリティはそれぞれ独自のドキュメントページを持ち、公式に提供されているにも関わらず、生成ロジックに組み込まれていなかったことが根本原因です。エージェントが完全なユーティリティ一覧を提供できるようにするため、スキル生成フローへの組み込みが求められました。
この課題への対策として、メタ情報の更新とユーティリティ列挙ロジックへの追加入力が実装されました。
技術的な変更
エージェントスキル生成スクリプト packages/webawesome/scripts/agent-skill.js に複数の追記が行われ、wa-prose と wa-flex-wrap が正式にスキルに含まれるようになりました。
description フィールドに wa-prose が追加され、スキルの概要テキストが最新ユーティリティを反映するよう変更されました。
@@ -601,7 +601,7 @@ ${renderComponentList(proByCategory[category], true)}`,
return `---
name: webawesome
- description: Web Awesome is a UI component library built with web components. Use when building buttons, inputs, selects, checkboxes, dialogs, modals, drawers, tabs, dropdowns, tooltips, carousels, forms, or using CSS utilities like wa-stack, wa-cluster, wa-grid.
+ description: Web Awesome is a UI component library built with web components. Use when building buttons, inputs, selects, checkboxes, dialogs, modals, drawers, tabs, dropdowns, tooltips, carousels, forms, or using CSS utilities like wa-stack, wa-cluster, wa-grid, wa-prose.
license: MIT / Commercial (for Web Awesome Pro)
ユーティリティ一覧の Markdown に Prose バレットが追加され、wa-prose の用途が明示されました。また、参照リンク一覧に Prose のドキュメントパスが加えられ、エージェントが正しい URL を返すようになりました。
@@ -851,11 +851,12 @@ Web Awesome provides CSS utilities for common styling tasks:
- **Text**: Typography utilities
- **Color**: Color variant utilities
- **Rounding**: `wa-border-radius-*` utilities
+ - **Prose**: `wa-prose` for long-form typographic rhythm (articles, docs, marketing copy)
- **Accessibility**: `wa-visually-hidden` utilities
- **FOUCE Prevention**: `wa-cloak` utility
- **Native Styles**: Enhanced styling for native HTML elements
@@ -851,11 +851,12 @@ See [Layout Utilities](references/utilities/layout.md), [Rounding](references/utilities/rounding.md), [Visually Hidden](references/utilities/visually-hidden.md), [FOUCE](references/utilities/fouce.md), and [Native Styles](references/utilities/native.md).
+ See [Layout Utilities](references/utilities/layout.md), [Prose](references/utilities/prose.md), [Rounding](references/utilities/rounding.md), [Visually Hidden](references/utilities/visually-hidden.md), [FOUCE](references/utilities/fouce.md), and [Native Styles](references/utilities/native.md).
レイアウト系ユーティリティを列挙する配列 layoutNames に flex-wrap が追加され、wa-flex-wrap がレイアウトユーティリティとして自動生成対象に含まれるようになりました。
- const layoutNames = ['stack', 'cluster', 'grid', 'split', 'flank', 'frame', 'gap', 'align-items', 'justify-content'];
+ const layoutNames = [
+ 'stack',
+ 'cluster',
+ 'grid',
+ 'split',
+ 'flank',
+ 'frame',
+ 'gap',
+ 'align-items',
+ 'justify-content',
+ 'flex-wrap',
+ ];
さらに、wa-prose の HTML ドキュメントを Markdown に変換しユーティリティディレクトリへコピーする処理が追加されました。copyAndProcessDoc の呼び出しが新規挿入され、docs/utilities/prose/index.html が prose.md に変換されます。
+ copyAndProcessDoc(siteDir, docsDir, utilitiesDir, 'docs/utilities/prose/index.html', 'prose.md', baseUrl, {
+ docPath: 'docs/utilities/prose',
+ mdPath: 'docs/utilities/prose.md',
+ });
これらの変更は、既存ロジックに最小限の差分で追記する形で実装されており、他のユーティリティや既存機能への影響はありません。
設計判断
既存のメタ情報や配列に要素を追加する 方針が採用されました。description や layoutNames への追加入力は、構造を変えずに新ユーティリティを組み込む最もシンプルな手段であり、後方互換性を維持できます。
新しい設定キーやデータ構造を導入せず、wa-prose と wa-flex-wrap を既存フローに統合したことで、エージェント側の設定変更が不要になり、リリースリスクが低減しました。さらに、copyAndProcessDoc の追加は他ユーティリティと同様のパターンで実装されているため、将来的なユーティリティ追加も同様の手順で拡張可能です。
この設計は「最小変更で機能追加」を重視し、コード可読性と保守性を高めることに成功しています。
まとめ
本 PR により wa-prose と wa-flex-wrap が Web Awesome エージェントスキルに正式に組み込まれ、エージェントはこれらのユーティリティを自動的に参照できるようになりました。メタ情報の更新、ユーティリティ列挙配列への追加入力、ドキュメントコピー処理の追加という三点で実装され、既存フローを壊すことなく機能が拡張されています。