choimo-template

choimo シリーズの共通テンプレート。KASHITEから抽出。

使い方

# 1. テンプレートをコピー
cp -r choimo-template my-new-app
cd my-new-app

# 2. CLAUDE.md を編集（アプリ名、アクセントカラー、DB設計）
# 3. globals.css のアクセントカラーを変更
# 4. DB migration を作成
# 5. 法的ページのテキストを更新
# 6. pnpm install && pnpm dev

含まれるもの

• Kanso デザインシステム — CSS変数、Tailwind設定、フォント
• Supabase 認証 + RLS 基盤 — 匿名認証、セッション管理
• セキュリティ — CSP, Rate Limit, zod, DOMPurify
• Stripe 課金基盤 — Checkout, Webhook, Portal
• PWA — Serwist, オフライン対応
• CI/CD — GitHub Actions + Dependabot
• 法的ページテンプレート — 利用規約/プライバシー/特商法
• デプロイスクリプト

カスタマイズが必要な箇所

ファイル	変更内容
CLAUDE.md	アプリ名、タグライン、DB設計、UI仕様
src/app/globals.css	--accent カラーを変更
tailwind.config.ts	accent カラーを変更
src/app/layout.tsx	メタデータ（title, description）
supabase/migrations/	アプリ固有のテーブル
src/app/page.tsx	メイン画面
public/manifest.json	name, short_name, theme_color
法的ページ	テキスト内容

Kansoデザインシステム

日本のミニマリズム哲学「簡素」をデジタルプロダクトに。

/* Core */
--bg-primary: #FAFAF8;      /* 和紙の白 */
--text-primary: #1A1A1A;    /* 墨色 */
--accent: #E85D3A;          /* ← アプリごとに変更 */

/* Accents by app */
--accent-kashite: #E85D3A;  /* 朱色 */
--accent-docchi: #5B8DEF;   /* 藍色 */
--accent-matsu: #D4A853;    /* 金茶 */
--accent-kurikan: #4CAF82;  /* 抹茶 */
--accent-fkuro: #2D2D2D;    /* 墨黒 */

技術スタック

項目	選定
Framework	Next.js 15 (App Router)
Database	Supabase (PostgreSQL + RLS)
Auth	Supabase Anonymous Auth
Styling	Tailwind CSS v4
Payments	Stripe
Hosting	Vercel
PWA	Serwist

セキュリティ

• Row Level Security (RLS) on all tables
• CSP + security headers
• Rate limiting (60 req/min)
• zod input validation
• DOMPurify sanitization

License

MIT © masatonaut