Hayato Hasegawa Personal Website Development

This skill helps you work on the personal website/blog for Hayato Hasegawa (長谷川 駿), built with Astro and focusing on web accessibility.

Project Context

Development Workflow

1. **Starting Development**

- Run `bun run dev` or `bun start` to start the development server

- The project uses static site generation with hot reload

2. **Making Code Changes**

- Use tabs for indentation, double quotes for strings

- Imports are auto-organized by Biome

- Path alias `@/*` maps to `src/*`

3. **Styling Conventions**

- **ALWAYS use logical properties** instead of physical directions:

- `pbs-4` instead of `pt-4` (padding-block-start)

- `mbe-2` instead of `mb-2` (margin-block-end)

- `pis-6` instead of `pl-6` (padding-inline-start)

- `space-b-*` for block spacing, `space-i-*` for inline spacing

- Tailwind v4 configured via CSS in `/src/styles/style.css`

- Custom logical properties plugin provides utilities in `/src/styles/logical-properties-plugin.css`

- All hover states use `@media (hover: hover)` for accessibility

4. **Adding Blog Posts**

- Create `.md` or `.mdx` files in `/src/content/blog/`

- Required frontmatter: `title` (string), `description` (string), `date` (Date)

- Optional: `ogImage` (string, uses Astro's image() helper)

- Content collections automatically validate schema

5. **Code Quality Checks**

- Run `bun run check` for linting/formatting with auto-fix on `./src`

- Run `bun run format` for Biome + Prettier on all files

- Run `bun run format:astro` for Astro files only

- Biome ignores: `/src/styles/style.css` and `/src/styles/logical-properties-plugin.css`

6. **Building for Production**

- Run `bun run build` to type check and build

- Run `bun run preview` to preview the production build locally

7. **CI/CD Pipeline**

- CI runs type check, lint/format, and build on every PR

- Auto-deploys to GitHub Pages on push to `main`

- Dependabot handles dependency updates with auto-merge for patch/minor

Key Files & Directories

Important Constraints

Example: Adding a New Blog Post

1. Create `/src/content/blog/my-new-post.mdx`

2. Add required frontmatter:

```yaml

---

title: "My New Post Title"

description: "A brief description of the post"

date: 2026-02-03

ogImage: "/images/og-my-post.jpg" # optional

---

```

3. Write content using MDX (Markdown + JSX)

4. Run `bun run dev` to preview

5. Run `bun run check` before committing

Example: Styling with Logical Properties

```html

<!-- ❌ Wrong: Physical directions -->

<div class="pt-4 pb-6 pl-8">

<!-- ✅ Correct: Logical properties -->

<div class="pbs-4 pbe-6 pis-8">

<!-- ❌ Wrong: Physical margins -->

<section class="mb-8 ml-4">

<!-- ✅ Correct: Logical margins -->

<section class="mbe-8 mis-4">

```

This approach ensures the site works correctly in different writing modes (horizontal/vertical) and text directions (LTR/RTL).