jpskill.com
🛠️ 開発・MCP コミュニティ

quetrex-development-workflow

Each project card should show the current month's API costs with a small trend indicator (up/down arrow).

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o quetrex-development-workflow.zip https://jpskill.com/download/17465.zip && unzip -o quetrex-development-workflow.zip && rm quetrex-development-workflow.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17465.zip -OutFile "$d\quetrex-development-workflow.zip"; Expand-Archive "$d\quetrex-development-workflow.zip" -DestinationPath $d -Force; ri "$d\quetrex-development-workflow.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して quetrex-development-workflow.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → quetrex-development-workflow フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Quetrex 開発ワークフロー Skill

目的: 完全な Quetrex プロジェクトのコンテキストで新しい Claude Code セッションをブートストラップし、効率的な issue 主導の開発を可能にします。

使用するタイミング:

  • Quetrex で作業する新しい Claude Code セッションの開始時
  • 保留中の作業を理解する必要がある場合
  • AI エージェントの自動化のために issue を作成する場合
  • 次に何に取り組むかを決定する場合

クイックリファレンス

主要なコマンド

# 保留中の issue をクエリ
gh issue list --label "ai-feature" --state open

# 最近完了した作業をクエリ
gh pr list --state merged --limit 10

# AI エージェントの issue を作成
gh issue create --template ai-feature.md --label ai-feature

# ワークフローを手動でトリガー
gh workflow run "Quetrex AI Agent Worker" -f issue_number=123

重要なファイル

ファイル 目的
CLAUDE.md プロジェクトのコンテキスト (すべてのセッションでロード)
.quetrex/status.yml 現在のロードマップの位置
docs/PROJECT-CHECKLIST.md 包括的なタスクチェックリスト
.github/workflows/ai-agent.yml エージェントの自動化ワークフロー
.claude/scripts/ai-agent-worker.py エージェントの実行スクリプト

1. Quetrex とは?

Quetrex は、音声ファーストの AI エージェントコントロールセンターであり、複数の AI 搭載プロジェクトを管理するためのミッションコントロールダッシュボードです。

主要な機能

  • 音声駆動の要件収集 (OpenAI Realtime API)
  • 自動スペック生成 (Claude AI)
  • バージョニングによるスペック承認ワークフロー
  • GitHub Actions による自動エージェント生成
  • リアルタイムのモニタリングと分析
  • コスト追跡と管理
  • セキュリティファーストのアーキテクチャ (3 フェーズモデル)

技術スタック

  • フロントエンド: Next.js 15.5, React 19, TypeScript (strict), TailwindCSS, ShadCN UI
  • バックエンド: Next.js API Routes, Drizzle ORM, PostgreSQL
  • AI/音声: Claude Sonnet 4.5, OpenAI Realtime API, Whisper, TTS
  • インフラストラクチャ: Vercel Edge Runtime, Docker コンテナ, GitHub Actions

2. 自動化の仕組み

トリガーフロー

1. GitHub Issue を作成
   └─> "AI Feature Request" テンプレートを使用
   └─> "ai-feature" ラベルを追加

2. GitHub Actions がトリガー
   └─> .github/workflows/ai-agent.yml がアクティブ化
   └─> 安全な Docker コンテナで実行

3. エージェントワーカーが実行
   └─> issue の詳細を取得
   └─> .quetrex/memory/ からプロジェクトのコンテキストをロード
   └─> 包括的なプロンプトを構築
   └─> Claude Code CLI 経由で実行

4. 実装フェーズ
   └─> エージェントは特殊なサブエージェントを使用:
       - orchestrator (複雑な機能)
       - test-writer (TDD ファースト)
       - implementation (コード)
       - code-reviewer (品質)

5. 品質ゲート
   └─> PreToolUse: 危険なコマンドをブロック
   └─> PostToolUse: 変更を検証
   └─> Stop: 回避不能な最終ゲート
   └─> テスト、カバレッジ、リンティング、ビルド

6. Pull Request が作成
   └─> 機能ブランチがプッシュ
   └─> 詳細な説明付きの PR
   └─> 人間のレビューの準備完了

issue ごとの制約

  • 最大実行時間: 45 分
  • 最大 API コール数: 150
  • 最大ファイル変更数: 75
  • 必要なテスト: 設定可能 (現在は false)

3. 効果的な issue の作成

issue テンプレートの場所

.github/ISSUE_TEMPLATE/ai-feature.md

優れた AI エージェント issue の条件

