AgentSkillsCN

scoop-ui-refactor

针对 Scoop 新闻平台，在 /home/bender/classwork/Thesis 中执行项目专属的 UI 重构工作流。适用于在更新 Scoop 前端布局、全球 UX、研究工作区以及品牌文档的同时，保留所有功能，并在 UI、日志与文档中严格执行“禁止使用表情符号”的政策。

SKILL.md
--- frontmatter
name: scoop-ui-refactor
description: 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 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.