antigravity-skills

🥈Silver

Help agents with professional capabilities in specific fields (such as full-stack development, complex logic planning, multimedia processing, etc.) through modular Skills definitions, allowing agents to solve complex problems systematically like human experts.

606220Updated Today

Intermediate30min to implementautomation

Saves ~300 min per use

Quick InstallView Source

git clone https://github.com/guanyang/antigravity-skills.git

Works with:

Claude

Overview

About This Skill

How to Use

1. **Identify the Field:** Replace [FIELD] in the prompt template with your domain (e.g., 'full-stack development' or 'multimedia processing'). 2. **Define the Task:** Clearly articulate the problem or goal in [TASK]. Be specific about inputs, constraints, and desired outcomes. 3. **Run the Analysis:** Paste the prompt into your AI tool (e.g., Claude, ChatGPT) and review the structured steps. Adjust placeholders as needed. 4. **Validate Output:** Cross-check the AI's recommendations with your domain knowledge or tools (e.g., Lighthouse for web performance). 5. **Iterate:** Refine the task or field based on gaps in the AI's output. Use the 'pitfalls to avoid' section to guide adjustments. **Tips for Better Results:** - Include **specific metrics** (e.g., 'reduce bundle size by 50%') in the task to force actionable outputs. - For **complex fields**, break the task into smaller sub-tasks and run the prompt multiple times. - Use **real-world constraints** (e.g., 'must work in IE11') to ensure practicality.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/guanyang/antigravity-skills

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Act as a modular expert in [FIELD: e.g., full-stack development, complex logic planning, multimedia processing]. Break down the task '[TASK: e.g., optimize this React application for performance, design a fault-tolerant distributed system, or process this video to extract metadata]' into 3-5 systematic steps. For each step, provide: (1) a clear action, (2) required tools/resources, and (3) expected output. Conclude with a summary of dependencies and potential pitfalls to avoid. Format the response as a structured report with headers for each step.

Example Output

### **Modular Expert Analysis: Optimizing a React Application for Performance**

**Task:** Optimize a React e-commerce dashboard with 10,000+ concurrent users, slow load times, and frequent re-renders.

---

#### **Step 1: Audit Current Performance with Lighthouse & React DevTools**
- **Action:** Run a Lighthouse audit in Chrome DevTools and analyze React DevTools Profiler for component re-renders.
- **Tools/Resources:** Chrome DevTools, React DevTools, Lighthouse.
- **Expected Output:**
- Lighthouse report showing FCP (First Contentful Paint) at 3.2s (target: <1.8s), TTI (Time to Interactive) at 5.1s (target: <3.8s).
- React DevTools reveals 12 unnecessary re-renders in the product listing component due to state updates in parent components.

#### **Step 2: Implement Code Splitting with React.lazy and Suspense**
- **Action:** Split the dashboard into chunks using `React.lazy` for non-critical routes (e.g., user profile, analytics). Wrap lazy-loaded components in `Suspense` with fallback loading states.
- **Tools/Resources:** Webpack (or Vite), `@babel/plugin-syntax-dynamic-import`.
- **Expected Output:**
- Bundle size reduced from 2.4MB to 1.1MB (54% reduction).
- Critical path analysis shows main bundle now loads in 1.2s (down from 2.1s).

#### **Step 3: Memoize Expensive Components with React.memo and useMemo**
- **Action:** Identify and memoize components with heavy computations (e.g., product card, price calculator) using `React.memo` and `useMemo` to prevent unnecessary re-renders.
- **Tools/Resources:** React DevTools, `useMemo` hook.
- **Expected Output:**
- Re-renders in the product listing component drop from 12 to 3 per user interaction.
- CPU profiling shows 40% reduction in script execution time during user interactions.

#### **Step 4: Optimize State Management with Context API + useReducer**
- **Action:** Replace global state (e.g., Redux) with React Context API + `useReducer` for the shopping cart and user session to reduce boilerplate and improve state updates.
- **Tools/Resources:** React Context API, `useReducer` hook.
- **Expected Output:**
- State updates now trigger only 2 re-renders (down from 8) when adding items to cart.
- Bundle size reduced by an additional 300KB (total reduction: 67%).

#### **Step 5: Deploy and Monitor with Performance Budgets**
- **Action:** Deploy the optimized build to a staging environment and set up performance budgets in CI/CD (e.g., bundle size <1.5MB, TTI <4s). Monitor with New Relic or Sentry.
- **Tools/Resources:** GitHub Actions, New Relic, Sentry.
- **Expected Output:**
- Staging environment shows FCP at 1.5s and TTI at 3.2s (both within targets).
- Alerts triggered if bundle size exceeds 1.5MB or TTI exceeds 4s in production.

---

**Dependencies:**
- Requires React 16.8+ for hooks.
- Assumes Webpack/Vite is used for bundling.

**Pitfalls to Avoid:**
- Over-memoization can lead to stale state or unnecessary complexity.
- Lazy-loaded components must include proper error boundaries to handle loading failures.
- Performance gains may vary based on user device capabilities (test on low-end devices).