typeset

概要

typesetとは？

typesetはデジタルインターフェースのタイポグラフィを向上させるUIデザインスキルです。フォント選択、テキストの階層、サイズ、ウェイト、読みやすさを体系的に改善し、テキストが意図的で視覚的に魅力的に感じられるようにします。このスキルは、プロジェクトのタイポグラフィが一般的で一貫性がなく、構造が不十分な場合や、ユーザーからより洗練され読みやすいテキストを求められた際に特に役立ちます。

誰がtypesetを使うべきか？

デザイナー、フロントエンド開発者、UIの美観を担当する方に適しています。テキストの明瞭さ、ブランドとの整合性、視覚的階層が重要なウェブアプリ、マーケティングサイト、プロダクトダッシュボードなどのプロジェクトに理想的です。

typesetが解決する課題

• デフォルトや不適切なフォント選択の排除
• 明確なテキスト階層とスケールの確立
• 読みやすさとアクセシビリティの向上
• 一貫性がありブランドに沿ったタイポグラフィシステムの構築

使い方

インストール手順

1. プロジェクトにスキルを追加する:
   以下を実行してください:

   npx skills add https://github.com/pbakaus/impeccable --skill typeset
   

2. メインドキュメントを確認する:
   詳細なワークフローとベストプラクティスについてはSKILL.mdファイルから始めてください。
3. 前提条件を理解する:
   • 基礎的なデザイン原則とコンテキスト収集プロトコルについては$frontend-designを呼び出してください。
   • デザインコンテキストがない場合は、スキルドキュメントの指示に従い$teach-impeccableを実行してください。

ワークフロー概要

• 現在のタイポグラフィを評価する: フォント選択、階層、サイズ、読みやすさの弱点を特定します。
• 改善計画を立てる: 提供されたチェックリストとガイダンスを使って新しいタイポグラフィシステムを定義します。
• 変更を実装する: UI全体でフォント、サイズ、ウェイト、間隔を体系的に更新します。

主要ファイル

• SKILL.md: コアワークフローとステップバイステップのガイド
• README.md、AGENTS.md、metadata.json: 追加のコンテキストと統合ノート
• rules/、resources/、references/フォルダ内の補助資料

よくある質問

いつtypesetを使うべきですか？

UIテキストが一般的で階層が不明瞭、または読みやすさに関してユーザーから不満がある場合に使います。デザイン監査やリブランディング時にも有用です。

typesetにはデザイン経験が必要ですか？

デザイン知識があると役立ちますが、typesetは構造化された手順とチェックリストを提供するため、デザイナーだけでなく開発者にも使いやすいです。

プロジェクトに既存のデザインコンテキストがない場合は？

スキルの指示に従い$teach-impeccableを実行して基盤を作り、その後タイポグラフィの改善を適用してください。

詳細はどこで確認できますか？

エージェントスキルディレクトリのFilesタブを開くと、typesetの参照資料やヘルパースクリプトを含む全ファイルツリーを閲覧できます。