行うこと:

  • 何を構築する必要があるかを具体的に記述する
  • 受け入れ基準をチェックボックスとしてリストする
  • 従うべき既存のファイル/パターンを参照する
  • テスト要件を指定する
  • 優先度レベルを含める

行わないこと:

  • 曖昧にする ("より良くする")
  • 複数の無関係なタスクを組み合わせる
  • 受け入れ基準を省略する
  • ai-feature ラベルを追加するのを忘れる

構造化された issue の例

## 概要
ダッシュボードのプロジェクトカードにコスト追跡の表示を追加する

## 説明
各プロジェクトカードには、当月の API コストを
小さなトレンドインジケーター (上/下矢印) と共に表示する必要があります。

## 受け入れ基準
- [ ] コストは USD 形式 ($X.XX) で表示される
- [ ] トレンド矢印は先週からの増減を示す
- [ ] ツールチップにはプロバイダー (OpenAI/Anthropic) 別の内訳が表示される
- [ ] React Query 経由で 5 分ごとに更新される

## 技術的なコンテキスト
**関連ファイル:**
- `src/components/ProjectCard.tsx` - コスト表示を追加
- `src/services/cost-tracker.ts` - 既存のサービスを使用
- `src/hooks/useDashboard.ts` - コストクエリを追加

**従うべきパターン:**
- ダッシュボードヘッダーの既存の統計表示パターンを使用する
- SettingsPanel からコスト形式に従う

## テスト要件
- [x] ユニットテストが必要 (コスト形式)
- [x] 統合テストが必要 (API 統合)
- [ ] E2E テストが必要
- [ ] ビジュアルリグレッションテストが必要

## 優先度
- [x] P1 - 高 (すぐに必要)

4. 現在のプロジェクトステータス

ライブ状態をクエリする方法

# AI エージェントの準備ができたオープンな issue
gh issue list --label "ai-feature" --state open --json number,title,labels

# 最近完了した作業
gh pr list --state merged --limit 5 --json number,title,mergedAt

# 現在のブランチステータス
git status
git log --oneline -5

ステータスファイルの場所

.quetrex/status.yml - 以下のスナップショットを保持:

  • 現在のフェーズ
  • アクティブな重点分野
  • 完了率
  • 最近のマイルストーン

プロジェクトチェックリスト

docs/PROJECT-CHECKLIST.md - 包括的な追跡:

  • カテゴリ別の機能完了
  • ブロッカーと依存関係
  • 優先度レベル
  • 時間見積もり

5. アーキテクチャの決定

知っておくべき主要な ADR

ADR 決定 ステータス
ADR-001 ブラウザネイティブのエコーキャンセレーション 承認済み
ADR-002 Edge Runtime 用の Drizzle ORM 承認済み
ADR-006 Anthropic SDK よりも Claude Code CLI アクティブ

セキュリティアーキテクチャ (3 フェーズ)

  1. フェーズ 1 (完了): Docker コンテナ化

    • 読み取り専用ファイルシステム、非 root ユーザー
    • リソース制限、ケーパビリティの削除
  2. フェーズ 2 (本番環境): 認証情報プロキシ

    • コンテナ環境に認証情報なし
    • Unix ソケットの検証、監査ログ
  3. フェーズ 3 (2026 年第 1 四半期): gVisor 移行

    • 最大限の分離のためのユーザー空間カーネル

エージェント実行アーキテクチャ

直接 Anthropic SDK ではなく、Claude Code CLI を使用します。

理由:

  • 組み込みの特殊化

