codehava-agent-kit 1.0.1 → 2.0.0

package/templates/.agent/skills/angular-ui-patterns/SKILL.md

@@ -0,0 +1,512 @@
+---
+name: angular-ui-patterns
+description: "Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states."
+risk: safe
+source: self
+date_added: "2026-02-27"
+---
+
+# Angular UI Patterns
+
+## Core Principles
+
+1. **Never show stale UI** - Loading states only when actually loading
+2. **Always surface errors** - Users must know when something fails
+3. **Optimistic updates** - Make the UI feel instant
+4. **Progressive disclosure** - Use `@defer` to show content as available
+5. **Graceful degradation** - Partial data is better than no data
+
+---
+
+## Loading State Patterns
+
+### The Golden Rule
+
+**Show loading indicator ONLY when there's no data to display.**
+
+```typescript
+@Component({
+  template: `
+    @if (error()) {
+      <app-error-state [error]="error()" (retry)="load()" />
+    } @else if (loading() && !items().length) {
+      <app-skeleton-list />
+    } @else if (!items().length) {
+      <app-empty-state message="No items found" />
+    } @else {
+      <app-item-list [items]="items()" />
+    }
+  `,
+})
+export class ItemListComponent {
+  private store = inject(ItemStore);
+
+  items = this.store.items;
+  loading = this.store.loading;
+  error = this.store.error;
+}
+```
+
+### Loading State Decision Tree
+
+```
+Is there an error?
+  → Yes: Show error state with retry option
+  → No: Continue
+
+Is it loading AND we have no data?
+  → Yes: Show loading indicator (spinner/skeleton)
+  → No: Continue
+
+Do we have data?
+  → Yes, with items: Show the data
+  → Yes, but empty: Show empty state
+  → No: Show loading (fallback)
+```
+
+### Skeleton vs Spinner
+
+| Use Skeleton When    | Use Spinner When      |
+| -------------------- | --------------------- |
+| Known content shape  | Unknown content shape |
+| List/card layouts    | Modal actions         |
+| Initial page load    | Button submissions    |
+| Content placeholders | Inline operations     |
+
+---
+
+## Control Flow Patterns
+
+### @if/@else for Conditional Rendering
+
+```html
+@if (user(); as user) {
+<span>Welcome, {{ user.name }}</span>
+} @else if (loading()) {
+<app-spinner size="small" />
+} @else {
+<a routerLink="/login">Sign In</a>
+}
+```
+
+### @for with Track
+
+```html
+@for (item of items(); track item.id) {
+<app-item-card [item]="item" (delete)="remove(item.id)" />
+} @empty {
+<app-empty-state
+  icon="inbox"
+  message="No items yet"
+  actionLabel="Create Item"
+  (action)="create()"
+/>
+}
+```
+
+### @defer for Progressive Loading
+
+```html
+<!-- Critical content loads immediately -->
+<app-header />
+<app-hero-section />
+
+<!-- Non-critical content deferred -->
+@defer (on viewport) {
+<app-comments [postId]="postId()" />
+} @placeholder {
+<div class="h-32 bg-gray-100 animate-pulse"></div>
+} @loading (minimum 200ms) {
+<app-spinner />
+} @error {
+<app-error-state message="Failed to load comments" />
+}
+```
+
+---
+
+## Error Handling Patterns
+
+### Error Handling Hierarchy
+
+```
+1. Inline error (field-level) → Form validation errors
+2. Toast notification → Recoverable errors, user can retry
+3. Error banner → Page-level errors, data still partially usable
+4. Full error screen → Unrecoverable, needs user action
+```
+
+### Always Show Errors
+
+**CRITICAL: Never swallow errors silently.**
+
+```typescript
+// CORRECT - Error always surfaced to user
+@Component({...})
+export class CreateItemComponent {
+  private store = inject(ItemStore);
+  private toast = inject(ToastService);
+
+  async create(data: CreateItemDto) {
+    try {
+      await this.store.create(data);
+      this.toast.success('Item created successfully');
+      this.router.navigate(['/items']);
+    } catch (error) {
+      console.error('createItem failed:', error);
+      this.toast.error('Failed to create item. Please try again.');
+    }
+  }
+}
+
+// WRONG - Error silently caught
+async create(data: CreateItemDto) {
+  try {
+    await this.store.create(data);
+  } catch (error) {
+    console.error(error); // User sees nothing!
+  }
+}
+```
+
+### Error State Component Pattern
+
+```typescript
+@Component({
+  selector: "app-error-state",
+  standalone: true,
+  imports: [NgOptimizedImage],
+  template: `
+    <div class="error-state">
+      <img ngSrc="/assets/error-icon.svg" width="64" height="64" alt="" />
+      <h3>{{ title() }}</h3>
+      <p>{{ message() }}</p>
+      @if (retry.observed) {
+        <button (click)="retry.emit()" class="btn-primary">Try Again</button>
+      }
+    </div>
+  `,
+})
+export class ErrorStateComponent {
+  title = input("Something went wrong");
+  message = input("An unexpected error occurred");
+  retry = output<void>();
+}
+```
+
+---
+
+## Button State Patterns
+
+### Button Loading State
+
+```html
+<button
+  (click)="handleSubmit()"
+  [disabled]="isSubmitting() || !form.valid"
+  class="btn-primary"
+>
+  @if (isSubmitting()) {
+  <app-spinner size="small" class="mr-2" />
+  Saving... } @else { Save Changes }
+</button>
+```
+
+### Disable During Operations
+
+**CRITICAL: Always disable triggers during async operations.**
+
+```typescript
+// CORRECT - Button disabled while loading
+@Component({
+  template: `
+    <button
+      [disabled]="saving()"
+      (click)="save()"
+    >
+      @if (saving()) {
+        <app-spinner size="sm" /> Saving...
+      } @else {
+        Save
+      }
+    </button>
+  `
+})
+export class SaveButtonComponent {
+  saving = signal(false);
+
+  async save() {
+    this.saving.set(true);
+    try {
+      await this.service.save();
+    } finally {
+      this.saving.set(false);
+    }
+  }
+}
+
+// WRONG - User can click multiple times
+<button (click)="save()">
+  {{ saving() ? 'Saving...' : 'Save' }}
+</button>
+```
+
+---
+
+## Empty States
+
+### Empty State Requirements
+
+Every list/collection MUST have an empty state:
+
+```html
+@for (item of items(); track item.id) {
+<app-item-card [item]="item" />
+} @empty {
+<app-empty-state
+  icon="folder-open"
+  title="No items yet"
+  description="Create your first item to get started"
+  actionLabel="Create Item"
+  (action)="openCreateDialog()"
+/>
+}
+```
+
+### Contextual Empty States
+
+```typescript
+@Component({
+  selector: "app-empty-state",
+  template: `
+    <div class="empty-state">
+      <span class="icon" [class]="icon()"></span>
+      <h3>{{ title() }}</h3>
+      <p>{{ description() }}</p>
+      @if (actionLabel()) {
+        <button (click)="action.emit()" class="btn-primary">
+          {{ actionLabel() }}
+        </button>
+      }
+    </div>
+  `,
+})
+export class EmptyStateComponent {
+  icon = input("inbox");
+  title = input.required<string>();
+  description = input("");
+  actionLabel = input<string | null>(null);
+  action = output<void>();
+}
+```
+
+---
+
+## Form Patterns
+
+### Form with Loading and Validation
+
+```typescript
+@Component({
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <div class="form-field">
+        <label for="name">Name</label>
+        <input
+          id="name"
+          formControlName="name"
+          [class.error]="isFieldInvalid('name')"
+        />
+        @if (isFieldInvalid("name")) {
+          <span class="error-text">
+            {{ getFieldError("name") }}
+          </span>
+        }
+      </div>
+
+      <div class="form-field">
+        <label for="email">Email</label>
+        <input id="email" type="email" formControlName="email" />
+        @if (isFieldInvalid("email")) {
+          <span class="error-text">
+            {{ getFieldError("email") }}
+          </span>
+        }
+      </div>
+
+      <button type="submit" [disabled]="form.invalid || submitting()">
+        @if (submitting()) {
+          <app-spinner size="sm" /> Submitting...
+        } @else {
+          Submit
+        }
+      </button>
+    </form>
+  `,
+})
+export class UserFormComponent {
+  private fb = inject(FormBuilder);
+
+  submitting = signal(false);
+
+  form = this.fb.group({
+    name: ["", [Validators.required, Validators.minLength(2)]],
+    email: ["", [Validators.required, Validators.email]],
+  });
+
+  isFieldInvalid(field: string): boolean {
+    const control = this.form.get(field);
+    return control ? control.invalid && control.touched : false;
+  }
+
+  getFieldError(field: string): string {
+    const control = this.form.get(field);
+    if (control?.hasError("required")) return "This field is required";
+    if (control?.hasError("email")) return "Invalid email format";
+    if (control?.hasError("minlength")) return "Too short";
+    return "";
+  }
+
+  async onSubmit() {
+    if (this.form.invalid) return;
+
+    this.submitting.set(true);
+    try {
+      await this.service.submit(this.form.value);
+      this.toast.success("Submitted successfully");
+    } catch {
+      this.toast.error("Submission failed");
+    } finally {
+      this.submitting.set(false);
+    }
+  }
+}
+```
+
+---
+
+## Dialog/Modal Patterns
+
+### Confirmation Dialog
+
+```typescript
+// dialog.service.ts
+@Injectable({ providedIn: 'root' })
+export class DialogService {
+  private dialog = inject(Dialog); // CDK Dialog or custom
+
+  async confirm(options: {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+  }): Promise<boolean> {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      data: options,
+    });
+
+    return await firstValueFrom(dialogRef.closed) ?? false;
+  }
+}
+
+// Usage
+async deleteItem(item: Item) {
+  const confirmed = await this.dialog.confirm({
+    title: 'Delete Item',
+    message: `Are you sure you want to delete "${item.name}"?`,
+    confirmText: 'Delete',
+  });
+
+  if (confirmed) {
+    await this.store.delete(item.id);
+  }
+}
+```
+
+---
+
+## Anti-Patterns
+
+### Loading States
+
+```typescript
+// WRONG - Spinner when data exists (causes flash on refetch)
+@if (loading()) {
+  <app-spinner />
+}
+
+// CORRECT - Only show loading without data
+@if (loading() && !items().length) {
+  <app-spinner />
+}
+```
+
+### Error Handling
+
+```typescript
+// WRONG - Error swallowed
+try {
+  await this.service.save();
+} catch (e) {
+  console.log(e); // User has no idea!
+}
+
+// CORRECT - Error surfaced
+try {
+  await this.service.save();
+} catch (e) {
+  console.error("Save failed:", e);
+  this.toast.error("Failed to save. Please try again.");
+}
+```
+
+### Button States
+
+```html
+<!-- WRONG - Button not disabled during submission -->
+<button (click)="submit()">Submit</button>
+
+<!-- CORRECT - Disabled and shows loading -->
+<button (click)="submit()" [disabled]="loading()">
+  @if (loading()) {
+  <app-spinner size="sm" />
+  } Submit
+</button>
+```
+
+---
+
+## UI State Checklist
+
+Before completing any UI component:
+
+### UI States
+
+- [ ] Error state handled and shown to user
+- [ ] Loading state shown only when no data exists
+- [ ] Empty state provided for collections (`@empty` block)
+- [ ] Buttons disabled during async operations
+- [ ] Buttons show loading indicator when appropriate
+
+### Data & Mutations
+
+- [ ] All async operations have error handling
+- [ ] All user actions have feedback (toast/visual)
+- [ ] Optimistic updates rollback on failure
+
+### Accessibility
+
+- [ ] Loading states announced to screen readers
+- [ ] Error messages linked to form fields
+- [ ] Focus management after state changes
+
+---
+
+## Integration with Other Skills
+
+- **angular-state-management**: Use Signal stores for state
+- **angular**: Apply modern patterns (Signals, @defer)
+- **testing-patterns**: Test all UI states
+
+## When to Use
+This skill is applicable to execute the workflow or actions described in the overview.

package/templates/.agent/skills/angular-ui-patterns/metadata.json

@@ -0,0 +1,12 @@
+{
+  "version": "1.0.0",
+  "organization": "Antigravity Awesome Skills",
+  "date": "February 2026",
+  "abstract": "Modern UI patterns for Angular applications designed for AI agents and LLMs. Covers loading states, error handling, progressive disclosure, and data display patterns. Emphasizes showing loading only without data, surfacing all errors, optimistic updates, and graceful degradation using @defer. Includes decision trees and anti-patterns to avoid.",
+  "references": [
+    "https://angular.dev/guide/defer",
+    "https://angular.dev/guide/templates",
+    "https://material.angular.io",
+    "https://ng-spartan.com"
+  ]
+}

package/templates/.agent/skills/antigravity-design-expert/SKILL.md

@@ -0,0 +1,42 @@
+--- 
+name: antigravity-design-expert
+description: Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
+risk: safe
+source: community
+date_added: "2026-03-07"
+---
+
+# Antigravity UI & Motion Design Expert
+
+## 🎯 Role Overview
+
+You are a world-class UI/UX Engineer specializing in "Antigravity Design." Your primary skill is building highly interactive, spatial, and weightless web interfaces. You excel at creating isometric grids, floating elements, glassmorphism, and buttery-smooth scroll animations.
+
+## 🛠️ Preferred Tech Stack
+
+When asked to build or generate UI components, default to the following stack unless instructed otherwise:
+
+- **Framework:** React / Next.js
+- **Styling:** Tailwind CSS (for layout and utility) + Custom CSS for complex 3D transforms
+- **Animation:** GSAP (GreenSock) + ScrollTrigger for scroll-linked motion
+- **3D Elements:** React Three Fiber (R3F) or CSS 3D Transforms (`rotateX`, `rotateY`, `perspective`)
+
+## 📐 Design Principles (The "Antigravity" Vibe)
+
+- **Weightlessness:** UI cards and elements should appear to float. Use layered, soft, diffused drop-shadows (e.g., `box-shadow: 0 20px 40px rgba(0,0,0,0.05)`).
+- **Spatial Depth:** Utilize Z-axis layering. Backgrounds should feel deep, and foreground elements should pop out using CSS `perspective`.
+- **Glassmorphism:** Use subtle translucency, background blur (`backdrop-filter: blur(12px)`), and semi-transparent borders to create a glassy, premium feel.
+- **Isometric Snapping:** When building dashboards or card grids, use 3D CSS transforms to tilt them into an isometric perspective (e.g., `transform: rotateX(60deg) rotateZ(-45deg)`).
+
+## 🎬 Motion & Animation Rules
+
+- **Never snap instantly:** All state changes (hover, focus, active) must have smooth transitions (minimum `0.3s ease-out`).
+- **Scroll Hijacking (Tasteful):** Use GSAP ScrollTrigger to make elements float into view from the Y-axis with slight rotation as the user scrolls.
+- **Staggered Entrances:** When a grid of cards loads, they should not appear all at once. Stagger their entrance animations by `0.1s` so they drop in like dominoes.
+- **Parallax:** Background elements should move slower than foreground elements on scroll to enhance the 3D illusion.
+
+## 🚧 Execution Constraints
+
+- Always write modular, reusable components.
+- Ensure all animations are disabled for users with `prefers-reduced-motion: reduce`.
+- Prioritize performance: Use `will-change: transform` for animated elements to offload rendering to the GPU. Do not animate expensive properties like `box-shadow` or `filter` continuously.

package/templates/.agent/skills/antigravity-skill-orchestrator/README.md

@@ -0,0 +1,32 @@
+# antigravity-skill-orchestrator
+
+A meta-skill package for the Antigravity IDE ecosystem.
+
+## Overview
+
+The `antigravity-skill-orchestrator` is an intelligent meta-skill that enhances an AI agent's ability to handle complex, multi-domain tasks. It provides strict guidelines and workflows enabling the agent to:
+
+1. **Evaluate Task Complexity**: Implementing guardrails to prevent the overuse of specialized skills on simple, straightforward tasks.
+2. **Dynamically Select Skills**: Identifying the best combination of skills for a given complex problem.
+3. **Track Skill Combinations**: Utilizing the `agent-memory-mcp` skill to store, search, and retrieve successful skill combinations for future reference, building institutional knowledge over time.
+
+## Installation
+
+This skill is designed to be used within the Antigravity IDE and integrated alongside the existing suite of AWESOME skills.
+
+Make sure you have the `agent-memory-mcp` skill installed and running to take full advantage of the combination tracking feature.
+
+## Usage
+
+When executing a prompt with an AI assistant via the Antigravity IDE, you can invoke this skill:
+
+```bash
+@antigravity-skill-orchestrator Please build a comprehensive dashboard integrating fetching live data, an interactive UI, and performance optimizations.
+```
+
+The agent will then follow the directives in the `SKILL.md` to break down the task, search memory for similar challenges, assemble the right team of skills (e.g., `@react-patterns` + `@nodejs-backend-patterns`), and execute the task without over-complicating it.
+
+---
+
+**Author:** [Wahid](https://github.com/wahidzzz)  
+**Source:** [antigravity-skill-orchestrator](https://github.com/wahidzzz/antigravity-skill-orchestrator)