typeset

概要

typesetとは？

typesetスキルは、フォント選択、テキストの階層構造、サイズ、ウェイト、全体的な読みやすさを体系的に改善し、タイポグラフィを格上げするために設計されています。一般的または一貫性のないテキストを、ブランドに沿った意図的で丁寧に作られたタイポグラフィに変換し、ユーザー体験を向上させます。

誰がtypesetを使うべきか？

typesetは、UIデザイナーやフロントエンド開発者、そしてテキストを洗練されプロフェッショナルに見せたいビジュアルデザイン担当者に最適です。プロジェクトでデフォルトフォントのまま、階層が不明瞭、サイズが不揃いといった問題がある場合、typesetはこれらの課題を解決する体系的なアプローチを提供します。

typesetが解決する問題

• 一般的で味気ないテキストを排除
• 明確な視覚的階層を確立
• 適切なフォントサイズとウェイトを保証
• 読みやすさとブランドの整合性を向上
• UI全体のタイポグラフィの不整合を削減

使い方

インストール手順

1. typesetスキルを追加:
   プロジェクト内で以下のコマンドを実行します：

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

2. 主要ファイルの確認:
   ワークフローの概要はSKILL.mdから始めてください。より詳しい内容はREADME.md、AGENTS.md、metadata.jsonを参照してください。rules/、resources/、references/などの補助フォルダも役立つ情報を含んでいます。

はじめに

• 必須の準備:
  typesetを使う前に、/frontend-designを呼び出してデザインの文脈や既存の原則を把握してください。デザインの文脈がない場合は、まず/teach-impeccableを実行してください。

• 現在のタイポグラフィを評価:
  現在のフォント、階層、サイズ、読みやすさを分析し、見えないデフォルト設定、不明瞭な見出し、不揃いなスケールを特定します。

• 改善の計画と適用:
  SKILL.mdのガイダンスを使って、より良いフォントの選択、階層の明確化、一貫したサイズ設定を行います。推奨事項はプロジェクトのニーズに合わせて調整し、単にコピーしないようにしてください。

typesetを使うタイミング

• フォント、読みやすさ、テキストの階層に関する問題がユーザーから指摘されたとき
• UIテキストが洗練されていない、または一貫性がないと感じるとき
• UIデザインのレビュー時や新製品のリリース前

よくある質問

typesetは具体的に何を変えるの？

typesetはフォント選択、階層、サイズ、読みやすさを監査し改善する手助けをします。コードを自動で変更するわけではなく、手動で改善するための体系的なプロセスとベストプラクティスを提供します。

typesetは新規プロジェクト専用ですか？

いいえ、新規・既存の両方のプロジェクトでタイポグラフィの品質向上に利用できます。

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

リポジトリのFilesタブを開くと、参照資料や補助スクリプトを含むファイルツリー全体を確認できます。メインのワークフローはSKILL.mdから始め、関連ファイルでさらに深い情報を得てください。