anchi-kit 1.2.0 → 1.2.1

package/.antigravity/skills/performance-patterns/SKILL.md

@@ -0,0 +1,209 @@
+# Performance Patterns Skill
+
+> Domain knowledge for writing performant code across all layers.
+
+---
+
+## 📋 Database Performance Patterns
+
+### N+1 Query Problem
+
+**❌ Bad:**
+
+```typescript
+const users = await prisma.user.findMany();
+for (const user of users) {
+  const posts = await prisma.post.findMany({ where: { userId: user.id } });
+}
+// 1 query for users + N queries for posts = N+1
+```
+
+**✅ Good:**
+
+```typescript
+const users = await prisma.user.findMany({
+  include: { posts: true }, // Single query with JOIN
+});
+```
+
+---
+
+### Pagination
+
+**Always paginate large datasets:**
+
+```typescript
+// Cursor-based (recommended for large datasets)
+const users = await prisma.user.findMany({
+  take: 20,
+  skip: 1,
+  cursor: { id: lastUserId },
+  orderBy: { id: "asc" },
+});
+
+// Offset-based (simpler but slower for large offsets)
+const users = await prisma.user.findMany({
+  take: 20,
+  skip: page * 20,
+});
+```
+
+---
+
+### Indexing Strategy
+
+```sql
+-- Always index:
+-- 1. Foreign keys
+CREATE INDEX idx_posts_user_id ON posts(user_id);
+
+-- 2. Frequently filtered columns
+CREATE INDEX idx_users_email ON users(email);
+
+-- 3. Frequently sorted columns
+CREATE INDEX idx_posts_created_at ON posts(created_at DESC);
+
+-- 4. Composite for multi-column queries
+CREATE INDEX idx_posts_user_status ON posts(user_id, status);
+```
+
+---
+
+### Caching Patterns
+
+```typescript
+// 1. Request-level cache (React Query / SWR)
+const { data } = useQuery(["user", id], fetchUser, {
+  staleTime: 5 * 60 * 1000, // 5 minutes
+  cacheTime: 30 * 60 * 1000, // 30 minutes
+});
+
+// 2. Server-side cache (Redis)
+const cached = await redis.get(`user:${id}`);
+if (cached) return JSON.parse(cached);
+
+const user = await prisma.user.findUnique({ where: { id } });
+await redis.setex(`user:${id}`, 300, JSON.stringify(user)); // 5 min TTL
+
+// 3. CDN cache (API response headers)
+res.setHeader("Cache-Control", "public, max-age=60, stale-while-revalidate=30");
+```
+
+---
+
+### Lazy Loading vs Eager Loading
+
+```typescript
+// Eager: Load everything upfront
+const user = await prisma.user.findUnique({
+  where: { id },
+  include: { posts: true, comments: true, profile: true }, // Heavy
+});
+
+// Lazy: Load on demand
+const user = await prisma.user.findUnique({ where: { id } });
+// Later when needed:
+const posts = await prisma.post.findMany({ where: { userId: user.id } });
+```
+
+**When to use which:**
+| Scenario | Strategy |
+|----------|----------|
+| List view | Eager (one query) |
+| Detail view | Lazy (load sections) |
+| Dashboard | Parallel lazy |
+| Export | Eager with batching |
+
+---
+
+### Connection Pooling
+
+```typescript
+// Prisma (prisma/schema.prisma)
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+  connection_limit = 10  // Adjust based on traffic
+}
+
+// Serverless (Prisma Accelerate or PgBouncer)
+// Use connection pooler URL for serverless environments
+```
+
+---
+
+## 📋 API Performance Patterns
+
+### Parallel Requests
+
+```typescript
+// ❌ Sequential (slow)
+const user = await getUser(id);
+const posts = await getPosts(id);
+const comments = await getComments(id);
+
+// ✅ Parallel (fast)
+const [user, posts, comments] = await Promise.all([
+  getUser(id),
+  getPosts(id),
+  getComments(id),
+]);
+```
+
+---
+
+### Debounce & Throttle
+
+```typescript
+// Debounce: Wait for user to stop typing
+const debouncedSearch = debounce((query) => {
+  fetch(`/api/search?q=${query}`);
+}, 300);
+
+// Throttle: Max 1 request per 500ms
+const throttledScroll = throttle(() => {
+  loadMoreItems();
+}, 500);
+```
+
+---
+
+## 📋 Frontend Performance Patterns
+
+### React Optimization
+
+```typescript
+// 1. Memoize expensive computations
+const sortedUsers = useMemo(
+  () => users.sort((a, b) => a.name.localeCompare(b.name)),
+  [users]
+);
+
+// 2. Memoize callbacks
+const handleClick = useCallback(() => {
+  doSomething(id);
+}, [id]);
+
+// 3. Virtualize long lists
+import { FixedSizeList } from "react-window";
+<FixedSizeList height={600} itemCount={10000} itemSize={50}>
+  {({ index, style }) => <Row style={style} data={items[index]} />}
+</FixedSizeList>;
+
+// 4. Code splitting
+const HeavyComponent = lazy(() => import("./HeavyComponent"));
+```
+
+---
+
+## 📋 Quick Checklist
+
+Before any implementation, verify:
+
+- [ ] No N+1 queries
+- [ ] Large lists paginated
+- [ ] Indexes on filtered/sorted columns
+- [ ] Caching for repeated reads
+- [ ] Parallel requests where possible
+- [ ] Connection pool configured
+- [ ] React components optimized

