D-ZERO のアクセシビリティ規約。マークアップやインタラクションの実装・変更・レビューで、WAI-ARIA、代替テキスト（alt）、ランドマーク、見出し、キーボード操作、フォーカスを扱うときに使う。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
d-zero-dev/frontend-guidelines202026년 10월 15일 업데이트
무료GitHub에 공개
dzero-design-to-code
デザインデータ（Figma などのデザインカンプ）を参照してコーディングするときの解釈原則とアセットの扱い。Figma の URL・MCP・デザイン画像・カンプをもとに実装や修正をするときに必ず使う。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
연동 도구Figma
설치 방법 보기포함된 파일(1)
- SKILL.md3.3 KB
SKILL.md(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
デザインカンプ解釈
実装レイヤー選定（
dzero-tech-selection）を経ていない場合は先にそちらを読むこと。
原則: デザインデータの数値は「結果」であって「仕様」ではない
デザインデータから読み取るべきは意図（可変か固定か、何に整列しているか、余白は何との関係か）であり、表示されている数値そのものではない。
- 要素の
width/heightをデザインの数値のまま固定値で書かない。可変を前提にレスポンシブに落とし込む - デザイン上の X/Y 座標を
top/left（inset-*）にそのまま変換しない - 値を書くときは何を基準にした値なのかを計算式で明示する（
dzero-cssの値のルールに従う） - 行高が絶対値（例:
24px）で指定されていても、そのままline-height: 24pxと書かずfont-sizeとの比率（例:calc(24 / 16)=1.5）に変換する <!-- 暫定ルール: stylelint（declaration-property-unit-disallowed-list）による line-height の px 禁止を linters に提案中。導入されたらこの項目は削除する -->
デザインに描かれていない状態も実装対象
デザインカンプは通常デフォルト状態の静止画しかない。描かれていなくても以下は実装する。
- インタラクティブ要素の
:hoverと:focus-visible（キーボード操作時のフォーカス表示。詳細はdzero-a11y） - エラー・空・長文（折り返し・はみ出し）などの状態はデザインに定義がなければユーザーに確認する
デザイントークンへの対応付け
- 色などの値はプロジェクトのカスタムプロパティ（
__assets/_libs/style/base/root.cssの:rootに定義。Figma のバリアブルもここに定義される）に対応付けて使う - デザイン側でバリアブル・スタイルが設定されていない値でも、直接書かずに対応するトークンがないか先に探す <!-- 暫定ルール: stylelint（declaration-strict-value 系）によるトークン強制を linters に提案中。導入されたらこの項目は削除する -->
アセット（画像等）の扱い
- 画像の書き出し・変換は自分で行わず、ユーザーに依頼する（エージェントが行うと著しく遅いため。作業分担のルール）
- 配置されたファイルの命名は
[種類]-[修飾語・詳細]-[連番]@[解像度].[拡張子]（[種類]と[拡張子]は必須）。種類はbg/pict/thumb/hero/banner/text/logo/icon/objから選ぶ（メディア: 画像） - フォーマットは可能であれば AVIF・WebP を採用する。ベクターデータがあるものは SVG を採用する
- 画像をページやコンポーネントごとのサブディレクトリに分けない（共通で使い回すか将来わからないため）
리뷰
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
댓글
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
같은 저장소의 스킬
D-ZERO の CSS コーディング規約。CSS を書く・編集する・レビューするときに使う。コンポーネントのスタイル、レイアウト、レスポンシブ、カスタムプロパティ、セレクタ設計に適用する。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
d-zero-dev/frontend-guidelines202026년 10월 15일 업데이트
D-ZERO の HTML/Pug マークアップ規約。HTML や Pug を書く・編集する・レビューするときに使う。コンポーネント設計、クラス命名、文書構造、画像、リンク、メタ情報に適用する。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
d-zero-dev/frontend-guidelines202026년 10월 15일 업데이트
dzero-js
무료D-ZERO の JavaScript/TypeScript コーディング規約。JS/TS を書く・編集する・レビューするときに使う。イベント処理、DOM 操作、状態変更、ライブラリ追加、スクリプト読み込みに適用する。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
d-zero-dev/frontend-guidelines202026년 10월 15일 업데이트
フロントエンド実装のコードレビューを実施する。PR レビュー、コードレビュー、実装チェック、品質確認を依頼されたときに使う。実装レイヤー選定の妥当性から各技術軸の観点まで順に検査する。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
d-zero-dev/frontend-guidelines202026년 10월 15일 업데이트
UI・機能・コンポーネントの実装レイヤー（HTML/CSS/JavaScript）を決定する判断基準。実装・修正の着手前に必ず読む。アコーディオン、モーダル、ポップオーバー、開閉・切替などのインタラクション実装を依頼されたときに使う。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
d-zero-dev/frontend-guidelines202026년 10월 15일 업데이트