메뉴
smarthr-design-system のコンポーネントページ向けのアクセシビリティコンテンツを作成・更新する。 対象コンポーネントの用途、実装例、デザインパターン、既存のアクセシビリティコンテンツを確認し、 一貫した構成と記述スタイルでアクセシビリティセクションを生成する。 「アクセシビリティコンテンツを追加して」「a11yセクションを作成して」 「コンポーネントページにアクセシビリティ情報を追加して」等の依頼に対応する。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SOC 직업 분류 기준
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/kufu/smarthr-design-system --skill add-component-a11y-content명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
Guides correct usage of smarthr-ui React components. Helps select the right component, verify props and API, and follow design system conventions and eslint-plugin-smarthr rules. Use when writing or reviewing JSX/TSX that imports from smarthr-ui, choosing between similar components, or fixing eslint-plugin-smarthr violations.
smarthr-design-system のコンポーネントページ向けのアクセシビリティコンテンツを作成・更新する。 対象コンポーネントの用途、実装例、デザインパターン、既存のアクセシビリティコンテンツを確認し、 一貫した構成と記述スタイルでアクセシビリティセクションを生成する。 「アクセシビリティコンテンツを追加して」「a11yセクションを作成して」 「コンポーネントページにアクセシビリティ情報を追加して」等の依頼に対応する。
Guides correct implementation of SmartHR product page layout patterns. Use when implementing collection (table/list) pages, single-object detail pages, or any page that follows the SmartHR design system layout conventions. Covers spacing, button variants, pagination placement, テーブル操作エリア/一時操作エリアの配置ルール, and DoAndDont avoid-patterns to prevent common mistakes.
| name | add-component-a11y-content |
| description | smarthr-design-system のコンポーネントページ向けのアクセシビリティコンテンツを作成・更新する。 対象コンポーネントの用途、実装例、デザインパターン、既存のアクセシビリティコンテンツを確認し、 一貫した構成と記述スタイルでアクセシビリティセクションを生成する。 「アクセシビリティコンテンツを追加して」「a11yセクションを作成して」 「コンポーネントページにアクセシビリティ情報を追加して」等の依頼に対応する。 |
| globs | ["src/content/articles/products/components/**/index.mdx"] |
smarthr-design-system のコンポーネントページ向けのアクセシビリティコンテンツを作成する。
目的は実装者がアクセシブルな実装を行うために必要な情報を提供することであり、アクセシビリティ教育やWCAG解説ではない。
コンポーネントページはアクセシビリティガイドラインではなく、コンポーネントの利用方法を説明する実装ガイドとして扱う。
src/content/articles/products/components/{コンポーネント名}/index.mdx
ButtonとTableのアクセシビリティセクションのみ参照。
# Button: セクション開始行を取得
start=$(grep -n "^## アクセシビリティ" src/content/articles/products/components/button/index.mdx | cut -d: -f1)
# 該当範囲（50行）を抽出
sed -n "${start},$((start+49))p" src/content/articles/products/components/button/index.mdx
# Table: セクション開始行を取得
start=$(grep -n "^## アクセシビリティ" src/content/articles/products/components/table/index.mdx | cut -d: -f1)
# 該当範囲（50行）を抽出
sed -n "${start},$((start+49))p" src/content/articles/products/components/table/index.mdx
以下が不明な場合のみWebFetch:
https://github.com/kufu/smarthr-ui/blob/master/packages/smarthr-ui/src/components/{コンポーネント名}/{コンポーネント名}.tsx
WebFetch prompt例: 「type propsの役割、ARIA属性、tabIndex/フォーカス管理の実装を抽出（実装コード不要、動作のみ）」
find src/content/articles/accessibility -name "*.mdx" | grep -E "(accessible-name|keyboard|label|hover|focus)"
本文は全文読まず、各ファイルのタイトル（frontmatter の title）や見出し（h1/h2）だけ確認してリンクを生成。
以下のいずれかに該当する場合のみ追加:
コンポーネントが標準で提供する機能。
利用者が追加で対応する必要がある内容。実装ミス、推奨パターンを含む。
アクセシビリティコンテンツを生成する前に、対象コンポーネントページの以下を確認：
これらのセクションで既に説明されている内容は、アクセシビリティセクションで繰り返さない。 アクセシビリティ固有の観点（スクリーンリーダー対応、キーボード操作、ARIA属性など）のみを記載する。
実装または仕様で確認できた内容のみ記載（推測禁止）。
実装例は以下のいずれかに該当する場合のみ追加する。
上記に該当しない場合は追加しない。
説明はコンセプトや判断基準を中心に記載し、実装例は理解を補助するために必要な場合のみ提供する。
以下のいずれかに該当する場合は、良い実装例と悪い実装例の両方に editable 属性を追加する。
Live Editorを使用する場合：
aria-label, aria-describedby, type="label" vs type="description" の違いLive Editorを使用しない場合：
重要：良い実装例と悪い実装例で統一する
editable noIframe にする、または両方とも通常のコードブロックにするeditable にしない記述形式：
DOM確認が有効な場合（両方ともeditable）：
<Tooltip message="追加" type="label">
<Button>
<FaCirclePlusIcon />
</Button>
</Tooltip>
// ❌ 悪い実装例
<Tooltip message="追加">
<Button>
<FaCirclePlusIcon />
</Button>
</Tooltip>
静的な説明で十分な場合（両方とも通常のコードブロック）：
<Button variant="tertiary" prefix={<FaCirclePlusIcon />}>項目を追加</Button>
// ❌ 悪い実装例
<Button variant="tertiary">項目を追加</Button>
noIframe属性について：
editable noIframe：コードと実行結果を同一画面で表示関連ページには、コンポーネントを利用する際に参考になるアクセシビリティコンテンツを追加する。
参照先:
/accessibility/**
より詳細な説明や判断基準が存在する場合のみ追加する。
以下の場合は追加しない。
リンク先の見出しをそのまま利用し、独自に言い換えない。
リンク先のカテゴリ名を利用すること。
例:
/accessibility/guidelines/**
→ アクセシビリティガイドライン
/accessibility/insight/low-vision-check-list/**
→ 弱視・ロービジョンのユーザビリティチェックリスト
記載形式:
- [{項目見出し} | アクセシビリティガイドライン]({link})
- [{項目見出し} | 弱視・ロービジョンのユーザビリティチェックリスト]({link})
## アクセシビリティ
### 基本的なアクセシビリティ機能
- xxx
### 開発時の考慮点
#### xxxする
何をするべきか。
なぜ必要か。
### 関連ページ
- [{項目見出し} | アクセシビリティガイドライン]({link})
- [{項目見出し} | 弱視・ロービジョンのユーザビリティチェックリスト]({link})