mcpField
T
tinyship-feature

tinyship-feature

github.com/tinyshipcn開発585 回インストール2 週間前に更新
リポジトリ

tinyship-feature について

TinyShip のモノレポ構成に沿って機能を追加する開発者向けガイドです。共有ロジック、API と UI、ローカライズ、権限、クレジット、検証手順を説明します。

主な機能

  1. 01機能の範囲と要件の整理
  2. 02層ごとの共有ロジックと設定の配置
  3. 03対応アプリフレームワークでの API と UI の追加
  4. 04英語・中国語翻訳の管理
  5. 05認証、権限、クレジットの統合
  6. 06型チェック、ビルド、手動テストによる検証

活用シーン

  1. 01TinyShip へのフルスタック機能の追加
  2. 02Next.js、Nuxt.js、TanStack Start でのルート実装
  3. 03認証やクレジット消費が必要な機能の開発
  4. 04プロジェクト規約に沿った新機能の確認と検証

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/tinyshipcn/tinyship-skills --skill tinyship-feature

インストール後、Claude Code で/tinyship-featureを入力して読み込まれたか確認します。

詳細

TinyShip の機能開発

モノレポのアーキテクチャパターンに従って、TinyShip プロジェクトに新機能を追加するためのステップごとのガイドです。

Step 0: 機能の範囲を決める

ユーザーに次の点を確認します。

  1. どの種類ですか？ UI のみ／API のみ／フルスタック
  2. どのような機能ですか？ 機能の簡単な説明
  3. 認証は必要ですか？ 保護する必要がありますか？
  4. クレジットを消費しますか？ AI 関連の場合、クレジットを請求しますか？

Step 1: 共通ロジック（libs/）

ドメイン／ビジネスロジックは libs/ に配置し、アプリ間で重複させないでください。

機能のチェックリスト全体についてはルートの AGENTS.md を、既存ライブラリのパターンについては libs/*/AGENTS.md を確認してください。

新しい lib を作成するか、既存のものを拡張するか：

  • 決済関連 → libs/payment/ を拡張
  • 認証関連 → libs/auth/ を拡張
  • AI 関連 → libs/ai/ を拡張
  • 新しいドメイン → AGENTS.md を含む libs/your-domain/ を作成

Step 2: 設定（config/）

機能に設定可能なオプションが必要な場合：

  1. 新しい設定ファイル config/yourFeature.ts を追加するか、既存のファイルを拡張します
  2. config.ts からエクスポートします
  3. 新しい環境変数があれば、説明を付けて env.example に追加します

Step 3: API ルート

有効なアプリに API エンドポイントを作成します。

Next.js：apps/next-app/app/api/your-feature/route.ts

import { yourLogic } from '@libs/your-domain';

export async function POST(req: Request) {
  // Auth check, input validation, call shared logic, return response
}

Nuxt.js：apps/nuxt-app/server/api/your-feature.post.ts

import { yourLogic } from '@libs/your-domain';

export default defineEventHandler(async (event) => {
  // Auth check, input validation, call shared logic, return response
});

TanStack Start：createServerFn または従来の API ルートを使用します。

Step 4: ページ／UI

フロントエンドのページを作成します。

Next.js：apps/next-app/app/[lang]/your-feature/page.tsx Nuxt.js：apps/nuxt-app/pages/your-feature.vue TanStack Start：apps/tanstack-app/src/routes/[lang]/your-feature.tsx

libs/react-shared/ の共通 React コンポーネントを使用します（Next + TanStack）。

Step 5: i18n

両方の言語ファイルに翻訳キーを追加します。

  1. libs/i18n/locales/en.ts — 英語（信頼できる唯一の情報源）
  2. libs/i18n/locales/zh-CN.ts — 中国語（同じ構造を反映）
// In en.ts
yourFeature: {
  title: 'Your Feature',
  description: 'Feature description',
  // ... all user-facing strings
}

コンポーネント内にユーザー向けの文字列をハードコードしないでください。

Step 6: 認証と権限

機能に認証が必要な場合：

Next.js：apps/next-app/middleware.ts のミドルウェア保護にルートを追加します Nuxt.js：apps/nuxt-app/server/middleware/permissions.ts で設定します TanStack Start：ルート定義に beforeLoad ガードを追加します

ロールベースのアクセス制御には、libs/permissions/ の CASL 権限システムを使用します。

Step 7: クレジット（該当する場合）

機能がクレジットを消費する場合：

  1. config/credits.ts でコストを定義します
  2. libs/credits の creditService.consumeCredits() を使用します
  3. libs/credits/utils.ts にトランザクション種別コードを追加します
  4. libs/i18n/locales/ にクレジットの説明の翻訳を追加します

Step 8: 検証

# Typecheck
pnpm --filter @tinyship/next-app typecheck  # adjust for your app

# Build
pnpm --filter @tinyship/next-app build

機能を手動でテストします。

  1. 新しいページに移動します
  2. API エンドポイントをテストします
  3. 認証による保護が機能することを確認します
  4. 言語を切り替えて i18n をテストします

TinyShip リポジトリの参考ファイル

  • AGENTS.md — ルートの機能チェックリスト（決定版の参考資料）
  • libs/*/AGENTS.md — ライブラリごとのパターンとアーキテクチャ
  • .cursor/rules/project-structure.mdc — モノレポの構成ガイド
  • libs/i18n/AGENTS.md — i18n の規約
  • libs/permissions/AGENTS.md — 権限システムのガイド

コメント

Markdown 対応