antigravity-devkit 1.0.2 → 1.0.4

package/template/skills/frontend-design/design-systems.md

@@ -1,230 +0,0 @@
-# Design Systems Reference
-
-> Color theory, typography, and visual hierarchy principles for Vue3 + Tailwind.
-
----
-
-## Color Principles
-
-### 60-30-10 Rule
-
-```
-60% → Primary/Background (calm, neutral base)
-30% → Secondary (supporting areas)
-10% → Accent (CTAs, highlights)
-```
-
-### Color Psychology
-
-| Need | Consider | Avoid |
-|------|----------|-------|
-| Trust, calm | Blue family | Aggressive reds |
-| Growth, nature | Green family | Industrial grays |
-| Energy, urgency | Orange, red | Passive blues |
-| Luxury | Deep Teal, Gold, Emerald | Cheap brights |
-| Clean, minimal | Neutrals | Overwhelming color |
-
-### ⛔ Colors to AVOID (AI Clichés)
-
-| ❌ Avoid | Why | ✅ Try Instead |
-|----------|-----|----------------|
-| Purple/Violet | #1 AI default | Teal, Emerald, Coral |
-| Fintech Blue | Safe harbor | Signal Orange, Deep Green |
-| Pink gradients | Overused | Rich Gold, Warm Terracotta |
-| Neon glow | Generic "tech" | Solid contrast, texture |
-
-### Selection Process
-
-1. **Industry?** → Narrows options
-2. **Emotion?** → Picks primary
-3. **Light/Dark mode?** → Sets foundation
-4. **ASK USER** if not specified
-
----
-
-## Tailwind Custom Palette
-
-```javascript
-// tailwind.config.js - UNIQUE colors
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        // Define brand-specific colors
-        brand: {
-          50: '#f0fdfa',
-          500: '#14b8a6', // Primary - NOT purple
-          900: '#134e4a',
-        },
-        accent: {
-          DEFAULT: '#f59e0b', // Distinctive accent
-          hover: '#d97706',
-        }
-      }
-    }
-  }
-}
-```
-
----
-
-## Typography Principles
-
-### Scale Ratios
-
-| Content Type | Ratio | Feel |
-|--------------|-------|------|
-| Dense UI | 1.125-1.2 | Compact, efficient |
-| General web | 1.25 | Balanced |
-| Editorial | 1.333 | Readable, spacious |
-| Hero/display | 1.5-1.618 | Dramatic |
-
-### Font Pairing Concept
-
-```
-Contrast + Harmony:
-├── DIFFERENT enough for hierarchy
-├── SIMILAR enough for cohesion
-└── Usually: display + neutral, or serif + sans
-```
-
-### ⛔ Fonts to AVOID (AI Defaults)
-
-| ❌ Avoid | Why | ✅ Try Instead |
-|----------|-----|----------------|
-| Inter | Every AI uses it | Space Grotesk, DM Sans |
-| Roboto | Generic | Outfit, General Sans |
-| Poppins | Overused | Cabinet Grotesk, Clash Display |
-| System fonts | Lazy | Research unique fonts |
-
-### Unique Font Suggestions
-
-| Purpose | Font Options |
-|---------|--------------|
-| Display/Hero | Clash Display, Cabinet Grotesk, Syne |
-| Body | DM Sans, Outfit, General Sans |
-| Mono/Code | JetBrains Mono, Fira Code |
-| Elegant | Fraunces, Newsreader, Lora |
-
----
-
-## Tailwind Typography Setup
-
-```javascript
-// tailwind.config.js
-module.exports = {
-  theme: {
-    extend: {
-      fontFamily: {
-        display: ['Clash Display', 'sans-serif'],
-        body: ['DM Sans', 'sans-serif'],
-        mono: ['JetBrains Mono', 'monospace'],
-      },
-      fontSize: {
-        'hero': ['4.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
-        'display': ['3rem', { lineHeight: '1.2' }],
-      }
-    }
-  }
-}
-```
-
-### Readability Rules
-
-- **Line length:** 45-75 characters optimal
-- **Line height:** 1.4-1.6 for body
-- **Contrast:** WCAG AA minimum (4.5:1)
-- **Base size:** 16px+ for web
-
----
-
-## Visual Hierarchy
-
-### Sizing Principles
-
-| Element | Consideration |
-|---------|---------------|
-| **Touch targets** | Min 44×44px mobile |
-| **Buttons** | Height by importance (48/40/36px) |
-| **Inputs** | Match button height |
-| **Cards** | Consistent padding |
-| **Reading width** | max-w-prose (65ch) |
-
-### 8-Point Grid
-
-```css
-/* All spacing in multiples of 8 */
-.spacing {
-  --space-1: 4px;   /* half-step */
-  --space-2: 8px;
-  --space-3: 16px;
-  --space-4: 24px;
-  --space-5: 32px;
-  --space-6: 48px;
-  --space-7: 64px;
-  --space-8: 80px;
-}
-```
-
----
-
-## Border Radius Strategy
-
-**Don't default to `rounded-md`!**
-
-| Style | Radius | Use Case |
-|-------|--------|----------|
-| **Sharp** | 0-2px | Tech, Luxury, Brutalist |
-| **Subtle** | 4-6px | Professional, B2B |
-| **Medium** | 8-12px | General, balanced |
-| **Friendly** | 16-24px | Social, lifestyle |
-| **Pill** | 9999px | Buttons, badges |
-
-```javascript
-// tailwind.config.js - COMMIT to a style
-module.exports = {
-  theme: {
-    extend: {
-      borderRadius: {
-        'card': '2px',      // Sharp for tech
-        'button': '9999px', // Pill buttons
-      }
-    }
-  }
-}
-```
-
----
-
-## Shadow Hierarchy
-
-```css
-/* Tailwind shadow scale */
-.elevation-1 { @apply shadow-sm; }   /* Subtle lift */
-.elevation-2 { @apply shadow-md; }   /* Cards */
-.elevation-3 { @apply shadow-lg; }   /* Modals, dropdowns */
-.elevation-4 { @apply shadow-xl; }   /* Popovers */
-.elevation-5 { @apply shadow-2xl; }  /* Dialogs */
-
-/* Custom dramatic shadow */
-.shadow-dramatic {
-  box-shadow: 
-    0 25px 50px -12px rgba(0, 0, 0, 0.25),
-    0 0 0 1px rgba(0, 0, 0, 0.05);
-}
-```
-
----
-
-## Quick Decision Checklist
-
-- [ ] **Color** - NOT purple, justified choice
-- [ ] **Typography** - NOT Inter/Roboto, unique fonts
-- [ ] **Border radius** - Committed style (sharp OR rounded)
-- [ ] **Shadows** - Elevation hierarchy defined
-- [ ] **Spacing** - 8-point grid consistent
-- [ ] **60-30-10** - Color ratio balanced
-
----
-
-> **Remember:** Design systems create consistency. Define your tokens ONCE, use everywhere.

