feat: mFLOCSS starter v1.0 リファレンス実装#83
Open
shunei-web wants to merge 314 commits into
Open
Conversation
shunei-web
changed the title
Collaborator
Author
ブラウザ確認結果（v1.2 AR 修正後）2026-03-27 実施。Animation 層の @Keyframes 統一後の動作確認。
スクリーンショット: /tmp/starter-pc-after-scroll.png, starter-sp-full.png, starter-dark-full.png, starter-hover-cta.png, starter-faq-open.png（ローカル） |
Collaborator
Author
しゅんえいチェック指摘対応（ドロワー再設計）変更内容
確認済み
|
1アイコン1ファイルで管理しやすく、HTML の重複を排除。 currentColor による色継承は use href でも有効。 - src/images/icons/ に arrow-right, chevron-down, chevron-up を配置 - 全4ページのインライン SVG を <use href="...#icon"/> に置換 - サブディレクトリの HTML は ../ パスで参照 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ページ（HTML）とアセットの境界を明確化。 - src/css/ → src/assets/css/ - src/scripts/ → src/assets/scripts/ - src/images/ → src/assets/images/ - HTML 4ファイルのパス参照を更新 - README ファイル構成図を更新 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
:has(+ :required) は直後兄弟のみ対象のため、legend と input の間に div が挟まる fieldset 構造では機能しなかった。 :has(~ * :required) で子孫要素の required を検出するセレクタを追加。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
dialog 要素の UA スタイルに width: fit-content が含まれるため、 inset-inline: 0 だけでは幅が広がらなかった。 inline-size: 100% を追加して全幅表示を保証。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Vite 7+ で Rolldown がデフォルトバンドラーになったため、 正式な設定名に更新。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
vite.config.ts の rolldownOptions.input の変更手順を含む。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
README = 使い方ガイド（作業フロー順）: - クイックスタート → カスタマイズ → 構造の変更 → ビルド → リファレンス CODING_GUIDE = コーディングルール: - レイヤー構成（Component 条件、@container vs @media を移動） - 命名規則 - カスタムプロパティ - ファイル追加手順 - コミットメッセージ Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
テンプレートリポジトリのため、ユーザーの npm install 時に 最新バージョンで package-lock.json が生成される。 pnpm-lock.yaml / package-lock.json / yarn.lock を除外。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
手書きの近似値を正確なリニア補間に修正。 公式: preferred = (max - min) / (1440 - 400) * 100vi + intercept Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
## a11y（最優先） - ドロワー Escape キー閉じ実装（show() は自動閉じしないため手動処理） - ドロワー フォーカス管理（開時→ドロワー内、閉時→ハンバーガー復帰） - inert 適用範囲を nav/main/footer + スキップリンク/ロゴに拡大 - ドロワー/ハンバーガー/アコーディオン transition に prefers-reduced-motion ガード - aria-label を「メニュー」に統一（aria-expanded に状態表現を委ねる） - header#top に tabindex="-1" 追加（Back to Top アンカーのフォーカス移動対応） - フォーム HTML 簡素化（role="alert" + aria-describedby 削除、ネイティブバリデーションのみ） - Back to Top href="#" → href="#top" に変更（履歴汚染防止） - select に aria-describedby 追加（一貫性）→ フォーム簡素化で統合 ## CSS 設計 - c-section-heading の margin-block-end を削除、Project 層に移動（Portability 改善） - margin-block-end → margin-block-start 統一（13箇所。後から来る要素が間隔を持つ方針） - p-privacy__body 内の散文要素も margin-block-start に統一 - 空ルールセットのコメントを「スタイルなし（HTML クラスとの対応を維持）」に統一 - CUSTOMIZE マーカーをトークンファイルに統一付与（z-index, ease 追加） - --_ プレフィックスコメントを全使用ファイルに統一配置 ## ドキュメント - CODING_GUIDE: 流体タイポグラフィ計算式、空のルールセット方針を追加 - README: @Property を使用技術リストから削除、text-spacing-trim 未対応注記追加 - style.css: 技術リストを README 参照に変更 - shadow.css: 使用例コメント追加 ## tooling - package.json: npm 統一（pnpm キー削除）、lint:css/lint:js に --fix 追加 - thanks/index.html: canonical 追加 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Animation 層（2ガード）と Component/Project 層（1ガード）の 違いと理由をテーブルで明示。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
書籍ch5で説明している1ガードパターンをリファレンス実装に反映。 機能的トランジションのアクセシビリティ対応。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ページの骨格をLayout層で定義する設計。p-headerからsticky/z-indexを分離。 - l-header: sticky + z-index + container - l-footer: container のみ - p-header/p-footer: 見た目のみに集中 - 全HTMLにl-header/l-footerクラスを追加 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Collaborator
Author
2026-03-29 追加変更AR 完了（計4件修正）
l-header / l-main / l-footer 追加
横文字統一
|
vite(sass) 経由の immutable・picomatch は pnpm update で解消。 markuplint(@markuplint/file-resolver) 経由の minimatch(ReDoS 3件)は 上位パッケージ更新で対応できないため pnpm.overrides で強制固定。 全て devDependencies のみに影響する脆弱性のため本番コードへの影響はなし。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- animation/fade-in-slide-up.css: &.is-visible → &[data-visible]
- animation/scale-in.css: &.is-visible → &[data-visible]
- project/p-back-to-top.css: &.is-visible → &[data-visible]
- component/c-button.css: &.is-loading → &[data-loading]
- main.js: classList.add/remove('is-visible') → dataset.visible の付与・削除
Closes #86
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
data-stagger の値 "fade-in-slide-up" は initStagger() で参照されておらず、 子要素の data-animate と重複していた。data-stagger をブーリアン属性として 使用し、アニメーション名は子要素の data-animate のみで定義する形に統一。 Closes #87 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- index.html: `</main>` 直前に mFLOCSS デモリンクセクションを追加 - Zenn 書籍・starter・spec リポへの 3 リンクを c-button で表示 - `.p-cta -demo-links` モディファイアで既存サロン CTA と背景を区別 - translate="no" / rel="noopener noreferrer" でアクセシビリティ・セキュリティ対応 - コピーは placeholder（Phase E-2 で marketer が差し替え） - p-cta.css: `-demo-links` モディファイアと `.p-cta__links` 要素を追加 - `background-color: var(--color-bg)` で直前 CTA と視覚的に区切り - links は flex + wrap でレスポンシブ対応 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Deploying starter with
|
| Latest commit: |
de60fcf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d3009e42.starter-20t.pages.dev |
| Branch Preview URL: | https://v1-2.starter-20t.pages.dev |
This reverts commit 4cf73d0.
WCAG 2.5.8 Target Size (Minimum) 準拠。 既存トークン --size-tap-target（44px）を使用し、 min-block-size + inline-flex/flex で最小タップ領域を保証。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…200) PR #199 の simpler approach（post-hook で未処理のみ届く前提）が誤り。 Vite 8.x の middleware 順序で indexHtmlMiddleware より前に動き、 全リクエストを飲み込むため / と /privacy/ も 404 化していた。 修正: 既存ファイル / ディレクトリ存在チェック追加 - dist/{url}（ファイル直接 or ディレクトリ）が存在 → next() で Vite に委譲 - dist/{url}/index.html が存在 → next() で Vite に委譲 - どちらも存在しない → 404.html を 404 ステータスで返す QC リトライで FAIL 検出 → 全 URL バリエーション（11件）動作確認で網羅性確保。 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- src/assets/css/layout/l-page.css 新規（display: flex; flex-direction: column; min-block-size: 100dvb;） - .l-page > main に flex: 1（子セレクタで main を stretch） - src/assets/css/style.css に layout/l-page.css import 追加（layout セクション先頭） - 全 3 ページ（404 / index / privacy）の body に class="l-page" 追加 - src/assets/css/reset/reset.css から min-block-size: 100dvb 削除（l-page に責任統一） しゅんえい指摘（2026-05-01 セッション 33）: 404 等の短いコンテンツページでも footer をウィンドウ下部に配置。mFLOCSS spec §5.4 Layout 層責任に整合する設計を採択。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…5-h8pq (#202) - Bump markuplint 4.14.1 -> 4.18.1 - Add pnpm.overrides for uuid >=14.0.0 to resolve transitive moderate vulnerability (path: markuplint > @markuplint/file-resolver > @markuplint/parser-utils > uuid) - pnpm audit: 0 vulnerabilities - Verified: pnpm lint:html (3 files passed), pnpm dev (vite ready), pnpm build (success) Refs: monthly review Issue shunei-web/issues#381 Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
#205) PR #199 / #200 で `vite.config.ts` の preview-404-fallback plugin は実装済 だったが、Issue #198 の完了条件「README または CONTRIBUTING に 404 動作明記」 が未完遂（PR body には記載があったが実 commit に含まれていなかった partial misreport）のため補完。 ## 変更内容 - README.md: 「ビルドと納品」末尾に「404 ページの動作確認」セクション追加。 本番ホスティング（Cloudflare Pages / Netlify / Vercel / GitHub Pages 共通） + ローカル preview + 直接アクセスの 3 確認パターンを記載。 - CONTRIBUTING.md: 「基本フロー」に `pnpm run preview` 動作確認手順を追加し、 README の該当節へリンク。 - CHANGELOG.md: Unreleased Added に preview-404-fallback plugin の動作を 追記（PR #199 / #200 で更新漏れ）。 ## 実機検証 `npm run build && npm run preview` 後の動作確認: | URL | 期待 | 実測 | |-----|------|------| | `/` | 200 | ✅ 200 | | `/privacy/` | 200 | ✅ 200 | | `/nonexistent` | 404 | ✅ 404 | | `/404.html`（直接） | 200 | ✅ 200 | | `/assets/notfound.css` | 404 | ✅ 404 | Closes #198
…ec §5.2 SHOULD 準拠）
- reset.css に * { min-inline-size: 0; min-block-size: 0 } を追加
- CSS-FLEXBOX-1 §4.5 / CSS-GRID-1 §6.2 罠の構造的予防
- 既存 :where(fieldset) は fieldset 固有罠対策として残置
- pseudo は適用対象外（最小化版）
- 副作用: input / replaced element の個別 override 必要時のみ
…ck-size 統合 セッション 48 commit a2adf3a で追加した * 一律 min-* 適用のコメント過剰 + 末尾配置を解消。 - 冒頭 *, ::before, ::after { box-sizing } に min-* 統合（DRY + 既存パターン整合） - 末尾の重複ルール + 4 行コメント削除（starter 他箇所はコメントゼロで一貫性確保） - 仕様根拠は spec §5.2 SHOULD + agent-reference [mFLOCSS 流] で明文化済（重複削除）
ユーザー実体験のシナリオ（インストール → 全体像把握 → カスタマイズ → 構造変更 → ビルド）に 整合するよう章節項を再配置。 - 「ファイル構成」をリファレンス節 → 独立章に昇格 + クイックスタート直後に移動（全体像先） - 「ダークモード」を「色の変え方」直後に移動（ビジュアル系グルーピング統合） リファレンス章は「コマンド一覧 / 対象ブラウザ」のみに整理。
- CODING_GUIDE.md を 289 行 → 100 行（65% 削減） - 削除: Design Decisions / 単位解説 / 流体タイポ理由 / @container vs @media / モーションガード理由 / show() 採用根拠 / showModal() 参考ケース / Modifier 記法選択根拠（業界標準比較）/ 空のルールセット （いずれも書籍領域 or コードで自己解析可能な内容） - 保持: ブレークポイント CSS/JS 同期 / ドロワー HTML 構造 / z-index 設計 / SR 実機検証手順 / data-drawer-inert / コミットメッセージ + 関連リンク （starter 固有運用ルール） - z-index テーブル（14 行）→ ファイル参照 + 設計判断 1 行に圧縮 - URL 修正（4 箇所）: https://mflocss.dev → https://github.com/mflocss/spec - README.md L257（設計判断の詳細セクション） - README.md L264（関連リンクセクション） - CODING_GUIDE.md L4（冒頭） - CODING_GUIDE.md 関連リンク末尾
brand mflocss.md L75/L95/L181 で「mflocss.dev = 認知→理解→書籍購入のファネル中枢」と 明文化されている通り、各リポからの集約導線入口として公式サイトリンクを復活。 Phase E-2 marketer「GitHub Star 獲得の導線設計（README→Star）」の CV 経路を確立。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- README: 「設計判断の詳細」セクション削除（関連リンクと重複） - README: GitHub Actions CI セクション圧縮（9行 → 2行、詳細はworkflowファイル参照） - CODING_GUIDE: 冒頭に想定読者（開発者向け）+ README 委譲を明示 - CODING_GUIDE: 末尾「関連リンク」セクション削除（冒頭 L5 に単一化） - 役割分担: README = 全ユーザー共通の起点・関連リンク単一ソース / CODING_GUIDE = 規約のみ純化 AR: PASS WITH MINOR（採用 1 件反映済み）/ 関連: PR #83 v1.2 ブランチ
書籍 ch5（Token・Reset・Foundation）+ ch12（スターターで動かす）と完全重複する
カスタマイズ・構造の変更セクション（123 行）を書籍誘導 + CUSTOMIZE コメント誘導の
5 行に圧縮。既存維持バイアスを排し、責任に応じた配置（書籍 = 詳細 / README = 起点）を実現。
- 削除: テキスト差し替え / favicon・OGP / 色の変え方 / ダークモード / 余白・文字サイズ
外部フォント / ブレークポイント / フォーム送信先 / セクション追加削除 / ページ追加削除
- 追加: 書籍 ch5+ch12 誘導リンク + CUSTOMIZE コメント検索ヒント（5 行）
- CODING_GUIDE.md は変更なし
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- A: 書籍章番号（ch5/ch12）削除 → 書籍 TOC で発見可能、メンテコスト最小化 - B: 404 動作確認表に dev 行追加（localhost:5173、HMR 有効）、重複の直接アクセス行削除 - C: 関連リンクを「リポ内ドキュメント」「mFLOCSS エコシステム」の 2 グループに整理 - CODING_GUIDE.md / CHANGELOG.md を明示リンク追加（GitHub UI 自動認識なし） Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- カスタマイズ・構造の変更 / ビルドと納品 / パッケージマネージャー / GitHub Actions CI を README → CODING_GUIDE へ移管 - README: GitHub 全ユーザー向け起点情報のみに純化 （クイックスタート / ファイル構成 / リファレンス / 関連リンク / ライセンス） - CODING_GUIDE: 開発者向け運用手順を集約 （移管 4 セクション + 既存 ブレークポイント / ドロワー / コミットメッセージ） Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- README: 想定ユーザー（実装者 / Web 制作者 / AI agent）明示 + CODING_GUIDE / 書籍へのナビ追加 - CODING_GUIDE: セクションを開発フロー順に整理（セットアップ→カスタマイズ→ビルド→実装規約→開発規約） - CONTRIBUTING: エンドユーザー向けセクション削除（CODING_GUIDE へ一元化）、404 / commit / コード規約のリンク・表記を CODING_GUIDE 誘導に統一 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
5 tasks
…er/minifier 切替 + 手動 prefix 削除 + stylelint 簡素化 (#208) ## 削除 / 変更内容 ### theme-color media attribute 削除 (Baseline 未達 + fallback 不能) - src/index.html: CUSTOMIZE コメント 1 行 + theme-color meta 2 行 削除 - src/privacy/index.html: 同 3 行 - src/404.html: 同 3 行 ### lightningcss 切替 (autoprefixer 内蔵 + minify 統合) - vite.config.ts: `css.transformer: 'lightningcss'` + `build.cssMinify: 'lightningcss'` 追加 - src/assets/css/reset/reset.css: `-webkit-text-size-adjust` 削除 (autoprefixer 自動生成) - stylelint.config.mjs: `property-no-vendor-prefix` rule + `ignoreProperties` 配列 削除 (lightningcss が prefix 管理 = 手動除外不要) ## theme-color 削除理由 1. Baseline 未達 (Firefox 未対応 + Chrome PWA-only) 2. fallback 不能 (field-sizing / text-spacing-trim と異なり @supports 等の進化的採用が無理) 3. 動作確認不能 (Safari macOS/iOS のみ確認可能) 4. mFLOCSS thesis 外 (HTML meta、CSS 設計判断「どこに書くか」軸ではない) 5. cortex book v1.0(new) scope 純化 atomic PR (cortex#862 MERGED) と整合 ## lightningcss 切替理由 - modern target 方針 (knowledge expertise/css/layer-architecture-decisions.md L40 + ar-lessons-2026-04.md L39) と整合 - autoprefixer 内蔵で手動 prefix 不要 → stylelint 設定簡素化 cascade - Rust 製で build 高速化 (CSS transform + minify 統合) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- viewport.js: 固定幅時に initial-scale=1 を除去（390px 端末での横スクロール解消） - c-button.css: :active に opacity:0.8 を追加（タッチ端末の押下フィードバック） - main.js + index.html: formSelector を data-validate へ移行（CSS クラスと JS フックの分離） Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…不能) (#207) * fix(starter): theme-color media attribute 削除 (Baseline 未達 + fallback 不能) 削除理由: 1. Baseline 未達: Firefox ❌ 未対応 / Chrome は PWA インストール時のみ動作 2. fallback 不能: @supports 等の進化的採用が構造的に不可能 3. 動作確認不能: Safari macOS / iOS のみ確認可能 → 教材として価値低い 4. mFLOCSS thesis 外: HTML meta の扱いは CSS 設計判断「どこに書くか」軸ではない 5. 連動: cortex book v1.0(new) scope 純化 (cortex#862) と整合 削除内容: src 3 ファイル × (CUSTOMIZE コメント + meta × 2) = 9 行 保持: <meta name="color-scheme"> は Baseline 達成済み + fallback 可のため保持 AR: docs/ar/fix-remove-theme-color-baseline-failure.md — No finding Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore: remove AR report (review 成果物、reference repo に混入させない) --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
390px / 約10px の付随的数値はコメント責任境界原則に反する。 本質（固定幅指定時の initial-scale 併記が横スクロールを誘発する）のみに絞り 2行を1行に統合する。ロジック変更なし。 cortex#948 follow-up / PR #209 の後続修正 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…t 出力階層を統一 (#213) - viewport.js を public/scripts/ から public/assets/scripts/ へ移動 - HTML 3 件（index / privacy / 404）の script src を /assets/scripts/viewport.js に更新 - viewport.js 内 CUSTOMIZE コメントのパスを更新 - README.md のファイル構成ツリーを更新 - CODING_GUIDE.md にアセット配置規約（family 共通）を新設し、パス参照も更新 ビルド後 dist/assets/scripts/viewport.js に出力されることを確認済み。 旧 dist/scripts/viewport.js は消滅し、src/assets/scripts/ の出力先と階層が統一された。 Closes #212 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- main.js CUSTOMIZE 例から `.c-form`（スタイルクラス）を JS フックに使う例と 「旧方式も使用可」容認コメントを削除 - `[data-validate]`（data 属性）と `#contact-form`（ID 直接指定）の 2 例に差し替え - CODING_GUIDE.md に「JS フックの分離」節を追加 （スタイルクラスをフックに使わない理由 + ✅/❌ コード例） スタイルクラスを JS フックにすると、デザイン変更が JS バグに直結するため
initFormValidation の @param formSelector に付いていた 「JS フックは data-* 属性で指定する（スタイルクラスとの分離）」を削除する。 同原則は CODING_GUIDE.md §「JS フックの分離」に明文化済みであり、 他のフック（drawer / animate / stagger / back-to-top）には同様コメントがない。 一貫性確保 + インラインコメントの最小化目的。コード挙動は変えない。 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- main.js CUSTOMIZE: initFormValidation の ID 例を削除し [data-validate] 1例に統一 - CODING_GUIDE: 「JS フックの分離」節から ID 直接指定を ✅ 例から除去し data-* 単一規約に - vite.config.ts: rolldownOptions.output に entryFileNames / chunkFileNames / assetFileNames を設定 - JS バンドル → assets/scripts/[name].js（viewport.js と同フォルダに統一） - CSS → assets/css/[name][extname]（wp-starter と同構成） - input key を main → index に変更（JS chunk 名 main との衝突を回避） Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- c-button.css: :active ルール直前に wp-starter と揃えたコメント追加（タッチ端末フィードバック意図の明示） - p-numbers.css: __item の空ルール placeholder コメントを簡潔版に統一（推測的な「将来の拡張点」を削除） - package.json: lint:js の ESLint glob に public/**/*.js を追加（viewport.js の lint 漏れ解消） - .nvmrc 新規作成（Node 24、wp-starter と統一）+ check.yml の Node setup を node-version-file 参照化 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
選択肢メニュー（A/B）から最小ポインタへ整理。ダークモードコメントと同形式。 - typography.css: A/B メニュー・self-host @font-face 例・CDN スニペットを削除し、 「<head> 側で設定」を示す 4 行最小コメントに置換（wp-starter と横断統一） - index.html: 「詳細: typography.css 参照」の循環参照を削除し、 コメントアウト済み Google Fonts スニペットを単一ソースとして残す Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
starter は独立リポであり、WordPress / inc/enqueue.php への言及は リポ独立原則に反するため削除。自リポの index.html のみを案内する シンプルな記述に変更。 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…card） (#220) * refactor: カード系を Component 粒度原理で再構成（c-media-card / c-step / c-concern-card） mFLOCSS Component 粒度判断原理（semantic-first / 過剰分割回避）に沿い、構造名コンポーネ ント借用 + Project 層上書きを semantic Component に再構成。 - c-media-split → c-media-card に semantic 化（feature card は認識可能なデザイン単位、 media 常在で構造名適切）。公開 API --media-split-first-order → --media-card-first-order - c-step 新設（番号バッジ + grid を p-flow__item から集約）。counter-increment は c-step、 counter-reset は p-flow__list に残し連動関係を維持 - c-concern-card 新設（problem の c-text-block 共有を解消し独立 semantic 化）。CTA/type scale のサイト別分岐に備えた独立単位（c-stat/c-blockquote と同じく各カード型を独立 component に） - c-card / c-text-block(cta) は primitive として変更なし cortex#968 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(comments): コメント最小化（cortex#968 follow-up） しゅんえいさんのレビュー指摘を反映。設計意図コメントを除去・短縮し、 コード内コメントをコントラクト情報のみに絞る。 - c-concern-card.css: 冒頭 3 行ヘッダコメント除去 - c-step.css: 3 行ヘッダ → counter 契約 1 行に短縮 - p-flow.css: counter-reset 連動コメント除去 / Block 併記注記除去 - p-problem.css: Block 併記注記除去 CSS 宣言・セレクタ・プロパティ変更なし。stylelint clean。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(naming): c-step → c-step-card リネーム + コメント具体化/最小化（cortex#968 follow-up R3） - c-step.css を c-step-card.css に git mv（card family 命名統一） - クラス .c-step / .c-step__* → .c-step-card / .c-step-card__*（counter 名 step は変更なし） - style.css の import パスを c-step-card.css に更新 - index.html の flow セクション 5 項目を c-step-card 系クラスに統一 - c-step-card.css ヘッダコメントを `counter-reset: step;` literal を含む具体形に変更 - p-voice / p-faq / p-cta の stub 附帯「Block+Element 併記パターン統一」を除去し素の stub に統一 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(c-section-heading): コメントから「foundation の h2 デフォルトを継承」を除去 cortex#968 follow-up R4 / PR#220 コメント簡素化 他の stub コメントと同形に揃える（「HTML クラスとの対応を維持」のみ残す） Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
- nav-link hover を Foundation :where(a) に集約 + Project は font-size 等の文脈差のみに圧縮 公開 API: --link-color / --link-hover-color（reduced-motion 配慮の transition も Foundation 一元化） - voice 証言の HTML 仕様違反を修正 + c-blockquote → c-testimonial-card 改名 <cite> 人名誤用 / <footer> blockquote 内配置 / 帰属が引用内 の 3 点を <figure>+<figcaption> 構造で解消 - ハードコード 640px を --content-width-form トークンに置き換え（structure.css） - FAQPage JSON-LD に rich result 終了（2026-05-07）を踏まえた残置理由コメントを追加 - p-404 の text-align: center を __lead 限定にスコープ縮小 - iluha h2 見出しに SEO キーワード（ケア / 予約 / 施術 / 初回体験）を CV トーン維持で自然に織り込み - CTA を Project Element 直スタイル化 + 単発・非定番 primitive の c-text-block を削除 source of truth: knowledge/expertise/css/component-layer-patterns.md （-card サフィックス規約 / semantic-first / 改名しない原則 / 単発 + 非定番 primitive は Project 直） Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
* feat(iluha): h1 / title / 見出し SEO 最適化（テキスト編集のみ） 完全個室・ボディケアサロン・施術等の KW を自然に組み込み、 見出しアウトラインの自己説明性を向上。構造・クラス変更なし。 - title / og:title / twitter:title: iluha — からだの声を、聴く時間。 → 完全個室のボディケアサロン iluha｜からだの声を、聴く時間 - h1: からだの声を、聴く時間。 → からだの声を聴く、完全個室のボディケアサロン。（br 位置調整含む） - problem h2: こんな日々、続いていませんか？ → こんなお悩み、続いていませんか？ - numbers h2: 実績 → 施術実績・満足度 AR 通過（ar-report-v1.2-seo-headings.md）/ build 成功（60ms） Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore: remove AR report (review artifact, リポ対象外) review 成果物（ar-report-*.md）は検証プロセスの産物でありリファレンス実装の成果物でないため除去。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
mFLOCSS starter v1.0 リファレンス実装。spec v1.0 準拠 + AR 3サイクル + QA + 著者通読を経て完成。
spec v1.0 準拠
コード品質
ブラウザ互換
ドキュメント
デプロイ
Test plan
Generated with Claude Code