Getting Started with Antigravity Skills

📥 Installation

Do not install this as a dependency. Run this command in your project root to instantly set up your agent environment:

npx antigravity-skills

(This will automatically create an .agent/skills directory and install all skills there.)

Welcome to your new suite of agentic capabilities! This package supercharges your AI assistant (Antigravity) with specialized skills designed to streamline your "vibe coding" workflow—from establishing a brand identity to rapidly generating React components and auditing your code.

🚀 How to Use These Skills

These skills are designed to be autonomous but directed. You don't need to memorize complex commands. Instead, your workflow involves triggering the right skill at the right time.

The "Vibe Coding" Workflow

1. State Your Intent: Tell the agent what you want to achieve (e.g., "I need a design for a login page," "Check this code for errors," "Set up our brand guidelines").
2. Context Awareness: The agent acts as your partner. It will look for relevant skills in the skills/ directory.
3. Explicit Instruction: If the agent doesn't automatically pick up a skill, you can direct it:

   "Use the brand-identity skill to defining our color palette."

   "Run a reviewing-code audit on this file."

🛠️ Skill Directory

Here is a guide to the skills included in this package and when to use them.

🎨 Foundation & Design (Start Here)

These skills help you establish the core look, feel, and rules of your project.

| Skill | Description | Use When... | | :------------------- | :-------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------- | | brand-identity | The single source of truth for your brand's design tokens, voice, and tech stack. | You start a new project or need to ensure consistent colors, fonts, and tone across your app. | | design-md | Analyzes a Stitch project to create a semantic DESIGN.md system. | You have a visual design in Stitch and need to codify it into a reusable markdown specification for future generations. | | stitch-loop | An autonomous loop for iteratively building websites. | You want the agent to build a site page-by-page, autonomously passing the "baton" to itself. |

⚡ Implementation & Building

These skills turn ideas into code.

| Skill | Description | Use When... | | :--------------------- | :------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------- | | react-components | Converts Stitch designs into modular, clean React components. | You have a design (screenshot/Stitch ID) and want production-ready React code (not just a prototype). | | shadcn-ui | Adds beautiful, accessible UI components. | You need to drop in high-quality UI elements (buttons, dialogs, cards) that look premium immediately. | | remotion | Create programmatic videos using React. | You need to generate video content or animations directly from code. |

🛡️ Quality & Optimization

These skills keep your code correctly and performant.

| Skill | Description | Use When... | | :---------------------------- | :------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------- | | error-handling-patterns | Adds robust error handling checks and patterns. | You want to prevent crashes and handle edge cases gracefully (e.g., "Make this API call fail safe"). | | reviewing-code | A structured code reviewer for security and performance. | You are about to merge code or can't find a bug. Ask "Review this file for security issues." | | enhance-prompt | Optimizes your prompts for better AI results. | The AI isn't giving you what you want. Use this to refine your instruction into something the model understands perfectly. |

🌟 Why Use These Skills?

• Consistency: brand-identity and design-md ensure you never use the wrong hex code or font size again. Your entire team (and the AI) stays on the same page.
• Speed: react-components and stitch-loop automate the tedious parts of frontend work, letting you focus on logic and user experience.
• Quality: reviewing-code and error-handling-patterns act as a senior engineer looking over your shoulder, catching bugs before they happen.

💡 Pro Tip for Vibe Coding

Combine skills!

"First, use brand-identity to check our primary colors. Then use react-components to generate a 'Sign Up' modal that matches those colors, and finally run reviewing-code to ensure the form inputs are secure."

Happy Coding! 🚀