package/template/skills/frontend-design/ux-psychology.md

@@ -1,128 +0,0 @@
-# UX Psychology Reference
-
-> Core UX laws, emotional design, trust building, and cognitive load management.
-
----
-
-## Core UX Laws
-
-| Law | Principle | Application |
-|-----|-----------|-------------|
-| **Hick's Law** | More choices = slower decisions | Max 5-7 nav items, progressive disclosure |
-| **Fitts' Law** | Bigger + closer = easier to click | CTAs min 44px height, touch 44×44px |
-| **Miller's Law** | 7±2 items in working memory | Chunk content, group related items |
-| **Von Restorff** | Different = memorable | Make CTAs visually distinct |
-| **Serial Position** | First/last remembered | Key info at start and end |
-
----
-
-## Emotional Design (Don Norman)
-
-```
-VISCERAL (instant)   → First impression: colors, imagery, overall feel
-                       "Wow, this looks beautiful!"
-
-BEHAVIORAL (use)     → Using it: speed, feedback, efficiency  
-                       "This works exactly how I expected!"
-
-REFLECTIVE (memory)  → After: identity, values, loyalty
-                       "This brand represents who I am"
-```
-
-### Designing for Each Level
-
-| Level | Focus | Implementation |
-|-------|-------|----------------|
-| **Visceral** | Beauty, first impression | Hero visuals, micro-interactions |
-| **Behavioral** | Usability, feedback | Instant confirmations, smooth flows |
-| **Reflective** | Identity, story | Brand values, testimonials, story |
-
----
-
-## Trust Building
-
-| Category | Elements | Placement |
-|----------|----------|-----------|
-| **Security** | SSL badges, encryption | Forms, checkout |
-| **Social Proof** | Reviews, testimonials | Hero, product pages |
-| **Transparency** | Clear pricing, policies | Footer, checkout |
-| **Professional** | Consistent design | Everywhere |
-| **Authority** | Certifications, media mentions | Header, about |
-
-```
-Trust Signal Placement:
-┌─────────────────────────────────────────┐
-│ HEADER: Trust banner, security icons    │
-├─────────────────────────────────────────┤
-│ HERO: Social proof ("10,000+ users")    │
-├─────────────────────────────────────────┤
-│ PRODUCT: Reviews, guarantees            │
-├─────────────────────────────────────────┤
-│ CHECKOUT: Payment icons, SSL badge      │
-├─────────────────────────────────────────┤
-│ FOOTER: Contact, policies, certs        │
-└─────────────────────────────────────────┘
-```
-
----
-
-## Cognitive Load Management
-
-| Type | Definition | Designer's Role |
-|------|------------|-----------------|
-| **Intrinsic** | Task complexity | Break into smaller steps |
-| **Extraneous** | Poor design load | **ELIMINATE THIS!** |
-| **Germane** | Learning effort | Support and encourage |
-
-### Reduction Strategies
-
-1. **Simplify** - Remove visual noise, clean layouts
-2. **Chunk** - Group into 5-7 item sets
-3. **Progressive Disclosure** - Hide advanced options
-4. **Familiar Patterns** - Standard placements
-5. **Offload** - Don't make users remember
-
----
-
-## Audience → Design Approach
-
-| Audience | Colors | Typography | Layout | Trust |
-|----------|--------|------------|--------|-------|
-| **Gen Z** | Bold, vibrant | Large, experimental | Mobile-first, vertical | Peer reviews |
-| **Millennials** | Muted, earth tones | Clean sans-serif | Card-based | Values, sustainability |
-| **Gen X** | Professional | Conservative | Traditional hierarchy | Track record |
-| **Boomers** | High contrast | Large (18px+) | Simple, linear | Phone numbers, people |
-| **B2B** | Corporate blues | Professional | Data-focused | Certifications |
-| **Luxury** | Black, gold | Elegant serif | Spacious, minimal | Exclusivity |
-
----
-
-## Emotion Color Mapping
-
-| Emotion | Colors | Industry Use |
-|---------|--------|--------------|
-| **Trust** | Blue, Green | Finance, Healthcare |
-| **Excitement** | Red, Orange | Sales, Sports |
-| **Calm** | Soft blue/green | Wellness, Spa |
-| **Luxury** | Black, Gold | Premium brands |
-| **Energy** | Yellow, Orange | Fitness, Kids |
-| **Nature** | Green, Brown | Eco, Organic |
-
----
-
-## Psychology Checklist
-
-Before launch, verify:
-
-- [ ] **Hick's Law** - Max 7 nav items
-- [ ] **Fitts' Law** - Large, reachable CTAs
-- [ ] **Miller's Law** - Content chunked properly
-- [ ] **Von Restorff** - CTAs stand out
-- [ ] **Trust signals** - Security, reviews visible
-- [ ] **Cognitive load** - Clean, not overwhelming
-- [ ] **Feedback** - All actions confirmed
-- [ ] **Accessibility** - Inclusive for all users
-
----
-
-> **Remember:** UX is psychology. Every design decision affects user behavior.

