jpskill.com
🎨 デザイン コミュニティ

scoop-ui-refactor

ScoopニュースプラットフォームのUIを、機能維持と絵文字禁止ルールを守りながら、レイアウト、グローブUX、リサーチ環境、ブランド資料などを刷新・改善するSkill。

📜 元の英語説明(参考)

Project-specific UI refactor workflow for the Scoop news platform in /home/bender/classwork/Thesis. Use when updating Scoop frontend layouts, globe UX, research workspace, and brand docs while preserving all features and enforcing a no-emoji policy across UI, logs, and docs.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ScoopニュースプラットフォームのUIを、機能維持と絵文字禁止ルールを守りながら、レイアウト、グローブUX、リサーチ環境、ブランド資料などを刷新・改善するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

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

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

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

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して scoop-ui-refactor.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → scoop-ui-refactor フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 この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 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Scoop UI リファクタリング

範囲

  • プロジェクトルート: /home/bender/classwork/Thesis
  • フロントエンド: frontend/app および frontend/components

必要な成果

  • 既存のすべての機能（表示モード、フィルター、リサーチ、モーダル）を維持します。
  • 密度を高め、不要な垂直方向のスペースを削減します。
  • 地球選択のフローを明確かつ使いやすいものにします。
  • グリッド表示にスナップスクロールを実装します。
  • グローバルヘッダーの可視性を維持しながら、フィードのスナップスクロールを維持します。
  • UI、ログ、およびドキュメントから絵文字を削除します。

ワークフロー

  1. 主要な画面のレビュー
  • frontend/app/page.tsx (ホームレイアウト)
  • frontend/components/globe-view.tsx および frontend/components/interactive-globe.tsx
  • frontend/app/search/page.tsx (リサーチ UI)
  • frontend/app/globals.css (テーマトークン)
  1. ホームレイアウトのリファクタリング
  • リードストーリーをタイトル + サマリー + アクション行に圧縮します。
  • 大きなナラティブブロックをコンパクトなサマリーカードに移動します。
  • 長い「Contact」セクションを短いアクション行に変換します。
  • 表示モードのコントロールとフィルターを目に見えるように分離して維持します。
  1. 地球表示 UX
  • 明確な国フォーカスヘッダーを追加します。
  • 選択された国のソース数と上位ソースを表示します。
  • 明確な「reset」アクションを表示したままにします。
  • すべての国旗の絵文字と絵文字の使用を削除します。
  1. リサーチワークスペース
  • 上部にクエリバーを使用します。
  • Brief モードと Flow モードを追加します（Flow は推論ステップを順番に表示します）。
  • 履歴またはチャットリストをサイドバーに移動します。
  • リサーチのビジュアルがメインフィードのスタイルと明確に区別されるようにします。
  1. 絵文字禁止の実施
  • ripgrep を使用して絵文字の使用箇所を検索し、削除します。
  • 絵文字をアイコンまたはラベルに置き換えます。
  • UI 文字列、ログ、およびドキュメントに適用します。
  1. フィード表示のスナップスクロール（TikTok スタイル）
  • snap-y snap-mandatory scroll-smooth を持つスクロールコンテナ内で、フルビューポートセクション（h-screen、snap-start）を使用します。
  • スナップトランジションが実際に発生した場合にのみ、wheel/touch で event.preventDefault() を呼び出すことによって、グローバルヘッダーを表示したままにします。最初/最後のアイテムにある場合は、デフォルトのスクロールを許可します。
  • activeIndex と isAnimating ガードを追跡します。次の/前のセクションに対して scrollIntoView を呼び出し、短いタイムアウト後にガードをクリアします。
  • ホイール、タッチ（deltaY しきい値）、および矢印キーをサポートします。誤ったスナップを避けるために、小さなデルタをデバウンスします。
  • モーダル、ブックマーク、いいね、およびお気に入りの動作を保持します。既存のフィードアクションを後退させないでください。

