H-ymt

見出し・リストアイコン実装の方針

• align-items: center だけでセンタリングしない
• 行に対してアイコンを中央寄せしたいときは、アイコン側で margin-block を調整する
• 複数行になる見出し・リストでは、テキストは通常フロー優先で、必要に応じて float / position: absolute を使う

.parent {
  display: inline-flex;
 align-items: flex-start; /* center は使わない */

H-ymt

## モチベーション

このガイド兼エージェントスキルは、

- 人のレビューに入る前に、**機械的にチェックできる観点**をはっきりさせたい
- PR ごとに毎回同じ指摘をするのではなく、**再現性のある基準**にまとめておきたい
- アクセシビリティやパフォーマンス、HTML/ブラウザ仕様まわりの「自分なりのこだわり」を、  
  AI エージェントにも共有して、**レビューの質とスピードを上げたい**

という目的で作っています。

H-ymt

paths	**/*.astro

Astro のルール

対象: Astro 5、TypeScript (strict)

レンダリング方針

H-ymt

body {
  font-family: Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Noto Sans JP, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
}

H-ymt

import clsx from "clsx";
import styles from "./index.module.css";
import Link from "next/link";

type ButtonProps = {
  children: React.ReactNode;
  className?: string;
  visual?: "primary" | "secondary";
  size?: "sm" | "md" | "lg";

H-ymt

<div class="loop">
  <p aria-hidden="true">A Future of Smiles and Growth</p>
  <p aria-hidden="true">A Future of Smiles and Growth</p>
</div>

.loop {
 position: absolute;

H-ymt

<button type="button" class="openModal js-modalTrigger" data-modal-id="dialog1">Open Modal</button>
<dialog id="dialog1" aria-label="Modal name" class="dialog scrollControl js-modal">
  <div class="modal__inner js-modalContent">
    <h1 class="modal__title">Lorem ipsum dolor sit.</h1>
    <p class="modal__text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa cumque odit quaerat libero, facere tempora placeat molestias eum sed
      error rerum quisquam veritatis. Excepturi beatae ut vitae autem saepe expedita!
    </p>
    <button type="button" class="closeModal js-modalClose">Close Modal</button>
  </div>

H-ymt

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".js-details").forEach((el) => {
    const summary = el.querySelector(".js-summary")
    const content = el.querySelector(".js-content")

    summary.addEventListener("click", (event) => toggleContent(el, content, event))
  })
})

const animTiming = {

H-ymt

// ビューポートのサイズを取得する
const viewportSize = () => {
  const vw = window.innerWidth * 0.01
  const vh = window.innerHeight * 0.01

  document.documentElement.style.setProperty("--vw", `${vw}px`)
  document.documentElement.style.setProperty("--vh", `${vh}px`)
}

// 375px以下のビューポートを固定

H-ymt

// 三点リーダー
@mixin line-clamp($num, $num-sp: null) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
  overflow: hidden;

  @if $num-sp {
    @include sp {
      -webkit-line-clamp: $num-sp;