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

サンドボックス化されたプレビューです。ページのスクリプトは実行されますが、ページからこのサイト、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-ui-engineering skill.
Skill のソース: https://github.com/addyosmani/agent-skills skills/frontend-ui-engineering
Skill のコミット: aeac41d4d0
Skill の取得方法: git, 2026-10-26
インストール先: .claude/skills/frontend-ui-engineering
Skill の発動: はい
根拠: skill_tool_calls: 1, skill_content_loaded: 1, skill_md_reads: 0
使用した同梱 skill: なし
開始: 2026-10-26 06:31:57Z
所要時間: 5m 19s
終了状態: コード 0
試行: 1
トークン: input_tokens: 32, cache_creation_input_tokens: 67,602, cache_read_input_tokens: 857,447, output_tokens: 33,599
ターン数: 23
コスト: $1.38
アクティビティ: Skill 1, Bash 7, Write 1, Read 12
隔離: すべてのチェックに合格
✓ 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=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap link[rel=stylesheet]
index.html の静的スキャン結果（run.json より）。
ルール違反: なし
出力: index.html, 58.6 KB
スクリーンショット（デスクトップ）: 1440×900, ページの高さ 7452 px, リモートリクエスト 5 件
スクリーンショット（モバイル）: 390×844, ページの高さ 10494 px, リモートリクエスト 5 件
ホスト: Darwin 25.6.0, arm64, node v22.18.0

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

スクロール録画

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

投票

実行の詳細

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