scoop-ui-refactor
重構 Scoop 新聞平台 UI
Scoop 新聞平台的前端介面過於擁擠，垂直空間浪費過多，且設計模式不一致。此技能提供結構化的工作流程，以壓縮佈局、改善密度、添加吸附式捲動導航，並在整個前端強制執行無表情符號的規範。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“scoop-ui-refactor”。 Refactor the Scoop home page to be more compact
预期结果:
- • Compressed lead story to title + summary + action row
- • Moved narrative blocks into compact summary cards
- • Converted contact sections to short action rows
- • View mode controls remain visible and separated
- • All existing features preserved (view modes, filters, modals)
正在使用“scoop-ui-refactor”。 Add TikTok-style snap scrolling to the feed
预期结果:
- • Implemented snap-y snap-mandatory on scroll container
- • Added wheel, touch, and arrow key navigation
- • Used isAnimating guard to prevent scroll clipping
- • Global header remains accessible at scroll boundaries
- • Feed actions and modals work as before
正在使用“scoop-ui-refactor”。 Clean up emojis from the codebase
预期结果:
- • Scanned UI components, logs, and documentation files
- • Replaced emoji with icon components or text labels
- • Verified no emoji remain in source code
- • Applied consistent no-emoji policy across all surfaces
安全审计
安全This is a pure prompt-based skill containing only workflow instructions for UI refactoring. No executable code, scripts, network calls, filesystem access, or external command execution capabilities. The static analyzer triggered false positives on markdown formatting and technical terminology. All 44 findings are dismissed as false positives.
风险因素
🌐 网络访问 (1)
📁 文件系统访问 (1)
质量评分
你能构建什么
重構新聞平台 UI
壓縮佈局並添加吸附式捲動，以改善 Scoop 新聞平台的使用者參與度和內容密度
改善地球互動體驗
添加清晰的國家焦點狀態和來源資訊，使互動地球更可用於新聞探索
強制執行品牌一致性
從 UI 和文件中移除表情符號，以在所有介面上保持專業、一致的外觀
试试这些提示
重構 Scoop 首頁以增加密度。將頭條故事壓縮為標題 + 摘要 + 操作列。將敘述區塊移至精簡的摘要卡片。保持視圖模式控制項可見且分離。
為 Scoop 動態消息添加吸附式捲動。使用全視口區段，搭配 snap-y snap-mandatory。支援滾輪、觸控和方向鍵。在頂層捲動時保持標題可存取。保留彈出視窗和動態消息操作。
改善 Scoop 的地球視角使用者體驗。添加清晰的國家焦點標題，顯示來源計數和熱門來源。添加可見的重置操作。移除所有國家旗幟表情符號。
從 Scoop 前端移除所有表情符號使用。使用 ripgrep 尋找 UI 字串、紀錄和文件中的表情符號。用圖示或文字標籤取代。確認程式碼庫中不再有表情符號。
最佳实践
- 使用帶有 min-h-0 的 flex 父元素，防止吸附式捲動裁剪內容
- 使用滾輪、觸控和方向鍵測試吸附式捲動，確認所有輸入方式都能運作
- 在重構後執行現有測試，確認彈出視窗和過濾器沒有回歸問題
避免
- 使用固定 h-screen 但未考慮周圍佈局（導致內容裁剪）
- 封鎖所有捲動事件，而不是只在吸附式捲動轉換期間阻止預設行為
- 僅在一個位置修改表情符號，但未檢查紀錄和文件