dzero-css
FreeD-ZERO の CSS コーディング規約。CSS を書く・編集する・レビューするときに使う。コンポーネントのスタイル、レイアウト、レスポンシブ、カスタムプロパティ、セレクタ設計に適用する。
The English summary is being prepared. Showing the original description.
d-zero-dev/frontend-guidelines20Updated Oct 15, 2026
FreePublished on GitHub
dzero-a11y
D-ZERO のアクセシビリティ規約。マークアップやインタラクションの実装・変更・レビューで、WAI-ARIA、代替テキスト（alt）、ランドマーク、見出し、キーボード操作、フォーカスを扱うときに使う。
The English summary is being prepared. Showing the original description.
See how to installFiles included (1)
- SKILL.md2.8 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
アクセシビリティ規約
マークアップの規範は
dzero-htmlと併せて適用する。詳細は HTML: アクセシビリティ を参照。
実装規範
準拠基準
- 準拠基準は WCAG 2.2。WAI-ARIA は 1.2 を基本に、ブラウザ・支援技術の実装状況を鑑みて判断する
WAI-ARIA の使いどころ
- WAI-ARIA を使うのは HTML 標準では再現できないコンポーネントを作成するときのみ。HTML 標準に要素がある場合や Popover などで済む場合は使わない
- 使う必要があるケース:
buttonがaria-pressed/aria-expandedなどの状態を持つ場合、タブやカルーセルなど HTML にないコンポーネントを扱う場合 - 使う場合は APG を参考に、インタラクション要件・キーボード操作・振る舞いを推奨実装に近づける（特別な理由がない限り APG に則る）。実装例は APG Patterns Examples も参考にする
- 状態を表す属性の使い分けは
dzero-htmlの状態管理に従う
代替テキスト
altは WCAG 達成基準 1.1.1「同等の目的」を基準に考える。コーディング段階ではなくデザイン段階で代替テキストが決まるように計画する（決まっていなければユーザーに確認する）- 装飾ではない通常の
imgにaria-hidden="true"を付けない。装飾画像はalt=""（空 alt）が正解 altが空の場合にrole="none"（role="presentation"）を重ねて付けない（空 alt で同じ効果が得られる）
ランドマーク
- 各コンポーネントの先祖となる要素にランドマークを設ける。もしくはコンポーネントルート自体をランドマークを持つ要素でマークアップする
キーボード操作とフォーカス
- キーボード操作の要件は APG の該当パターンに則る（実装例の参考: APG Patterns Examples）
- インタラクティブ要素には
:focus-visibleによるフォーカス表示を実装する。デザインカンプに描かれていなくても省略しない（dzero-design-to-code参照）。フォーカス表示を消すだけのスタイル（outline: none等）を書かない
Reviews
No reviews yet. Tell others what you thought.
Comments
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
More skills from this repository
デザインデータ（Figma などのデザインカンプ）を参照してコーディングするときの解釈原則とアセットの扱い。Figma の URL・MCP・デザイン画像・カンプをもとに実装や修正をするときに必ず使う。
The English summary is being prepared. Showing the original description.
d-zero-dev/frontend-guidelines20Updated Oct 15, 2026
dzero-html
FreeD-ZERO の HTML/Pug マークアップ規約。HTML や Pug を書く・編集する・レビューするときに使う。コンポーネント設計、クラス命名、文書構造、画像、リンク、メタ情報に適用する。
The English summary is being prepared. Showing the original description.
d-zero-dev/frontend-guidelines20Updated Oct 15, 2026
dzero-js
FreeD-ZERO の JavaScript/TypeScript コーディング規約。JS/TS を書く・編集する・レビューするときに使う。イベント処理、DOM 操作、状態変更、ライブラリ追加、スクリプト読み込みに適用する。
The English summary is being prepared. Showing the original description.
d-zero-dev/frontend-guidelines20Updated Oct 15, 2026
dzero-review
Freeフロントエンド実装のコードレビューを実施する。PR レビュー、コードレビュー、実装チェック、品質確認を依頼されたときに使う。実装レイヤー選定の妥当性から各技術軸の観点まで順に検査する。
The English summary is being prepared. Showing the original description.
d-zero-dev/frontend-guidelines20Updated Oct 15, 2026
UI・機能・コンポーネントの実装レイヤー（HTML/CSS/JavaScript）を決定する判断基準。実装・修正の着手前に必ず読む。アコーディオン、モーダル、ポップオーバー、開閉・切替などのインタラクション実装を依頼されたときに使う。
The English summary is being prepared. Showing the original description.
d-zero-dev/frontend-guidelines20Updated Oct 15, 2026