菜单
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})