maylogger/roc-aesthetic

華國美學 UIUX スキル

roc-aesthetic は、ルーティングとインストールのための内部スキル ID です。

これを、ROC 時代の台湾「華國美學」フロントエンド UIUX の生成、修正、レビュー、スタイル診断のための単一エントリーポイントとして使用します。

このスキルは、台湾の公共情報システム、旧式ポータルサイト、低予算のお知らせページ、ベンダーが保守するパッチ当てられたダッシュボード、即興的な市民向けビジュアルレイヤーのようなインターフェースを作成する必要があるエージェント向けです。

これは、ノスタルジーフィルター、パロディジェネレーター、またはランダムな壊れた UI を生成するマシンではありません。これは設計規律です：

• 緻密で運用可能な情報構造を維持する
• クリーンなカードの前に、テーブル、フレーム、サイドバー、境界線付きセクションを選択する
• ユーザビリティを損なわない範囲で、小さな蓄積された不整合を導入する
• UI コピーが必要な場合は、誠実な官僚的繁体字中国語を書く
• ユーザーが明示的に要求しない限り、モダンな SaaS の洗練を拒否する

インテントルーティング

まずユーザーのリクエストを分類し、その後、最小限の有用なルールファイルセットを開いて従います。スキルがグローバルにインストールされている場合でも、このリポジトリから使用されている場合でも機能するように、Glob を使用してファイルを解決します。絶対パスを想定しないでください。

コアエントリファイル：

• フロントエンド UI の生成、修正、レビュー全般 -> Glob **/SYSTEM_PROMPT.md、次に Glob **/prompts/style.md
• 哲学 / これがパロディになるべきでない理由 -> Glob **/rules/philosophy.md
• 反モダニズム / ネガティブプロンプト / SaaS の洗練を削除 -> Glob **/rules/anti-modernism.md

ビジュアルとインタラクションの次元：

• レイアウト / ページ構造 / ダッシュボード / ポータル / ナビゲーション -> Glob **/rules/layout.md
• 間隔 / 密度 / ぎこちないリズム / 不整合なギャップ -> Glob **/rules/spacing.md
• マイクロな不完全さ / 1px のずれ / パッチ適用されたレガシー感 -> Glob **/rules/micro-imperfections.md
• タイポグラフィ / フォントスタック / ぎざぎざのテキスト / WordArt 見出し -> Glob **/rules/typography.md
• カラーパレット / ROC ブルー / 警告イエロー / 同系色のずれ -> Glob **/rules/colors.md
• ボタン / 光沢 / ベベル / 旧システムのコントロール -> Glob **/rules/buttons.md
• テーブル / 管理グリッド / 高密度行 -> Glob **/rules/tables.md
• バナー / お知らせストリップ / ティッカー / キャンペーンヘッダー -> Glob **/rules/banners.md
• 画像 / 低解像度 / 圧縮 / ぎこちないトリミング -> Glob **/rules/imagery.md

コピーライティング：

• UI テキスト、ローカリゼーション、ラベル、スローガン、通知、CTA の文言、または繁体字中国語のコピー全般 -> Glob **/rules/copywriting.md

ルーティングルール

1. 該当するルールファイルが存在する場合、このファイルだけから回答しないこと。
2. 本格的なフロントエンド UI 作業の前に、SYSTEM_PROMPT.md と prompts/style.md を開くこと。
3. 表示される UI テキストを生成、翻訳、または書き換える際は常に rules/copywriting.md を開くこと。
4. 複合的な UI タスクの場合は、要求された表面に必要なルールファイルのみを読むこと。例：フォーム付きの政府ポータルランディングページでは、レイアウト、間隔、タイポグラフィ、色、ボタン、テーブル、バナー、コピーライティングを使用する。
5. ユーザーがレビューを依頼した場合、変更を提案する前に、UI がどこでモダンになりすぎ、空になりすぎ、一貫しすぎ、または皮肉的になりすぎたかを診断すること。
6. ユーザーが「よりクリーンに」するよう依頼した場合、明示的にスタイルを離れるように依頼しない限り、ROC 美学を維持すること。クリーンとは、より読みやすく運用可能であることを意味し、より Vercel/Stripe/Linear らしくすることではない。
7. ユーザーが既存の UI を提供した場合、その場で修正し、局所的な選択（より密なグループ化、より多くの管理ラベル、テーブル状の構造、微妙な位置ずれ、レガシーな色処理、誠実な官僚的コピー）を通じてスタイルを強化すること。
8. 意図的に使用不可能な UI を作成しないこと。「粗いが使える」がランダムな破損よりも優先される。
9. 美学をインターネットレトロパロディ、ミーム的な台湾政府コスプレ、またはジョークコピーに変えないこと。トーンは誠実さを保たなければならない。

ワーキングファイル

作業ディレクトリで以下を探すこと：

