本文へ移動
cccskills
無料GitHub で公開日本語紹介

frontend-design

利用者と制約を整理し、情報の優先順位や余白、画面の状態を設計するスキルです。画面幅への対応とアクセシビリティを考慮して実装し、見た目を確認します。

原文原文の説明を見る

Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.

codewhale-hq/Codewhale
インストール方法を見る

こんなときに便利

  • 利用者と制約に合わせた画面設計
  • 画面幅に応じたレイアウトの実装
  • アクセシビリティを考慮したUI実装
  • 受け入れ基準に沿った外観確認

日本語での紹介

できること

利用者や目的に合わせて画面を設計し、実装後の見た目まで確認するスキルです。最初に対象となる人と制約を整理し、情報の優先順位、余白、画面の状態を設計します。そのうえで、画面幅に応じて表示を調整するレスポンシブ対応と、さまざまな人が利用しやすくするアクセシビリティを考慮して実装します。

こんなときに便利

画面を作る際に、見せる順序や余白の取り方まで意図を持って決めたい場合に向いています。画面サイズへの対応や使いやすさも含めて検討したいときに使えます。仮のレイアウトを完成品とせず、受け入れ基準に照らして外観を確認するところまでが作業範囲です。

使い方の例

  • 「この画面の対象ユーザーと制約を整理して、情報の優先順位と余白を設計して」
  • 「画面幅への対応とアクセシビリティを考慮してUIを実装して」
  • 「実装した画面を、受け入れ基準に照らして見た目の面から確認して」

注意点

特記事項はありません。

この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル（1）

  • SKILL.md576 B

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Frontend Design

When to use

Use for UI that must feel intentional, responsive, and accessible.

Non-goals

  • Do not ship generic placeholder layouts as finished design.
  • Do not ignore accessibility.

Workflow

  1. Clarify audience and constraints.
  2. Design hierarchy, spacing, and states.
  3. Implement with responsive/accessible patterns.
  4. Visual QA against the acceptance criteria.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

batch

無料日本語概要

並行して進められる大きな目標を、範囲の明確な作業に分割するスキル。既存のエージェントや作業ツリーの仕組みで実行し、結果の統合と検証まで進めます。

  • 大きな目標を並行作業に分けたいとき
  • 複数エージェントの作業調整
  • 作業ツリーを分けて進めたいとき
codewhale-hq/Codewhale4.1万2026年10月19日 更新

best-of-n

無料日本語概要

設計や実装、説明、デバッグの複数案を独立に作り、共通の評価基準で比較します。コード案は作業場所を分けて検証し、採用候補と判断の根拠を提示するスキルです。

  • 複数の設計方針を比較したいとき
  • 同じ課題の実装案を評価したいとき
  • 説明やデバッグの方針を比較したいとき
codewhale-hq/Codewhale4.1万2026年10月19日 更新

codew-release-qa-sweep

無料日本語概要

Codewhaleのリリース前に、テスト・ビルド・バージョン整合性を順に点検し、端末画面の手動確認項目と実施結果を整理して、完了判断の根拠を残します。

  • 実際のリリースブランチで自動検査
  • リリース先へのPR取り込み可否の確認
  • 端末の応答性と入力操作の手動確認
codewhale-hq/Codewhale4.1万2026年10月19日 更新

computer-use

無料日本語概要

登録済みのコンピューターで、デスクトップアプリや独立したブラウザーを操作します。画面の状態を読み取り、入力やクリックの結果を確認しながら作業を進めるスキルです。

  • デスクトップアプリの画面で入力
  • 独立したブラウザーで作業したいとき
  • 作業に必要な画面撮影や録画
codewhale-hq/Codewhale4.1万2026年10月19日 更新

contributor-onboarding

無料日本語概要

Codewhaleの開発参加時に、手元のブランチと同期状況、ビルド、CIと同じ検証を確認するスキル。ローカルの履歴と変更履歴から更新内容も提示します。

  • 初めて開発に参加するとき
  • 作業中の変更と同期状況の確認
  • ビルドとCIの検証を実行したいとき
codewhale-hq/Codewhale4.1万2026年10月19日 更新

cw-dogfood

無料日本語概要

Codewhaleの変更を実製品で確かめるため、ビルド元の識別情報を付けた実行ファイルの作成・インストールから、実際の端末での動作確認と記録まで進めるスキル。

  • 端末UIの変更を実製品で確認したいとき
  • ローカルビルドを導入・確認したいとき
  • モデルの接続先や承認動作の確認
codewhale-hq/Codewhale4.1万2026年10月19日 更新

codewhale-hq のスキルをすべて見る

このスキルの問題を報告する