(原文がここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Quetrex Development Workflow Skill

Purpose: Bootstrap new Claude Code sessions with complete Quetrex project context and enable efficient issue-driven development.

When to Use:

  • At the start of any new Claude Code session working on Quetrex
  • When you need to understand what work is pending
  • When creating issues for AI agent automation
  • When deciding what to work on next

Quick Reference

Key Commands

# Query pending issues
gh issue list --label "ai-feature" --state open

# Query recent completed work
gh pr list --state merged --limit 10

# Create issue for AI agent
gh issue create --template ai-feature.md --label ai-feature

# Trigger workflow manually
gh workflow run "Quetrex AI Agent Worker" -f issue_number=123

Critical Files

File Purpose
CLAUDE.md Project context (loaded every session)
.quetrex/status.yml Current roadmap position
docs/PROJECT-CHECKLIST.md Comprehensive task checklist
.github/workflows/ai-agent.yml Agent automation workflow
.claude/scripts/ai-agent-worker.py Agent execution script

1. What is Quetrex?

Quetrex is a voice-first AI agent control center - a mission control dashboard for managing multiple AI-powered projects.

Core Capabilities

  • Voice-driven requirements gathering (OpenAI Realtime API)
  • Automatic spec generation (Claude AI)
  • Spec approval workflow with versioning
  • Automated agent spawning via GitHub Actions
  • Real-time monitoring and analytics
  • Cost tracking and controls
  • Security-first architecture (3-phase model)

Tech Stack

  • Frontend: Next.js 15.5, React 19, TypeScript (strict), TailwindCSS, ShadCN UI
  • Backend: Next.js API Routes, Drizzle ORM, PostgreSQL
  • AI/Voice: Claude Sonnet 4.5, OpenAI Realtime API, Whisper, TTS
  • Infrastructure: Vercel Edge Runtime, Docker containers, GitHub Actions

2. How the Automation Works

Trigger Flow

1. Create GitHub Issue
   └─> Use "AI Feature Request" template
   └─> Add "ai-feature" label

2. GitHub Actions Triggers
   └─> .github/workflows/ai-agent.yml activates
   └─> Runs in secure Docker container

3. Agent Worker Executes
   └─> Fetches issue details
   └─> Loads project context from .quetrex/memory/
   └─> Builds comprehensive prompt
   └─> Executes via Claude Code CLI

4. Implementation Phase
   └─> Agent uses specialized sub-agents:
       - orchestrator (complex features)
       - test-writer (TDD first)
       - implementation (code)
       - code-reviewer (quality)

5. Quality Gates
   └─> PreToolUse: Blocks dangerous commands
   └─> PostToolUse: Validates changes
   └─> Stop: Unbypassable final gate
   └─> Tests, coverage, linting, build

6. Pull Request Created
   └─> Feature branch pushed
   └─> PR with detailed description
   └─> Ready for human review

Constraints Per Issue

  • Max execution time: 45 minutes
  • Max API calls: 150
  • Max file changes: 75
  • Tests required: Configurable (currently false)

3. Creating Effective Issues

Issue Template Location

.github/ISSUE_TEMPLATE/ai-feature.md

What Makes a Good AI-Agent Issue

DO:

  • Be specific about what needs to be built
  • List acceptance criteria as checkboxes
  • Reference existing files/patterns to follow
  • Specify testing requirements
  • Include priority level

DON'T:

  • Be vague ("make it better")
  • Combine multiple unrelated tasks
  • Skip acceptance criteria
  • Forget to add ai-feature label

Example Well-Structured Issue

## Summary
Add cost tracking display to project cards in dashboard

## Description
Each project card should show the current month's API costs
with a small trend indicator (up/down arrow).

## Acceptance Criteria
- [ ] Cost displayed in USD format ($X.XX)
- [ ] Trend arrow shows increase/decrease from last week
- [ ] Tooltip shows breakdown by provider (OpenAI/Anthropic)
- [ ] Updates every 5 minutes via React Query

## Technical Context
**Relevant Files:**
- `src/components/ProjectCard.tsx` - Add cost display
- `src/services/cost-tracker.ts` - Use existing service
- `src/hooks/useDashboard.ts` - Add cost query

**Patterns to Follow:**
- Use existing stats display pattern from dashboard header
- Follow cost formatting from SettingsPanel

## Testing Requirements
- [x] Unit tests required (cost formatting)
- [x] Integration tests required (API integration)
- [ ] E2E tests required
- [ ] Visual regression tests required

## Priority
- [x] P1 - High (needed soon)

4. Current Project Status

How to Query Live State

# Open issues ready for AI agent
gh issue list --label "ai-feature" --state open --json number,title,labels

# Recently completed work
gh pr list --state merged --limit 5 --json number,title,mergedAt

# Current branch status
git status
git log --oneline -5

Status File Location

.quetrex/status.yml - Maintained snapshot of:

  • Current phase
  • Active focus areas
  • Completion percentages
  • Recent milestones

Project Checklist

docs/PROJECT-CHECKLIST.md - Comprehensive tracking:

  • Feature completion by category
  • Blockers and dependencies
  • Priority levels
  • Time estimates

5. Architecture Decisions

Key ADRs to Know

ADR Decision Status
ADR-001 Browser native echo cancellation Accepted
ADR-002 Drizzle ORM for Edge Runtime Accepted
ADR-006 Claude Code CLI over Anthropic SDK Active

Security Architecture (3-Phase)

  1. Phase 1 (Complete): Docker containerization

    • Read-only filesystem, non-root user
    • Resource limits, capability dropping
  2. Phase 2 (In Production): Credential proxy

    • No credentials in container environment
    • Unix socket validation, audit logging
  3. Phase 3 (Q1 2026): gVisor migration

    • User-space kernel for maximum isolation

Agent Execution Architecture

We use Claude Code CLI, NOT direct Anthropic SDK.

Reasons:

  • Built-in specialized agents (orchestrator, test-writer, code-reviewer)
  • Quality hooks (PreToolUse, PostToolUse, Stop)
  • Automatic updates from Anthropic
  • No maintenance burden for tool execution

See: .claude/docs/ARCHITECTURE-AGENT-WORKER.md


6. Quality Enforcement

6-Layer Defense System

  1. PreToolUse Hook - Blocks dangerous commands
  2. PostToolUse Hook - Validates every file change
  3. Stop Hook - Unbypassable quality gate
  4. TypeScript Strict - No any, no @ts-ignore
  5. Test Coverage - 75%+ overall, 90%+ services
  6. CI/CD - Prevents merge if any check fails

Test Requirements

Overall:        75%+ (enforced)
src/services/: 90%+ (enforced)
src/utils/:    90%+ (enforced)
Components:    60%+ (enforced)

TDD Workflow (Mandatory)

  1. Write test describing behavior
  2. Verify test FAILS (red)
  3. Write minimal code to pass
  4. Verify test PASSES (green)
  5. Refactor while keeping green

7. Development Patterns

File Organization

src/
├── app/           # Next.js App Router pages
├── components/    # React components
├── services/      # Business logic (90%+ coverage)
├── hooks/         # Custom React hooks
├── lib/           # Third-party integrations
├── db/            # Database schema (Drizzle)
└── schemas/       # Zod validation schemas

Naming Conventions

  • Components: PascalCase.tsx
  • Services: kebab-case.ts
  • Hooks: useCamelCase.ts
  • Types: Adjacent types.ts or inline

Import Order

  1. External packages
  2. Internal components (@/components/)
  3. Hooks (@/hooks/)
  4. Services (@/services/)
  5. Types

8. Common Workflows

Starting a New Feature

# 1. Check what's pending
gh issue list --label "ai-feature" --state open

# 2. If nothing suitable, create new issue
gh issue create --template ai-feature.md

# 3. Add label to trigger automation
gh issue edit <number> --add-label "ai-feature"

# 4. Or work on it directly from here
# (for complex features or when you want more control)

Reviewing AI Agent Work

# Check recent PRs
gh pr list --author "github-actions[bot]" --state open

# Review specific PR
gh pr view <number>
gh pr diff <number>

# Merge if approved
gh pr merge <number> --squash

Debugging Failed Runs

# List recent workflow runs
gh run list --workflow="ai-agent.yml" --limit 5

# View specific run
gh run view <run-id>

# Download logs
gh run download <run-id> -n agent-logs-<issue-number>

9. Memory System

Location: .quetrex/memory/

File Purpose
patterns.md Architectural patterns to follow
project-overview.md High-level project context
PHASE_3_EVOLVER.md Phase 3 documentation
ARCHITECTURE-INTELLIGENCE-SYSTEM.md Architecture intelligence

Status Tracking: .quetrex/status.yml

Updated after each session with:

  • Current focus area
  • Recent completions
  • Pending priorities
  • Blockers

10. Getting Help

Documentation Locations

  • Architecture: docs/architecture/
  • Features: docs/features/
  • Roadmap: docs/roadmap/
  • ADRs: docs/decisions/

Key Documents

Document Purpose
CLAUDE.md Primary project context
docs/PROJECT-CHECKLIST.md Comprehensive task list
docs/AI-AGENT-AUTOMATION-STATUS.md Agent system status
docs/CONTRIBUTING.md Development standards

Session Checklist

When starting a new session:

  • [ ] Run /new-context to load this skill and query state
  • [ ] Review pending issues (gh issue list --label ai-feature)
  • [ ] Check recent PRs for context on recent work
  • [ ] Decide: Create issue for agent OR work directly
  • [ ] Follow TDD: Write tests FIRST
  • [ ] Use specialized agents for complex features
  • [ ] Update .quetrex/status.yml before ending session

Last Updated: 2025-11-26 Created by Glen Barnhardt with help from Claude Code