フロントエンド & UI
pick-ui-library
フロントエンドのタスクに、厳選された 1 つの主張あるライブラリを対応づける。
概要
明示的に呼び出して使う参照スキル。プリミティブ、モーション、チャート、仮想化、状態管理、スタイリングをカバーする厳選テーブルから、指定したタスクに 1 つの推奨ライブラリを対応づける。
Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly i
デザインにとっての意味
- タスクごとに推奨は 1 つだけなので、選択肢の一覧で悩む必要がない。
- まず package.json を確認するので、プロジェクトが既に持つものを再利用する。
- 手作りのドロップダウンやトーストを見つけ、アクセシブルなプリミティブに置き換える。
カバーする内容
- How to use this
- UI components and primitives
- Motion and visuals
- Charts
- State and styling
- Common mismatches to catch
インストール方法
pick-ui-library
-
リポジトリをクローンする。
git clone https://github.com/emilkowalski/skills -
スキルファイルの場所を Codex に指定する。
skills/pick-ui-library/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
明示的に呼び出す。自動では起動しない。
-
ライブラリ名ではなくタスクを伝える。たとえば「トーストが欲しい」のように。
-
ライブラリを 1 つ挙げ、使い方を説明し、そのまま組み込む。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。