package/template/skills/gitops-patterns/SKILL.md

@@ -1,105 +0,0 @@
----
-name: gitops-patterns
-description: GitOps patterns with ArgoCD and Flux
----
-
-# GitOps Patterns
-
-> Git as the source of truth for infrastructure.
-
----
-
-## GitOps Flow
-
-```
-Code Change → PR → Merge → CI Build → Image Push → Git Sync → Deploy
-```
-
-| Step | Tool |
-|------|------|
-| CI Build | Azure DevOps |
-| Image Push | Azure Container Registry |
-| Git Sync | ArgoCD / Flux |
-| Deploy | AKS |
-
----
-
-## Repository Structure
-
-```
-gitops-repo/
-├── base/                 # Base manifests
-│   ├── deployment.yaml
-│   ├── service.yaml
-│   └── kustomization.yaml
-├── overlays/
-│   ├── dev/
-│   │   └── kustomization.yaml
-│   ├── staging/
-│   │   └── kustomization.yaml
-│   └── prod/
-│       └── kustomization.yaml
-```
-
----
-
-## ArgoCD Application
-
-```yaml
-apiVersion: argoproj.io/v1alpha1
-kind: Application
-metadata:
-  name: myapp
-  namespace: argocd
-spec:
-  project: default
-  source:
-    repoURL: https://github.com/org/gitops-repo
-    targetRevision: HEAD
-    path: overlays/prod
-  destination:
-    server: https://kubernetes.default.svc
-    namespace: production
-  syncPolicy:
-    automated:
-      prune: true
-      selfHeal: true
-```
-
----
-
-## Flux Configuration
-
-```yaml
-apiVersion: source.toolkit.fluxcd.io/v1
-kind: GitRepository
-metadata:
-  name: myapp
-spec:
-  interval: 1m
-  url: https://github.com/org/gitops-repo
-  ref:
-    branch: main
----
-apiVersion: kustomize.toolkit.fluxcd.io/v1
-kind: Kustomization
-metadata:
-  name: myapp
-spec:
-  interval: 10m
-  path: ./overlays/prod
-  sourceRef:
-    kind: GitRepository
-    name: myapp
-```
-
----
-
-## DO / DON'T
-
-| ✅ Do | ❌ Don't |
-|-------|---------|
-| Git for all changes | kubectl apply manually |
-| Automated sync | Manual deployments |
-| Environment overlays | Duplicate manifests |
-| PR reviews | Direct pushes |

