名前と生年月日を入力すると、暦の月で数えた月齢のかわいいカードを作成します。赤ちゃんによく使う微笑ましい言い回しから生まれたツールで、数字が大きくなっても楽しめます。
試験まであと何日か。100日目はいつか。赤ちゃんは生後何か月か。日付計算は1日の差が生まれやすいので、どのルールで数えているのかを知っておくことが大切です。
D-dayの数え方では、目標日をD、その前日をD-1、翌日をD+1と呼びます。残り日数は単純に「目標日 − 今日」です。2026年10月28日から見ると、12月25日はD-58です。
開始日：2026-03-01
経過日数：2026-06-08 は開始日から99日後
何日目か：2026-06-08 は100日目初日を数えるかどうかでカウントダウンや記念日の結果がどう変わるか、満年齢の計算方法、暦の月で数える月齢と月末の扱いを解説します。ガイドを読む →
自分用のバージョンが必要なら、作業指示プロンプトをAIチャットに貼り付けるか、スキルファイルをAIコーディングエージェントに保存してください。私たちが開発時に整理した機能、例外、テストケースが含まれています。
プロンプトとスキルは英語で提供しています。AIツールはどの言語でもよく理解できます。
Claude、ChatGPT、GeminiなどのAIチャットにそのまま貼り付けてください。
You are an experienced full-stack web developer. Build a web tool called "生後月齢カードメーカー" that meets the requirements below.
## Goal
Build a tool that calculates age in calendar months from a name and birth date and creates a shareable card image.
## Core features
- Calendar-month age
- Choose the reference date (default today)
- Generate a sentence such as 'Alex is 18 months old'
- Download the card as SVG/PNG
- Copy the sentence
## Inputs
- Name
- Birth date
- Reference date
## Outputs
- Age in months
- Share sentence
- Card image
## Edge cases and handling rules
- Subtract one month if the reference day is before the birth day
- Error when the reference date is before the birth date
- Document the rule for birthdays on the 31st
- Keep the card layout intact with long names
## Implementation requirements
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.
## Definition of done (test cases)
- Born 1975-10-22, reference 2026-08-12 → 609 months
- Born 15 May: 0 months on 14 June, 1 month on 15 June
- The downloaded image contains the name and months
First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.Claude CodeなどのAIコーディングエージェントで .claude/skills/build-baby-age-calculator/SKILL.md に保存すると、このツールを作る・直すたびに再利用できます。
---
name: build-baby-age-calculator
description: Use when building or changing a 生後月齢カードメーカー tool. Build a tool that calculates age in calendar months from a name and birth date and creates a shareable card image.
---
# Build: 生後月齢カードメーカー
## Goal
Build a tool that calculates age in calendar months from a name and birth date and creates a shareable card image.
## Workflow
1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.
## Core features
- Calendar-month age
- Choose the reference date (default today)
- Generate a sentence such as 'Alex is 18 months old'
- Download the card as SVG/PNG
- Copy the sentence
## Inputs
- Name
- Birth date
- Reference date
## Outputs
- Age in months
- Share sentence
- Card image
## Rules
- Subtract one month if the reference day is before the birth day
- Error when the reference date is before the birth date
- Document the rule for birthdays on the 31st
- Keep the card layout intact with long names
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
## Verification
- [ ] Born 1975-10-22, reference 2026-08-12 → 609 months
- [ ] Born 15 May: 0 months on 14 June, 1 month on 15 June
- [ ] The downloaded image contains the name and months