<aside> 🎨
</aside>
Re-create the three dark-theme mobile screens (see Figma) in a cross-platform native app.
Your goal is pixel-perfect visual fidelity, smooth UX, clean architecture, and well-structured state management.
| # | Screen | Core Elements |
|---|---|---|
| 1 | Agents List | • Top chips to filter by category |
| • Section headers with a chevron-right | ||
| • Horizontally scrollable “agent cards” | ||
| • Bottom tab bar | ||
| 2 | Agent Home | • Header |
| • Vertical list of “sample prompts” | ||
| • Bottom text-input with send arrow | ||
| 3 | Agent Chat | • Header identical to Agent Home |
| • Chat timeline showing alternating user / agent bubbles | ||
| • “Regenerate Response” button underneath assistant messages | ||
| • Persistent bottom text-input |
| Area | Mandatory / Preferred |
|---|---|
| Framework | React Native (TypeScript) preferred. Any multiplatform is accepted. |
| Language | TypeScript (for React Native) [Avoid JavaScript, we are pretty opinionated about it] |
| Navigation | React Navigation (or comparable in your framework) |
| Styling | Any approach that delivers the design |
| State Management | Local React state / Context, Zustand, MobX State Tree, Redux, or anything of your choice |
| Real-time (Bonus) | Integrate any OpenAI compatible APIs |