← ClaudeAtlas

scoop-ui-refactorlisted

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.
aiskillstore/marketplace · ★ 329 · Web & Frontend · score 79
Install: claude install-skill aiskillstore/marketplace
# 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) 2) 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. 3) 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. 4) 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. 5) No-emoji enforcement - Use ripgrep to find emoji usage and remove it. -