diegosouzapw Antigravity Frontend Development Skill
Target System: Next.js Frontend for Juliaz Agents (/frontend)
Assignee: Antigravity / Claude Code (Do NOT assign to Julia)
Objectives
- Continuous Improvement: Constantly evaluate and improve the User and Dev side frontends.
- Simplified User Experience: Maintain the User frontend (
/) as a simplified, visually stunning interface focused on a "floating energy" chatbot entity. - Advanced Dev Operations: Maintain the Dev frontend (
/dev) as a comprehensive dashboard for tracking agent status, tokens, chat history, and logs without clutter ("active objectives" removed). - Modern Stack: Utilize Next.js, Tailwind CSS, and Framer Motion for rich interactions and animations.
Workflow & Constraints
- Always ensure
app/page.tsxrepresents the User side andapp/dev/page.tsxrepresents the Dev side. - Use the
generate_imageor WebP generation tools if requested to design new UI mockups before implementing them. - Avoid modifying backend logic unless necessary for the frontend feature being implemented.
- The User side entity should be designed using purely CSS animations (e.g.,
animate-pulse,blur,spin) or Framer Motion to resemble an invisible, floating core of energy. Minimal text and no complex dashboards on this route.
Actions to Take Proactively
- If the user asks you to "improve the frontend" or "make the UI better", first review
frontend/app/globals.css, layout files, and the current components. - Suggest high-end aesthetics: glassmorphism, responsive grids, dark modes, and subtle micro-animations.
- Use
tailwind.config.tsfor consistent styling.
Command Execution
When running Next.js locally, always use:
npm run dev --prefix frontend