本文へ移動
cccskills
無料GitHub で公開

my-ccv

Manage Claude Code Viewer (CCV): preview in-progress CCV changes on ccv-preview, register HTML artifacts, download files, or schedule jobs via CCV local API. Use when user asks for CCV preview, ccv-preview, browser visual QA, UI/UX validation, CCV artifacts, CCV file download, or CCV scheduler jobs. Treat preview/プレビュー as the CCV app preview service first; use artifacts only when the user explicitly asks for artifact/dashboard/report HTML. Do NOT use for generic web app previews outside CCV, production deployment, Cloudflare config, or Anthropic remote triggers.

インストール方法を見る

含まれるファイル(4)

  • SKILL.md5.4 KB
  • references/download.md2.6 KB
  • references/preview.md7.1 KB
  • references/schedule.md4.1 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

CCV — Claude Code Viewer Management

CCV (Claude Code Viewer) の preview 環境、アーティファクト登録、ファイルダウンロード、リモートエージェントのスケジュール管理を行う統合スキル。

CCV Server

全ワークフロー共通。API を呼ぶ前に base URL を一度だけ定義する(ポートは CCV_PORT 環境変数で上書き可、デフォルト 3434):

BASE_URL="http://localhost:${CCV_PORT:-3434}"

Argument Routing

Route based on $ARGUMENTS:

  1. preview ..., ccv-preview ..., プレビュー ..., ブラウザ確認 ..., visual/UX QA for CCV: → Read references/preview.md and follow the CCV App Preview workflow
  2. schedule ...: → Read references/schedule.md and follow the Schedule workflow
  3. download ... or dl ...: → Read references/download.md and follow the File Download workflow
  4. artifact ... or explicit dashboard/report/HTML artifact creation: → Artifact workflow (below)
  5. no argument or other: → Artifact workflow (below)

Preview First Rule

  • 「preview」「プレビュー」だけなら、まず CCV app preview service (ccv-preview) と解釈する
  • HTML artifact preview と解釈するのは、ユーザーが artifact、dashboard、report、HTML、アーティファクト登録 を明示した場合だけ
  • CCV 以外の一般的な Web アプリ preview には使わない

Artifact Workflow

CCV ローカル API を使って HTML アーティファクトを作成・登録する。

Step 1: Identify the project

curl -s "${BASE_URL}/api/projects" | jq .
  • meta.projectPath で現在のプロジェクトディレクトリと照合し、対象の id を特定する
  • 現在の作業ディレクトリ (pwd) と一致するプロジェクトを自動選択する
  • 一致しない場合はユーザーに確認する

Step 2: Generate HTML content

ユーザーの要求に応じて HTML を生成する。典型的な用途:

  • 定性評価ダッシュボード: データの可視化、比較表
  • レポート: 分析結果のまとめ
  • HTML モックアップ: UI の静的確認用 HTML

HTML の要件:

  • 単一ファイルで完結する(外部リソースへの依存なし)
  • インラインCSS/JSを使用する
  • <html>, <head>, <body> タグを含む完全なHTML文書にする
  • 日本語コンテンツの場合は <meta charset="utf-8"> を含める

Step 3: Register the artifact

リクエストボディ:

{
  "name": "DISPLAY_NAME",
  "fileName": "FILENAME.html",
  "html": "FULL_HTML_STRING"
}
  • name: ユーザーに表示される名前(日本語可)
  • fileName: 保存時のファイル名(英数字・ハイフン推奨、.html 拡張子必須)
  • html: 完全な HTML 文字列

HTML が大きい場合は必ず一時ファイル経由で送信する。JSON の構築には jq を使い、エスケープ漏れを防ぐ。一時ファイル名は $$-$RANDOM で衝突を避ける:

CCV_JSON="/tmp/ccv-artifact-$$-$RANDOM.json"
jq -n --arg name "$NAME" --arg fileName "$FILENAME" --arg html "$(cat /tmp/artifact.html)" \
  '{name: $name, fileName: $fileName, html: $html}' > "$CCV_JSON"
curl -s -X POST "${BASE_URL}/api/projects/{projectId}/artifacts" \
  -H 'Content-Type: application/json' -d @"$CCV_JSON"
rm -f "$CCV_JSON"

Step 4: Confirm and report

登録成功後、以下を報告する:

  1. アーティファクト ID(レスポンスの id)
  2. HTML 表示 URL: ${BASE_URL}/api/projects/{projectId}/artifacts/{artifactId}/html
  3. 登録内容の概要

Artifact API Reference