チェック

  • 表示モードが正しく切り替わることを確認します。
  • モーダルとソースフィルターが引き続き機能することを確認します。
  • リサーチ結果が埋め込みソースとともにレンダリングされることを確認します。
  • フィードのスナップスクロールがホイール、タッチ、および矢印キーで引き続き機能し、ヘッダーがトップレベルのスクロールでアクセス可能なままであることを確認します。

最近のコンテキスト

  • セクションが周囲のレイアウトを考慮せずに h-screen に固定されている場合、スナップスクロールフィードは下位のコンテンツをクリップします。フレキシブルな親要素（flex-1 h-full min-h-0）と、スクロールコンテナ内のセクションごとの h-full min-h-full snap-start を優先して、各記事がタイトルを隠さずに利用可能なビューポートの高さを使用するようにします。
  • 現在、Lint はフロントエンド全体で既存の警告/エラー（未使用の変数、フックの順序、明示的な any）で失敗します。修正は保留中であり、スナップスクロールレイアウトとは関係ありません。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Scoop UI Refactor

Scope

  • Project root: /home/bender/classwork/Thesis
  • Frontend: frontend/app and frontend/components

Required outcomes

  • Preserve all existing features (view modes, filters, research, modals).
  • Increase density and reduce empty vertical space.
  • Make globe selection flow clear and usable.
  • Have grid view have snap scroll.
  • Keep feed snap-scroll while preserving global header visibility.
  • Remove emojis from UI, logs, and docs.

Workflow

  1. Review primary surfaces
  • frontend/app/page.tsx (home layout)
  • frontend/components/globe-view.tsx and frontend/components/interactive-globe.tsx
  • frontend/app/search/page.tsx (research UI)
  • frontend/app/globals.css (theme tokens)
  1. Home layout refactor
  • Compress the lead story into title + summary + action row.
  • Move big narrative blocks into a compact summary card.
  • Convert long "Contact" sections into short action rows.
  • Keep view mode controls and filters visible and separated.
  1. Globe view UX
  • Add a clear country focus header.
  • Show source count and top sources for the selected country.
  • Keep a clear "reset" action visible.
  • Remove all country flag emojis and any emoji usage.
  1. Research workspace
  • Use a top query bar.
  • Add Brief and Flow modes (Flow shows reasoning steps in sequence).
  • Move history or chat list into a sidebar.
  • Ensure research visuals are distinct from the main feed styling.
  1. No-emoji enforcement
  • Use ripgrep to find emoji usage and remove it.
  • Replace emoji with icons or labels.
  • Apply to UI strings, logs, and docs.
  1. Feed view snap-scroll (TikTok style)
  • Use full-viewport sections (h-screen, snap-start) within a scroll container that has snap-y snap-mandatory scroll-smooth.
  • Keep the global header visible by only calling event.preventDefault() on wheel/touch when a snap transition actually occurs; allow default scrolling when at the first/last item.
  • Track activeIndex and an isAnimating guard; call scrollIntoView for the next/previous section and clear the guard after a short timeout.
  • Support wheel, touch (deltaY threshold), and arrow keys; debounce small deltas to avoid accidental snaps.
  • Retain modals, bookmarks, likes, and favorites behavior; do not regress existing feed actions.

Checks

  • Confirm view modes still switch correctly.
  • Confirm modals and source filters still work.
  • Confirm research results still render with embedded sources.
  • Confirm feed snap-scroll still works on wheel, touch, and arrow keys, and that the header remains accessible at top-level scroll.

Recent context

  • Snap-scroll feed clips lower content if sections are fixed to h-screen without accounting for surrounding layout; prefer a flex parent (flex-1 h-full min-h-0) and per-section h-full min-h-full snap-start inside the scroll container so each article uses the available viewport height without hiding titles.
  • Lint currently fails with pre-existing warnings/errors across the frontend (unused vars, hook ordering, explicit any); fixes are pending and not related to snap-scroll layout.