package/template/skills/grafana-logging/SKILL.md

@@ -1,107 +0,0 @@
----
-name: grafana-logging
-description: Grafana dashboards and metrics logging
----
-
-# Grafana Logging
-
-> Metrics, dashboards, and alerting with Grafana.
-
----
-
-## Key Metrics
-
-### Application Metrics
-| Metric | Description |
-|--------|-------------|
-| Request rate | Requests per second |
-| Error rate | Errors per second |
-| Duration | Response time percentiles |
-| Active requests | Concurrent requests |
-
-### Infrastructure Metrics
-| Metric | Description |
-|--------|-------------|
-| CPU usage | Percentage used |
-| Memory usage | Bytes used |
-| Disk I/O | Read/write operations |
-| Network | Bytes in/out |
-
----
-
-## Prometheus Metrics (ASP.NET)
-
-```csharp
-// Install package
-// dotnet add package prometheus-net.AspNetCore
-
-// Program.cs
-app.UseMetricServer();  // /metrics endpoint
-app.UseHttpMetrics();   // HTTP request metrics
-```
-
----
-
-## Custom Metrics
-
-```csharp
-using Prometheus;
-
-public class OrderService
-{
-    private static readonly Counter OrdersCreated = Metrics
-        .CreateCounter("orders_created_total", "Total orders created");
-    
-    private static readonly Histogram OrderDuration = Metrics
-        .CreateHistogram("order_duration_seconds", "Order processing time");
-    
-    public async Task CreateOrder(Order order)
-    {
-        using (OrderDuration.NewTimer())
-        {
-            await ProcessOrder(order);
-            OrdersCreated.Inc();
-        }
-    }
-}
-```
-
----
-
-## Dashboard Queries
-
-```promql
-# Request rate
-rate(http_requests_total[5m])
-
-# Error rate
-rate(http_requests_total{status=~"5.."}[5m])
-
-# 95th percentile latency
-histogram_quantile(0.95, rate(http_request_duration_seconds_bucket[5m]))
-```
-
----
-
-## Alerting
-
-```yaml
-# Alert rule
-- alert: HighErrorRate
-  expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.1
-  for: 5m
-  labels:
-    severity: critical
-  annotations:
-    summary: High error rate detected
-```
-
----
-
-## DO / DON'T
-
-| ✅ Do | ❌ Don't |
-|-------|---------|
-| RED method (Rate, Error, Duration) | Track everything |
-| Set alerting thresholds | Alert fatigue |
-| Dashboard per service | One giant dashboard |

package/template/skills/intelligent-routing/SKILL.md

@@ -1,75 +0,0 @@
----
-name: intelligent-routing
-description: Auto-select best agent for each request
----
-
-# Intelligent Routing
-
-> Automatically select the best agent for each task.
-
----
-
-## Routing Matrix
-
-| Keywords | Agent |
-|----------|-------|
-| vue, component, pinia, frontend | frontend-specialist |
-| api, controller, service, c#, aspnet | backend-specialist |
-| sql, database, schema, query | database-architect |
-| deploy, pipeline, aks, kubernetes | devops-engineer |
-| security, keyvault, audit, owasp | security-auditor |
-| test, xunit, vitest, coverage | test-engineer |
-| bug, error, fix, debug | debugger |
-| performance, slow, metrics | performance-optimizer |
-| docs, readme, documentation | documentation-writer |
-| analyze, explore, overview | explorer-agent |
-| plan, design, architecture | project-planner |
-| complex, multi-domain | orchestrator |
-
----
-
-## Routing Protocol
-
-### Step 1: Analyze Request
-Identify keywords and domain indicators.
-
-### Step 2: Match Agent
-Use routing matrix to find best match.
-
-### Step 3: Check Complexity
-- Single domain → Direct to specialist
-- Multi-domain → Route to orchestrator
-
-### Step 4: Inform User
-```markdown
-🤖 **Applying `@[agent-name]`...**
-```
-
----
-
-## Multi-Domain Detection
-
-| Indicators | Action |
-|------------|--------|
-| "full-stack" | orchestrator |
-| Frontend + Backend | orchestrator |
-| Multiple file types | orchestrator |
-
----
-
-## Override Rules
-
-| User Says | Action |
-|-----------|--------|
-| @agent-name | Use specified agent |
-| /command | Follow command flow |
-| "don't ask" | Skip Socratic Gate |
-
----
-
-## Fallback
-
-If no clear match:
-1. Ask user to clarify
-2. Default to `project-planner` for planning
-3. Default to `orchestrator` for execution