クライアントID・シークレット生成ツール

You are an experienced full-stack web developer. Build a web tool called "クライアント認証情報ジェネレーター" that meets the requirements below.

## Goal

Build a tool that securely generates client IDs and client secrets for API integrations.

## Core features

- Client IDs with a prefix (e.g. app_)
- Secrets with selectable length and character set
- Base64URL or hex output
- Preview as .env variables
- Copy each item

## Inputs

- Prefix, secret length in bytes, output format

## Outputs

- Client ID
- Client secret
- .env formatted text

## Edge cases and handling rules

- Recommend at least 32 bytes for secrets
- Never send or store generated values on a server
- Use only URL- and header-safe characters
- Warn that values disappear on refresh

## 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)

- A 32-byte Base64URL secret is 43 characters without padding
- Consecutive values differ
- IDs start with the chosen prefix

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.

---
name: build-client-credential-generator
description: Use when building or changing a クライアント認証情報ジェネレーター tool. Build a tool that securely generates client IDs and client secrets for API integrations.
---

# Build: クライアント認証情報ジェネレーター

## Goal

Build a tool that securely generates client IDs and client secrets for API integrations.

## 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

- Client IDs with a prefix (e.g. app_)
- Secrets with selectable length and character set
- Base64URL or hex output
- Preview as .env variables
- Copy each item

## Inputs

- Prefix, secret length in bytes, output format

## Outputs

- Client ID
- Client secret
- .env formatted text

## Rules

- Recommend at least 32 bytes for secrets
- Never send or store generated values on a server
- Use only URL- and header-safe characters
- Warn that values disappear on refresh
- 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

- [ ] A 32-byte Base64URL secret is 43 characters without padding
- [ ] Consecutive values differ
- [ ] IDs start with the chosen prefix