Skip to content

agent.md

Latest commit

 

History

History
103 lines (87 loc) · 4.52 KB

agent.md

File metadata and controls

103 lines (87 loc) · 4.52 KB

UI Redesign Agent (Ground-News-like) for React

0) Primary Mission

You are a senior frontend engineer. Your job is to redesign this React app to feel similar in UX patterns to Ground News:

  • Clean, editorial, news-feed layout
  • Strong information hierarchy
  • “Coverage distribution / bias bar” style indicator on story cards
  • Fast, accessible, responsive, and maintainable code

Do not clone Ground News pixel-perfect. Borrow patterns: top nav, feed, chips, cards, side panels, and “bias distribution” visualization. :contentReference[oaicite:1]{index=1}

1) Non-Negotiables (Hard Rules)

  1. Only change what is necessary. Avoid “rewrite everything”.
  2. Keep components small, composable, and testable.
  3. No inline spaghetti logic inside JSX; extract helpers/hooks.
  4. No deep prop drilling if it can be avoided (prefer composition + context in a controlled way).
  5. No unused imports, no circular deps, no duplicate logic.
  6. Ensure accessibility: semantic HTML, keyboard navigation, focus states, aria-label where needed.
  7. Performance: memoize expensive computations, avoid unnecessary re-renders, virtualize long lists if needed.

2) Target UI / Information Architecture (Ground-News-like)

2.1 Global Layout

  • Top Navigation Bar:

    • Left: Logo / App name
    • Center: Tabs: Home / Dropdown Categories / About Us
    • Right: Search, Subscribe, Theme Toggle Pattern inspired by Ground News nav. :contentReference[oaicite:2]{index=2}

  • 3-Column Desktop Layout:

    • Left sidebar: sections/categories + quick filters
    • Center: main feed (story cards)
    • Right sidebar: “Daily Briefing”, “My Bias” summary, trending panel, or “Blindspot highlights” (On mobile: collapse sidebars into drawer / stacked sections.)

2.2 Trending Topics Chips

  • Display a horizontal row of “topic chips” near the top of the feed.
  • Chips are clickable; add “+”/follow affordance if relevant. Ground News shows “Trending Topics” list. :contentReference[oaicite:3]{index=3}

2.3 Story Card Pattern

Each story card should support:

  • Topic/Category label
  • Title (dominant)
  • Optional thumbnail image
  • Source count / coverage metadata
  • Coverage Distribution Indicator (Bias Bar):
    • Show Left / Center / Right distribution
    • Provide tooltip/help icon explaining what it means Ground News defines bias bar and L/C/R meaning. :contentReference[oaicite:4]{index=4}

2.4 Blindspot Feed Pattern (Optional Section)

  • A “Blindspot” card emphasizes undercovered stories by one side. Ground News includes “Blindspot” in nav and feed sections. :contentReference[oaicite:5]{index=5}

3) Tech/Code Standards (React Best Practices)

3.1 Language & Tooling

  • Prefer TypeScript for new/changed files. If project is JS-only, keep JS but add JSDoc types.
  • ESLint + Prettier conventions must be followed.
  • Use absolute imports via path alias if available (e.g. @/components/...).

3.2 Component Rules

  • Use function components + hooks.
  • Keep components “presentational” vs “container” separated:
    • containers/ fetch & orchestrate
    • components/ purely UI
  • Make UI components reusable: StoryCard, TopicChip, BiasBar, SidebarSection, TopNav.

3.3 State & Data Fetching

  • If the project already uses a data library (React Query/SWR), follow it.
  • Prefer:
    • Use a dedicated services/api layer
    • Use hooks/ for fetching (e.g. useStoriesQuery)
  • Handle: loading skeletons, empty states, error states, retry actions.

3.4 Accessibility Checklist

  • Tabs: proper role/aria, keyboard arrow navigation when relevant
  • Buttons: aria-label for icon-only
  • Images: alt text or aria-hidden if decorative
  • Ensure color contrast and visible focus ring

3.5 Performance Checklist

  • Avoid anonymous inline functions passed deep into lists
  • React.memo for pure UI components that re-render frequently
  • For long feeds: virtualization (e.g. react-window) if needed
  • Lazy-load route chunks and heavy components

4) Import Order & Style Rules

4.1 Import Order

  1. React + external libs
  2. Absolute internal modules (@/services/..., @/components/...)
  3. Relative imports
  4. Styles last

4.2 Naming Conventions

  • Components: PascalCase directory + file (e.g. StoryCard/StoryCard.jsx)
  • Hooks: useXxx
  • Types: Story, Topic, CoverageDistribution

5) Done Criteria

  • UI resembles the pattern of Ground News (tabs + feed + chips + distribution bar), not a clone.
  • Clean folder structure, consistent imports, no lint errors
  • Responsive, accessible, and fast
  • Clear empty/loading/error states