package/.antigravity/skills/playwright-testing/SKILL.md

@@ -0,0 +1,115 @@
+---
+name: playwright-testing
+description: Automated end-to-end testing using Playwright test framework. Use for writing automated test suites, CI/CD integration, regression testing, and cross-browser validation. For manual debugging and performance profiling, use chrome-devtools skill instead.
+---
+
+# Playwright Testing
+
+Browser automation and end-to-end testing for web applications using Playwright.
+
+## When to Use
+
+- Testing web application UIs
+- End-to-end (E2E) testing
+- Browser automation tasks
+- Visual regression testing
+- Cross-browser testing
+- Integration testing for frontend
+
+## Quick Start
+
+### Installation
+
+```bash
+npm install -D @playwright/test
+npx playwright install
+```
+
+### Basic Test
+
+```javascript
+// tests/example.spec.js
+import { test, expect } from "@playwright/test";
+
+test("homepage has title", async ({ page }) => {
+  await page.goto("http://localhost:3000");
+  await expect(page).toHaveTitle(/My App/);
+});
+```
+
+### Run Tests
+
+```bash
+npx playwright test                 # Run all tests
+npx playwright test --ui            # Run with UI mode
+npx playwright test --debug         # Debug mode
+npx playwright test --headed        # Show browser
+```
+
+## Common Patterns
+
+See [references/playwright-patterns.md](references/playwright-patterns.md) for:
+
+- Page Object Model
+- Test data setup
+- Authentication flows
+- API mocking
+- File upload/download
+- Network interception
+
+## Test Structure
+
+```javascript
+test.describe("Login Flow", () => {
+  test("successful login", async ({ page }) => {
+    // Navigate
+    await page.goto("/login");
+
+    // Interact
+    await page.fill('input[name="email"]', "user@example.com");
+    await page.fill('input[name="password"]', "password");
+    await page.click('button[type="submit"]');
+
+    // Assert
+    await expect(page).toHaveURL("/dashboard");
+    await expect(page.locator("h1")).toContainText("Welcome");
+  });
+});
+```
+
+## Best Practices
+
+1. **Use Locators** - Prefer data-testid or semantic selectors
+2. **Wait for Navigation** - Use auto-waiting, avoid timeouts
+3. **Isolate Tests** - Each test should be independent
+4. **Test Real Scenarios** - Simulate actual user behavior
+5. **Handle State** - Reset state between tests
+6. **Use Fixtures** - Share setup across tests
+
+## Configuration
+
+### playwright.config.js
+
+```javascript
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  timeout: 30000,
+  retries: 2,
+  use: {
+    baseURL: "http://localhost:3000",
+    screenshot: "only-on-failure",
+    trace: "retain-on-failure",
+  },
+  projects: [
+    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+  ],
+});
+```
+
+## References
+
+- [Playwright Patterns](references/playwright-patterns.md) - Common test patterns
+- [Playwright Docs](https://playwright.dev/) - Official documentation

package/.antigravity/skills/playwright-testing/references/playwright-patterns.md

@@ -0,0 +1,122 @@
+# Playwright Patterns
+
+## Page Object Model (POM)
+
+```javascript
+// pages/LoginPage.js
+export class LoginPage {
+  constructor(page) {
+    this.page = page;
+    this.emailInput = page.locator('input[name="email"]');
+    this.passwordInput = page.locator('input[name="password"]');
+    this.submitButton = page.locator('button[type="submit"]');
+  }
+
+  async goto() {
+    await this.page.goto("/login");
+  }
+
+  async login(email, password) {
+    await this.emailInput.fill(email);
+    await this.passwordInput.fill(password);
+    await this.submitButton.click();
+  }
+}
+
+// tests/login.spec.js
+import { LoginPage } from "../pages/LoginPage";
+
+test("user can login", async ({ page }) => {
+  const loginPage = new LoginPage(page);
+  await loginPage.goto();
+  await loginPage.login("user@example.com", "password");
+  await expect(page).toHaveURL("/dashboard");
+});
+```
+
+## Authentication Flow
+
+```javascript
+// auth.setup.js - Run once to save auth state
+import { test as setup } from "@playwright/test";
+
+setup("authenticate", async ({ page }) => {
+  await page.goto("/login");
+  await page.fill('input[name="email"]', "user@example.com");
+  await page.fill('input[name="password"]', "password");
+  await page.click('button[type="submit"]');
+
+  await page.context().storageState({ path: "auth.json" });
+});
+
+// playwright.config.js - Use saved auth state
+export default defineConfig({
+  projects: [
+    { name: "setup", testMatch: /auth\.setup\.js/ },
+    {
+      name: "authenticated",
+      use: { storageState: "auth.json" },
+      dependencies: ["setup"],
+    },
+  ],
+});
+```
+
+## API Mocking
+
+```javascript
+test("mock API response", async ({ page }) => {
+  await page.route("**/api/users", (route) => {
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify([
+        { id: 1, name: "John" },
+        { id: 2, name: "Jane" },
+      ]),
+    });
+  });
+
+  await page.goto("/users");
+  await expect(page.locator(".user-list")).toContainText("John");
+});
+```
+
+## File Upload
+
+```javascript
+test("upload file", async ({ page }) => {
+  await page.goto("/upload");
+
+  const fileInput = page.locator('input[type="file"]');
+  await fileInput.setInputFiles("path/to/file.pdf");
+
+  await page.click('button:text("Upload")');
+  await expect(page.locator(".success")).toBeVisible();
+});
+```
+
+## Network Interception
+
+```javascript
+test("wait for API call", async ({ page }) => {
+  const responsePromise = page.waitForResponse(
+    (response) =>
+      response.url().includes("/api/data") && response.status() === 200
+  );
+
+  await page.click('button:text("Load Data")');
+  const response = await responsePromise;
+
+  expect(response.ok()).toBeTruthy();
+});
+```
+
+## Visual Testing
+
+```javascript
+test("visual regression", async ({ page }) => {
+  await page.goto("/dashboard");
+  await expect(page).toHaveScreenshot("dashboard.png");
+});
+```

package/.antigravity/skills/prompt-engineering/SKILL.md

@@ -0,0 +1,126 @@
+---
+name: prompt-engineering
+description: Advanced prompt engineering techniques and Anthropic best practices for creating effective AI prompts, agents, and AI interactions. Use when creating AI agents, writing prompts, optimizing AI interactions, or building AI-powered features.
+---
+
+# Prompt Engineering
+
+Advanced techniques for crafting effective prompts and optimizing AI interactions.
+
+## When to Use
+
+- Creating AI agents or assistants
+- Writing prompts for Claude or other LLMs
+- Optimizing AI-powered features
+- Debugging AI responses
+- Building conversational interfaces
+- Implementing RAG systems
+
+## Core Principles
+
+### 1. Be Clear and Specific
+
+```markdown
+❌ Bad: "Write code for a login system"
+
+✅ Good: "Create a secure login system in Node.js with:
+
+- Email/password authentication
+- JWT tokens for sessions
+- Password hashing with bcrypt
+- Input validation
+- Rate limiting (5 attempts/minute)"
+```
+
+### 2. Provide Context
+
+```markdown
+Context: I'm building an e-commerce site with Next.js 14, PostgreSQL, and Stripe.
+Task: Create a checkout flow that handles...
+```
+
+### 3. Use Examples (Few-Shot Learning)
+
+```markdown
+Convert these user messages to structured data:
+
+Input: "Book a flight to NYC on Friday"
+Output: {"action": "book_flight", "destination": "NYC", "date": "friday"}
+
+Input: "Cancel my hotel reservation"
+Output: {"action": "cancel", "type": "hotel"}
+
+Now convert: "Find me a restaurant in Paris"
+```
+
+## Anthropic Best Practices
+
+See [references/anthropic-best-practices.md](references/anthropic-best-practices.md) for:
+
+- Claude-specific techniques
+- System prompts vs user prompts
+- Tool use patterns
+- Multi-turn conversations
+- Handling refusals
+
+## Prompt Patterns
+
+See [references/prompt-patterns.md](references/prompt-patterns.md) for:
+
+- Chain of Thought
+- ReAct (Reasoning + Acting)
+- Self-Consistency
+- Tree of Thoughts
+- Structured Output
+
+## Effective Techniques
+
+### Chain of Thought
+
+```markdown
+Solve this step-by-step:
+
+Problem: A store has 15% off all items. An item costs $80. What's the final price?
+
+Think through this:
+
+1. Calculate discount amount
+2. Subtract from original price
+3. Show your work
+```
+
+### Role Assignment
+
+```markdown
+You are a senior software architect specializing in microservices.
+Review this system design and provide:
+
+1. Potential bottlenecks
+2. Scalability concerns
+3. Recommended improvements
+```
+
+### Structured Output
+
+```markdown
+Analyze this code and respond in JSON format:
+{
+"issues": [...],
+"suggestions": [...],
+"complexity_score": 1-10
+}
+```
+
+## Debugging Prompts
+
+1. **Too vague** → Add specific requirements
+2. **Wrong format** → Provide output examples
+3. **Inconsistent** → Add constraints and validation
+4. **Verbose** → Request concise responses
+5. **Off-topic** → Clarify scope and boundaries
+
+## References
+
+- [Anthropic Best Practices](references/anthropic-best-practices.md)
+- [Prompt Patterns](references/prompt-patterns.md)
+- [Claude Documentation](https://docs.anthropic.com/en/docs/)