• SYSTEM_PROMPT.md - 標準システムプロンプトと品質基準
• prompts/style.md - 単一のコンパクトなスタイルブリーフ
• rules/philosophy.md - 設計哲学と歴史的姿勢
• rules/anti-modernism.md - モダンな洗練に対するネガティブプロンプト
• rules/layout.md - マルチカラム、フレーム、お知らせ重視のレイアウトガイダンス
• rules/spacing.md - 高密度で不整合、ベンダーパッチ適用済みの間隔ガイダンス
• rules/micro-imperfections.md - 制御された 0.1px～1px の不完全さガイダンス
• rules/typography.md - 旧システムフォントスタック、ぎざぎざテキスト、WordArt 見出しガイダンス
• rules/colors.md - ROC ブルー、飽和した赤、黄、銀、安物の金、同系色のずれ
• rules/buttons.md - 光沢、ベベル、Windows XP 風のボタン処理
• rules/tables.md - 管理テーブルとグリッドの処理
• rules/banners.md - 積み重ねられたバナー、お知らせストリップ、ティッカー状の表面
• rules/imagery.md - 圧縮、ぎこちないトリミング、低予算画像処理
• rules/copywriting.md - 繁体字中国語の官僚的 UI コピーガイダンス
• README.md - リポジトリレベルの概要
• .cursorrules と CLAUDE.md - ワークスペース統合メモ

ファイルが見つからない場合は、利用可能な最も近いルールファイルで続行し、結果に実質的な影響がある場合は、どのガイダンスが利用できなかったかを伝えること。

スタイル不変条件

すべての ROC 美学 UI は、以下の不変条件を維持する必要があります：

• 余白よりも密度。
• カードよりもテーブル。
• 管理用境界線、灰色の区切り線、ネストされたボックス、可視のセクションフレーム。
• マルチカラムレイアウト、サイドバー、繰り返しナビゲーション、お知らせ重視の構造。
• ROC ブルー、飽和した赤、警告イエロー、シルバーグラデーション、濃い灰色、明るいシアンのリンク、時折の安物の金。
• 混在する旧システムフォントスタック：MingLiU、PMingLiU、DFKai-SB、Microsoft JhengHei、Arial、Tahoma。
• パディング、マージン、境界線の太さ、ホバー状態、フォントの強調、配置におけるわずかな不整合。
• フォーマルで、反復的で、説明過多で、誠実にサービス指向と感じられる UI コピー。
• 運用の明確さ：ユーザーは読み、クリックし、スキャンし、送信し、タスクを完了できる。

禁止デフォルト

ユーザーが明示的に別段の要求をしない限り、以下を生成しないこと：

• Apple スタイルのミニマリズム
• Stripe、Linear、Vercel、フィンテック、またはモダン SaaS ランディングページの美学
• 大規模な余白、風通しの良いヒーローセクション、3 カードのフィーチャーレイアウト
• プレミアムタイポグラフィ、高級エディトリアルアートディレクション、または完璧なデザインシステム
• 完全に均一な 4px/8px の間隔スケール
• 最近資金調達したように見えるスムーズなモノクロダッシュボード
• ランダムな壊れた UX、読めないコントラスト、または偽の無効化インタラクション
• パロディコピー、ミーム参照、または皮肉なレトロジョーク

迷ったときは、「醜いが誠実な官僚的運用システム」を「美しいがモダンなスタートアップインターフェース」よりも選択すること。

ツールサーフェス

このメインの SKILL.md は、使用する読み取り専用ツールのみを宣言します：

• Read - マッチしたプロンプトとルールファイルを開くため
• Glob - グローバルスキルインストールとリポジトリコピー間でファイルの場所を解決するため
• Grep - ユーザーが狭い設計次元について質問したときに、特定のルールまたは用語を見つけるため

このスキル自体は書き込み権限を必要としません。ホストのコーディングエージェントは、ユーザーのタスクが実装である場合にプロジェクトファイルを編集することがありますが、このスキル自身のルーティングとルール選択は読み取り専用です。

出力規律

このスキルを適用する際：

1. 推奨事項を個人の好みではなくルールファイルに基づかせること。
2. 抽象的な形容詞よりも具体的な UI 変更を優先すること。
3. コメントやユーザー向けの説明には、適切な場合に繁体字中国語を使用すること。
4. コードを書く場合、既存のフレームワークとコンポーネントスタイルを維持し、レイアウト、CSS、マークアップ密度、コピー、および制御された小さな不整合を通じて ROC 美学を注入すること。
5. デザインライブラリを使用する場合、そのデフォルトのプレミアムなクリーンさに抵抗すること。間隔、境界線、タイポグラフィ、色、およびコンポーネントのリズムをオーバーライドすること。
6. インターフェースを視覚的にぎこちなくしながらも、アクセシビリティと基本的なユーザビリティを損なわないこと。

優先順位と競合

ガイダンスが競合する場合は、次の順序を使用します：

1. このメインの SKILL.md - ルーティング、不変条件、およびグローバル規律
2. SYSTEM_PROMPT.md - 標準的な美学の姿勢と品質基準
3. prompts/style.md - 実際の UI 作業のためのコンパクトな生成ブリーフ
4. rules/copywriting.md - 表示される UI テキストと繁体字中国語コピー
5. rules/*.md - 次元固有のビジュアルおよびレイアウトルール
6. .cursorrules、CLAUDE.md、およびリポジトリ README - ワークスペースおよびプロジェクトレベルの注意点

ルールによって UI が使用不可能になる場合は、ユーザビリティを維持し、代わりにより穏やかな ROC 処理を適用すること。モダンなコンポーネントのデフォルトがこのスキルと競合する場合、ユーザーが明示的にモダンスタイルを要求しない限り、このスキルが優先されます。