Claude Code + frontend-design · 個人ブログとポートフォリオ

サンドボックス化されたプレビューです。ページのスクリプトは実行されますが、ページからこのサイト、Cookie、ストレージにはアクセスできないため、localStorage に依存する機能は動作が異なる場合があります。

スクロール録画

デスクトップ幅でページをスクロールした録画で、スクリーンショットでは見えない動きを示します。再生を押したときにだけ動画を読み込みます。

投票

この結果のほうが良いと思いますか？下の 👍 を押してください。投票には GitHub アカウントが必要です。票はこのリポジトリの GitHub Discussions にリアクションとして保存され、セルごとに 1 つのスレッドをすべての言語で共有します。

👍 0 前回のビルド時点。数時間ごとに更新されます

実行の詳細

ステータス: 成功
エージェント: claude-code 2.1.308
モデル: claude-opus-5-5
Effort: high
プロンプト: blog-portfolio v1
Skill の指定文: Use the frontend-design skill.
Skill のソース: https://github.com/anthropics/skills skills/frontend-design
Skill のコミット: dbd4588f9e
Skill の取得方法: git, 2026-10-25
インストール先: .claude/skills/frontend-design
Skill の発動: はい
根拠: skill_tool_calls: 1, skill_content_loaded: 1, skill_md_reads: 0
使用した同梱 skill: なし
開始: 2026-10-26 03:17:35Z
所要時間: 6m 29s
終了状態: コード 0
試行: 1
トークン: input_tokens: 28, cache_creation_input_tokens: 72,166, cache_read_input_tokens: 743,387, output_tokens: 37,752
ターン数: 30
コスト: $1.48
アクティビティ: Skill 1, Write 1, Bash 9, Read 13
隔離: すべてのチェックに合格
✓ init_event_present
✓ only_builtin_plugins
✓ no_synced_plugins
✓ no_mcp_servers
✓ no_plugin_skills
✓ config_dir_was_empty
✓ home_had_only_throwaway_keychain
✓ real_keychain_unchanged
✓ auto_memory_disabled
✓ skill_listed
外部参照: https://fonts.googleapis.com link[rel=preconnect]
https://fonts.gstatic.com link[rel=preconnect]
https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..500&display=swap link[rel=stylesheet]
index.html の静的スキャン結果（run.json より）。
ルール違反: なし
出力: index.html, 47.7 KB
スクリーンショット（デスクトップ）: 1440×900, ページの高さ 7878 px, リモートリクエスト 5 件
スクリーンショット（モバイル）: 390×844, ページの高さ 10528 px, リモートリクエスト 5 件
ホスト: Darwin 25.6.0, arm64, node v22.18.0

Claude Code + frontend-design · 個人ブログとポートフォリオ

スクロール録画

アクセシビリティ スキャン

投票

実行の詳細

アクセシビリティスキャン