MethodPathDescription
GET/api/projectsプロジェクト一覧
GET/api/projects/:projectId/artifactsアーティファクト一覧
POST/api/projects/:projectId/artifacts新規作成
PUT/api/projects/:projectId/artifacts/:artifactId更新(name, fileName, html すべて省略可)
DELETE/api/projects/:projectId/artifacts/:artifactId削除
GET/api/projects/:projectId/artifacts/:artifactId/htmlHTML 本体取得

Artifact Error Handling

  • CCV サーバーが起動していない場合: curl: (7) Failed to connect → ユーザーに CCV サーバーの起動を案内する
  • プロジェクトが見つからない場合: 一覧を表示してユーザーに選択を求める

Artifact Notes

  • 既存アーティファクトの更新は PUT を使い、変更したいフィールドのみ送信する
  • list サブコマンド的に使われた場合は GET で一覧を返す
  • レスポンスの id は ULID 形式で自動生成される

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

my-agent

無料日本語概要

Delegate tasks to an external CLI agent (OpenAI Codex, Google Gemini, or Claude Code) for second opinions or parallel execution. Use when the user explicitly mentions "codex", "gemini", or "claude" or asks to delegate work to one of them (e.g., "codexで実行", "codexに聞いて", "geminiで実行", "Geminiに聞いて", "claudeで実行", "Claudeに聞いて", "run with codex", "ask gemini", "ask claude"). Also use when the user mentions Claude's "fable" model alias for delegation or consultation (e.g., "fableで実行", "fableに相談", "Fableに聞いて", "ask fable"). Do NOT use for general coding tasks that don't mention codex, gemini, claude, or fable.

Ynakatsuka/dotfiles42026年10月4日 更新

my-bulk-read

無料日本語概要

Delegate reading large or multiple files to the `bulk-read` command, which sends the files to a cheaper reader model and returns only its answer. Use when a question needs the content of a file over about 350 lines or of several files at once, when a PreToolUse guard denied an unbounded read, or when the user says "bulk read", "一括読み込み", or "まとめて読んで". Do NOT use for files you are about to edit, for subtle correctness reasoning such as concurrency bugs, or for short files that fit a bounded read.

Ynakatsuka/dotfiles42026年10月4日 更新

my-code-write

無料日本語概要

Delegate writing predictable code to the `code-write` command, which has a cheaper writer model write the target file directly so the generated code never enters your context. Use for tests, scaffolding, fixtures, boilerplate, or a new file that copies an existing pattern, and when the user says "code write", "生成を委譲", or "雛形を書かせて". Do NOT use for design decisions, changes to public contracts or shared modules, edits inside an existing file that needs judgment, or logic with subtle correctness requirements.

Ynakatsuka/dotfiles42026年10月4日 更新

Disciplined diagnosis workflow for hard, intermittent, or multi-component bugs and performance regressions: inspect logs and existing evidence, build a feedback loop, test falsifiable hypotheses, instrument gaps, and verify the outcome. Use when the root cause is unclear, reproduction is unreliable, several causes or components are plausible, or performance has regressed. Do NOT use for obvious single-cause errors, straightforward configuration or syntax fixes, planned feature work, or broad architecture review. Diagnosis-only requests stop after reporting the root cause and evidence; apply a fix only when the user requested one.

日本語の概要は準備中です。原文の説明を表示しています。

Ynakatsuka/dotfiles42026年10月4日 更新

my-epic

無料

Manual-only orchestrator for medium-to-large software development. Turns a broad goal into PR-sized and operational nodes with verification gates, then coordinates approved execution across follow-up prompts. Activate only when the user explicitly invokes my-epic; once activated, keep orchestrating that epic for the rest of the session. Do NOT use for an uninvoked planning or implementation request, a single small bug fix, one obvious PR, pure code review, ordinary SDD work that fits in one spec/PR, or implementing an epic during the same first call that created it.

日本語の概要は準備中です。原文の説明を表示しています。

Ynakatsuka/dotfiles42026年10月4日 更新

my-handoff

無料日本語概要

Hand off a task with only the context needed to continue in a fresh session. Use for "handoff", "引き継ぎ", "別セッションへ渡す", or "別マシンで続ける". The orca subcommand launches an independent Orca workspace or terminal tab; without it, produce a paste-ready prompt backed by a verified remote branch or PR. Do not launch sessions for capability questions or design requests.

Ynakatsuka/dotfiles42026年10月4日 更新

Ynakatsuka のスキルをすべて見る

このスキルの問題を報告する