ui-before-after
画面の変更前後をスクリーンショットで見比べるページ(1 つの HTML)を作る。変わった所だけを切り出し、同じ枠の中で前後を切り替え、変わった範囲を赤い枠で示す。試しの実装の採否を見た目で決めてもらうとき、UI の変更を Owner に見せるときに使う。撮影は別(Playwright 等)で済ませておく。
Skill by ycookiey
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/ycookiey-ui-before-after
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend, testing
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
- Runs as
- Node.js package
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/ui-before-after
What's inside
- Skill name
ui-before-after- Description
- 画面の変更前後をスクリーンショットで見比べるページ(1 つの HTML)を作る。変わった所だけを切り出し、同じ枠の中で前後を切り替え、変わった範囲を赤い枠で示す。試しの実装の採否を見た目で決めてもらうとき、UI の変更を Owner に見せるときに使う。撮影は別(Playwright 等)で済ませておく。
- License
- unknown
- Instructions
- 39 lines in SKILL.md · view on GitHub
Before installing
- Ships executable scripts
Files (5)
- SKILL.md
- build.mjs · scripts/
- diff.mjs · scripts/
- diff.test.mjs · scripts/
- page.mjs · scripts/
The license isn't open source, so the instructions aren't shown here. Read SKILL.md on GitHub
More from ycookiey/dotfiles
- 0.561score
refine-japanese-prose
ycookiey
日本語の文章を推敲して平易にする。AI が書いたような言い回し、硬すぎる学術語・カタカナ語、英語の翻訳調、読みにくさを直す。既存の日本語文書(レポート・論文・ブログ・メール・応募フォーム・スライドと発表原稿など)を推敲・平易化したい、自然な日本語にしたいという依頼で起動。agent…
SkillAFreshness: AClaude Code +9 - 0.558score
ui-visual-check
ycookiey
UI要素の整列・余白・font-size等を視覚＋実測値で検証。Playwrightで高DPIスクショとDOM計測値(rect/computed style)を同時に取り、視覚と数値の両輪で突合する。生成ではなく検証用途。
SkillAFreshness: AClaude Code +9 - 0.557score
transcribe
ycookiey
音声・動画ファイルをfaster-whisper(large-v3-turbo)で文字起こしし、txt/srtを出力する。GPU優先・CPUフォールバック。録音・録画済みの音声・動画ファイル(mp4/mp3/wav/m4a/mkv/mov等)を文字にしたい・字幕(srt)を作りたいときに使う。
SkillAFreshness: AClaude Code +9 - 0.556score
pre-compact
ycookiey
Claude Codeの会話を /compact (Summarize up to here) で圧縮する前の準備。会話の重要情報を docs/ に永続化し、compact 起点として最適なメッセージ候補を3つ提示する。会話を圧縮・整理したいときに手動 (`/pre-compact`) で起動。
SkillAFreshness: AClaude Code +9 - 0.556score
japanese-preflight
ycookiey
日本語プレーンテキストを出力する直前の軽量セルフチェック。和欧混在スペース詰め・機種依存/禁止文字回避・AI smell 4 大パターン除去の必須ルール。**日本語プレーンテキストを含む応答を返す前に毎回目を通す事前ガイドライン**。詳細な事後推敲が必要なら refine-japanese-prose を使う。
SkillAFreshness: AClaude Code +9 - 0.555score
urleader
ycookiey
Agent teamのleadとして振る舞うモードを起動する。
SkillAFreshness: AClaude Code +9 - 0.553score
meta-update
ycookiey
学びを skill定義/CLAUDE.md/docs/コードへ永続化する。CLAUDE.mdの自己改善シグナル(再作業・誤誘導・行動指針・陳腐化)検知時、または手動起動時に使う。抽出→記録先判定→承認→反映を担う。
SkillAFreshness: AClaude Code +9 - 0.553score
doc-optimizer
ycookiey
Optimize docs for AI readability & token efficiency (High-Density Japanese).
SkillAFreshness: AClaude Code +9 - 0.553score
token-audit
ycookiey
Token consumption audit.
SkillAFreshness: AClaude Code +9 - 0.550score
codex-review
ycookiey
Codex CLIでレビュー・分析・相談を行う（読み取り専用）。
SkillAFreshness: AClaude Code +9 - 0.550score
cursor-review
ycookiey
Cursor Agent CLIでレビュー・分析・相談を行う（読み取り専用）。
SkillAFreshness: AClaude Code +9 - 0.550score
commit
ycookiey
git-commit-info を使ったトークン効率の良いcommitワークフロー
SkillAFreshness: AClaude Code +9
Signals
- Stars
- 0
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Oct 15, 2026 (15 days ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- License unknown
- Repository
- github.com/ycookiey/dotfiles
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from ycookiey
- 0.561score
refine-japanese-prose
ycookiey
日本語の文章を推敲して平易にする。AI が書いたような言い回し、硬すぎる学術語・カタカナ語、英語の翻訳調、読みにくさを直す。既存の日本語文書(レポート・論文・ブログ・メール・応募フォーム・スライドと発表原稿など)を推敲・平易化したい、自然な日本語にしたいという依頼で起動。agent…
SkillAFreshness: AClaude Code +9 - 0.558score
ui-visual-check
ycookiey
UI要素の整列・余白・font-size等を視覚＋実測値で検証。Playwrightで高DPIスクショとDOM計測値(rect/computed style)を同時に取り、視覚と数値の両輪で突合する。生成ではなく検証用途。
SkillAFreshness: AClaude Code +9 - 0.557score
transcribe
ycookiey
音声・動画ファイルをfaster-whisper(large-v3-turbo)で文字起こしし、txt/srtを出力する。GPU優先・CPUフォールバック。録音・録画済みの音声・動画ファイル(mp4/mp3/wav/m4a/mkv/mov等)を文字にしたい・字幕(srt)を作りたいときに使う。
SkillAFreshness: AClaude Code +9 - 0.556score
pre-compact
ycookiey
Claude Codeの会話を /compact (Summarize up to here) で圧縮する前の準備。会話の重要情報を docs/ に永続化し、compact 起点として最適なメッセージ候補を3つ提示する。会話を圧縮・整理したいときに手動 (`/pre-compact`) で起動。
SkillAFreshness: AClaude Code +9 - 0.556score
japanese-preflight
ycookiey
日本語プレーンテキストを出力する直前の軽量セルフチェック。和欧混在スペース詰め・機種依存/禁止文字回避・AI smell 4 大パターン除去の必須ルール。**日本語プレーンテキストを含む応答を返す前に毎回目を通す事前ガイドライン**。詳細な事後推敲が必要なら refine-japanese-prose を使う。
SkillAFreshness: AClaude Code +9 - 0.555score
urleader
ycookiey
Agent teamのleadとして振る舞うモードを起動する。
SkillAFreshness: AClaude Code +9
Cite this page
ui-before-after skill. Agent Mart. https://agentmart.dev/skills/ycookiey-ui-before-after (last updated 2026-10-24)