typeset

概要

typesetとは？

typesetはデジタルプロダクトのタイポグラフィを体系的に改善するUIデザインスキルです。フォント選択の見直し、明確な階層構造の確立、サイズやウェイトの最適化、読みやすさの向上に注力し、意図的で洗練されたテキスト表現を目指します。一般的で無個性なタイプから脱却したい方に最適です。

誰がtypesetを使うべき？

フォントや読みやすさ、テキストの階層構造に課題を感じているデザイナーや開発者、UI制作に携わるすべての方におすすめです。タイポグラフィが不統一で粗雑に見える場合に特に効果を発揮します。

typesetが解決する課題

• 一般的・デフォルトのフォント使用
• 不明瞭なテキスト階層と構造
• サイズやウェイトの不整合
• 読みやすさの問題
• ブランドらしさの欠如したフォント選択

使い方

インストール手順

typesetを導入するには、以下のコマンドを実行してください。

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

これでエージェントやプロジェクト環境にスキルが追加されます。

はじめに

1. まずSKILL.mdファイルを確認し、ワークフローや要件を把握します。
2. 必須の準備ステップとして、/frontend-designを実行しデザインのコンテキストと原則を収集します。コンテキストがない場合は、先に/teach-impeccableを実行してください。
3. 提供されたチェックリストを使い、現在のタイポグラフィを評価します：
   • ブランドに合ったフォント選択か、見えないデフォルトを避けているか
   • 階層構造：見出し、本文、キャプションが視覚的に区別されているか
   • サイズとスケールの一貫性と読みやすさ
   • ウェイトのコントラストと間隔の分析
4. 評価結果をもとに、デザイン原則やアンチパターンを参照しながら改善計画を立てます。
5. ワークフローをリポジトリやツールに合わせて調整しつつ、体系的に変更を適用します。

プレビュー推奨ファイル

• SKILL.md：メインのスキルドキュメントとワークフロー

よくある質問

typesetはすべてのUIプロジェクトに適していますか？

typesetはタイポグラフィの改善が必要、または無個性に感じるプロジェクトに最適です。すでに意図的で洗練されたタイプがある場合は必須ではありません。

typesetを使う前にどんな準備が必要ですか？

/frontend-designを実行してデザインのコンテキストを収集してください。コンテキストがない場合は、/teach-impeccableで基礎的なデザイン原則を確立します。

typesetはアクセシビリティにも役立ちますか？

typesetは視覚的な階層と読みやすさに注力しており、これらの改善はテキストのスキャン性や読みやすさを高めることでアクセシビリティの向上にもつながります。

補助スクリプトや参考資料はどこで見つけられますか？

リポジトリのFilesタブを開くと、ネストされた参照やヘルパースクリプト、追加リソースを確認できます。