antigravity-frontend-dev
Antigravity/Claude specific skill for continuous frontend UI/UX improvement and development in the Juliaz Agents project.
Best use case
antigravity-frontend-dev is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Antigravity/Claude specific skill for continuous frontend UI/UX improvement and development in the Juliaz Agents project.
Teams using antigravity-frontend-dev should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/antigravity-frontend-dev/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How antigravity-frontend-dev Compares
| Feature / Agent | antigravity-frontend-dev | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Antigravity/Claude specific skill for continuous frontend UI/UX improvement and development in the Juliaz Agents project.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Antigravity Frontend Development Skill
**Target System:** Next.js Frontend for Juliaz Agents (`/frontend`)
**Assignee:** Antigravity / Claude Code (Do NOT assign to Julia)
## Objectives
1. **Continuous Improvement:** Constantly evaluate and improve the User and Dev side frontends.
2. **Simplified User Experience:** Maintain the User frontend (`/`) as a simplified, visually stunning interface focused on a "floating energy" chatbot entity.
3. **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).
4. **Modern Stack:** Utilize Next.js, Tailwind CSS, and Framer Motion for rich interactions and animations.
## Workflow & Constraints
- Always ensure `app/page.tsx` represents the User side and `app/dev/page.tsx` represents the Dev side.
- Use the `generate_image` or 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.ts` for consistent styling.
## Command Execution
When running Next.js locally, always use:
```bash
npm run dev --prefix frontend
```Related Skills
applying-frontend-patterns
Framework-agnostic frontend component design patterns.
analyzing-frontend-layer
Use when analyzing frontend/UI layer including components, state management, routing, and API integration (optional - skip if no frontend exists)
agentic-jumpstart-frontend
Frontend UI patterns with shadcn/ui, Radix UI, Tailwind CSS v4, and Lucide icons. Use when building UI components, styling, layouts, buttons, cards, dialogs, forms, responsive design, or when the user mentions UI, styling, Tailwind, components, or design.
adk-frontend
Guidelines for building frontend applications that integrate with Botpress ADK bots - covering authentication, type generation, client setup, and calling bot actions
project-frontend-design
comprehensive design guide for the Meatballs project, combining high-quality frontend principles with the specific "Craft & Chao" design system. Use this skill for all frontend work in this project.
frontend-ui
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
frontend-styleguide
Use when asked to create or edit style guides, design systems, component libraries, or update existing frontend components for web projects
frontend-style-layout
Apply consistent styling and layout patterns with Tailwind v4. Use when building page layouts, choosing spacing methods, implementing responsive images, or migrating Tailwind v3 classes to v4. Covers Section Compound Pattern, spacing selection, CLS-free responsive images, and v4 class changes.
frontend-governance
Enforces Contemplative design system and Anti-Slop protocols for all UI generation
frontend-design
Create distinctive, bold UI designs that avoid generic AI aesthetics. This skill should be used when users want frontend components with strong visual identity, creative typography, intentional color palettes, and production-grade animations - specifically to avoid the bland, safe, homogeneous "AI slop" that plagues most generated interfaces.
antigravity-workflows
Orchestrate multiple Antigravity skills through guided workflows for SaaS MVP delivery, security audits, AI agent builds, and browser QA.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.