+
+
+
+
+
+```
+
+**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.
+
+**4. Implementation Details - BUILD THE SIDEBAR**
+
+The sidebar structure:
+
+**1. Seed (FIXED)** - Always include exactly as shown:
+- Seed display
+- Prev/Next/Random/Jump buttons
+
+**2. Parameters (VARIABLE)** - Create controls for the art:
+```html
+
+
+
+ ...
+
+```
+Add as many control-group divs as there are parameters.
+
+**3. Colors (OPTIONAL/VARIABLE)** - Include if the art needs adjustable colors:
+- Add color pickers if users should control palette
+- Skip this section if the art uses fixed colors
+- Skip if the art is monochrome
+
+**4. Actions (FIXED)** - Always include exactly as shown:
+- Regenerate button
+- Reset button
+- Download PNG button
+
+**Requirements**:
+- Seed controls must work (prev/next/random/jump/display)
+- All parameters must have UI controls
+- Regenerate, Reset, Download buttons must work
+- Keep Anthropic branding (UI styling, not art colors)
+
+### USING THE ARTIFACT
+
+The HTML artifact works immediately:
+1. **In claude.ai**: Displayed as an interactive artifact - runs instantly
+2. **As a file**: Save and open in any browser - no server needed
+3. **Sharing**: Send the HTML file - it's completely self-contained
+
+---
+
+## VARIATIONS & EXPLORATION
+
+The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:
+
+- Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
+- Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side
+- All within the same single artifact
+
+This is like creating a series of prints from the same plate - the algorithm is consistent, but each seed reveals different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space.
+
+---
+
+## THE CREATIVE PROCESS
+
+**User request** → **Algorithmic philosophy** → **Implementation**
+
+Each request is unique. The process involves:
+
+1. **Interpret the user's intent** - What aesthetic is being sought?
+2. **Create an algorithmic philosophy** (4-6 paragraphs) describing the computational approach
+3. **Implement it in code** - Build the algorithm that expresses this philosophy
+4. **Design appropriate parameters** - What should be tunable?
+5. **Build matching UI controls** - Sliders/inputs for those parameters
+
+**The constants**:
+- Anthropic branding (colors, fonts, layout)
+- Seed navigation (always present)
+- Self-contained HTML artifact
+
+**Everything else is variable**:
+- The algorithm itself
+- The parameters
+- The UI controls
+- The visual outcome
+
+To achieve the best results, trust creativity and let the philosophy guide the implementation.
+
+---
+
+## RESOURCES
+
+This skill includes helpful templates and documentation:
+
+- **templates/viewer.html**: REQUIRED STARTING POINT for all HTML artifacts.
+ - This is the foundation - contains the exact structure and Anthropic branding
+ - **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
+ - **Replace**: The p5.js algorithm, parameter definitions, and UI controls in Parameters section
+ - The extensive comments in the file mark exactly what to keep vs replace
+
+- **templates/generator_template.js**: Reference for p5.js best practices and code structure principles.
+ - Shows how to organize parameters, use seeded randomness, structure classes
+ - NOT a pattern menu - use these principles to build unique algorithms
+ - Embed algorithms inline in the HTML artifact (don't create separate .js files)
+
+**Critical reminder**:
+- The **template is the STARTING POINT**, not inspiration
+- The **algorithm is where to create** something unique
+- Don't copy the flow field example - build what the philosophy demands
+- But DO keep the exact UI structure and Anthropic branding from the template
\ No newline at end of file
diff --git a/web-app/public/skills/algorithmic-art/templates/generator_template.js b/web-app/public/skills/algorithmic-art/templates/generator_template.js
new file mode 100644
index 00000000..e263fbde
--- /dev/null
+++ b/web-app/public/skills/algorithmic-art/templates/generator_template.js
@@ -0,0 +1,223 @@
+/**
+ * ═══════════════════════════════════════════════════════════════════════════
+ * P5.JS GENERATIVE ART - BEST PRACTICES
+ * ═══════════════════════════════════════════════════════════════════════════
+ *
+ * This file shows STRUCTURE and PRINCIPLES for p5.js generative art.
+ * It does NOT prescribe what art you should create.
+ *
+ * Your algorithmic philosophy should guide what you build.
+ * These are just best practices for how to structure your code.
+ *
+ * ═══════════════════════════════════════════════════════════════════════════
+ */
+
+// ============================================================================
+// 1. PARAMETER ORGANIZATION
+// ============================================================================
+// Keep all tunable parameters in one object
+// This makes it easy to:
+// - Connect to UI controls
+// - Reset to defaults
+// - Serialize/save configurations
+
+let params = {
+ // Define parameters that match YOUR algorithm
+ // Examples (customize for your art):
+ // - Counts: how many elements (particles, circles, branches, etc.)
+ // - Scales: size, speed, spacing
+ // - Probabilities: likelihood of events
+ // - Angles: rotation, direction
+ // - Colors: palette arrays
+
+ seed: 12345,
+ // define colorPalette as an array -- choose whatever colors you'd like ['#d97757', '#6a9bcc', '#788c5d', '#b0aea5']
+ // Add YOUR parameters here based on your algorithm
+};
+
+// ============================================================================
+// 2. SEEDED RANDOMNESS (Critical for reproducibility)
+// ============================================================================
+// ALWAYS use seeded random for Art Blocks-style reproducible output
+
+function initializeSeed(seed) {
+ randomSeed(seed);
+ noiseSeed(seed);
+ // Now all random() and noise() calls will be deterministic
+}
+
+// ============================================================================
+// 3. P5.JS LIFECYCLE
+// ============================================================================
+
+function setup() {
+ createCanvas(800, 800);
+
+ // Initialize seed first
+ initializeSeed(params.seed);
+
+ // Set up your generative system
+ // This is where you initialize:
+ // - Arrays of objects
+ // - Grid structures
+ // - Initial positions
+ // - Starting states
+
+ // For static art: call noLoop() at the end of setup
+ // For animated art: let draw() keep running
+}
+
+function draw() {
+ // Option 1: Static generation (runs once, then stops)
+ // - Generate everything in setup()
+ // - Call noLoop() in setup()
+ // - draw() doesn't do much or can be empty
+
+ // Option 2: Animated generation (continuous)
+ // - Update your system each frame
+ // - Common patterns: particle movement, growth, evolution
+ // - Can optionally call noLoop() after N frames
+
+ // Option 3: User-triggered regeneration
+ // - Use noLoop() by default
+ // - Call redraw() when parameters change
+}
+
+// ============================================================================
+// 4. CLASS STRUCTURE (When you need objects)
+// ============================================================================
+// Use classes when your algorithm involves multiple entities
+// Examples: particles, agents, cells, nodes, etc.
+
+class Entity {
+ constructor() {
+ // Initialize entity properties
+ // Use random() here - it will be seeded
+ }
+
+ update() {
+ // Update entity state
+ // This might involve:
+ // - Physics calculations
+ // - Behavioral rules
+ // - Interactions with neighbors
+ }
+
+ display() {
+ // Render the entity
+ // Keep rendering logic separate from update logic
+ }
+}
+
+// ============================================================================
+// 5. PERFORMANCE CONSIDERATIONS
+// ============================================================================
+
+// For large numbers of elements:
+// - Pre-calculate what you can
+// - Use simple collision detection (spatial hashing if needed)
+// - Limit expensive operations (sqrt, trig) when possible
+// - Consider using p5 vectors efficiently
+
+// For smooth animation:
+// - Aim for 60fps
+// - Profile if things are slow
+// - Consider reducing particle counts or simplifying calculations
+
+// ============================================================================
+// 6. UTILITY FUNCTIONS
+// ============================================================================
+
+// Color utilities
+function hexToRgb(hex) {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null;
+}
+
+function colorFromPalette(index) {
+ return params.colorPalette[index % params.colorPalette.length];
+}
+
+// Mapping and easing
+function mapRange(value, inMin, inMax, outMin, outMax) {
+ return outMin + (outMax - outMin) * ((value - inMin) / (inMax - inMin));
+}
+
+function easeInOutCubic(t) {
+ return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+
+// Constrain to bounds
+function wrapAround(value, max) {
+ if (value < 0) return max;
+ if (value > max) return 0;
+ return value;
+}
+
+// ============================================================================
+// 7. PARAMETER UPDATES (Connect to UI)
+// ============================================================================
+
+function updateParameter(paramName, value) {
+ params[paramName] = value;
+ // Decide if you need to regenerate or just update
+ // Some params can update in real-time, others need full regeneration
+}
+
+function regenerate() {
+ // Reinitialize your generative system
+ // Useful when parameters change significantly
+ initializeSeed(params.seed);
+ // Then regenerate your system
+}
+
+// ============================================================================
+// 8. COMMON P5.JS PATTERNS
+// ============================================================================
+
+// Drawing with transparency for trails/fading
+function fadeBackground(opacity) {
+ fill(250, 249, 245, opacity); // Anthropic light with alpha
+ noStroke();
+ rect(0, 0, width, height);
+}
+
+// Using noise for organic variation
+function getNoiseValue(x, y, scale = 0.01) {
+ return noise(x * scale, y * scale);
+}
+
+// Creating vectors from angles
+function vectorFromAngle(angle, magnitude = 1) {
+ return createVector(cos(angle), sin(angle)).mult(magnitude);
+}
+
+// ============================================================================
+// 9. EXPORT FUNCTIONS
+// ============================================================================
+
+function exportImage() {
+ saveCanvas('generative-art-' + params.seed, 'png');
+}
+
+// ============================================================================
+// REMEMBER
+// ============================================================================
+//
+// These are TOOLS and PRINCIPLES, not a recipe.
+// Your algorithmic philosophy should guide WHAT you create.
+// This structure helps you create it WELL.
+//
+// Focus on:
+// - Clean, readable code
+// - Parameterized for exploration
+// - Seeded for reproducibility
+// - Performant execution
+//
+// The art itself is entirely up to you!
+//
+// ============================================================================
\ No newline at end of file
diff --git a/web-app/public/skills/algorithmic-art/templates/viewer.html b/web-app/public/skills/algorithmic-art/templates/viewer.html
new file mode 100644
index 00000000..630cc1f6
--- /dev/null
+++ b/web-app/public/skills/algorithmic-art/templates/viewer.html
@@ -0,0 +1,599 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web-app/public/skills/amplitude-automation/SKILL.md b/web-app/public/skills/amplitude-automation/SKILL.md
new file mode 100644
index 00000000..c9b23c0f
--- /dev/null
+++ b/web-app/public/skills/amplitude-automation/SKILL.md
@@ -0,0 +1,216 @@
+---
+name: amplitude-automation
+description: "Automate Amplitude tasks via Rube MCP (Composio): events, user activity, cohorts, user identification. Always search tools first for current schemas."
+requires:
+ mcp: [rube]
+---
+
+# Amplitude Automation via Rube MCP
+
+Automate Amplitude product analytics through Composio's Amplitude toolkit via Rube MCP.
+
+## Prerequisites
+
+- Rube MCP must be connected (RUBE_SEARCH_TOOLS available)
+- Active Amplitude connection via `RUBE_MANAGE_CONNECTIONS` with toolkit `amplitude`
+- Always call `RUBE_SEARCH_TOOLS` first to get current tool schemas
+
+## Setup
+
+**Get Rube MCP**: Add `https://rube.app/mcp` as an MCP server in your client configuration. No API keys needed — just add the endpoint and it works.
+
+
+1. Verify Rube MCP is available by confirming `RUBE_SEARCH_TOOLS` responds
+2. Call `RUBE_MANAGE_CONNECTIONS` with toolkit `amplitude`
+3. If connection is not ACTIVE, follow the returned auth link to complete Amplitude authentication
+4. Confirm connection status shows ACTIVE before running any workflows
+
+## Core Workflows
+
+### 1. Send Events
+
+**When to use**: User wants to track events or send event data to Amplitude
+
+**Tool sequence**:
+1. `AMPLITUDE_SEND_EVENTS` - Send one or more events to Amplitude [Required]
+
+**Key parameters**:
+- `events`: Array of event objects, each containing:
+ - `event_type`: Name of the event (e.g., 'page_view', 'purchase')
+ - `user_id`: Unique user identifier (required if no `device_id`)
+ - `device_id`: Device identifier (required if no `user_id`)
+ - `event_properties`: Object with custom event properties
+ - `user_properties`: Object with user properties to set
+ - `time`: Event timestamp in milliseconds since epoch
+
+**Pitfalls**:
+- At least one of `user_id` or `device_id` is required per event
+- `event_type` is required for every event; cannot be empty
+- `time` must be in milliseconds (13-digit epoch), not seconds
+- Batch limit applies; check schema for maximum events per request
+- Events are processed asynchronously; successful API response does not mean data is immediately queryable
+
+### 2. Get User Activity
+
+**When to use**: User wants to view event history for a specific user
+
+**Tool sequence**:
+1. `AMPLITUDE_FIND_USER` - Find user by ID or property [Prerequisite]
+2. `AMPLITUDE_GET_USER_ACTIVITY` - Retrieve user's event stream [Required]
+
+**Key parameters**:
+- `user`: Amplitude internal user ID (from FIND_USER)
+- `offset`: Pagination offset for event list
+- `limit`: Maximum number of events to return
+
+**Pitfalls**:
+- `user` parameter requires Amplitude's internal user ID, NOT your application's user_id
+- Must call FIND_USER first to resolve your user_id to Amplitude's internal ID
+- Activity is returned in reverse chronological order by default
+- Large activity histories require pagination via `offset`
+
+### 3. Find and Identify Users
+
+**When to use**: User wants to look up users or set user properties
+
+**Tool sequence**:
+1. `AMPLITUDE_FIND_USER` - Search for a user by various identifiers [Required]
+2. `AMPLITUDE_IDENTIFY` - Set or update user properties [Optional]
+
+**Key parameters**:
+- For FIND_USER:
+ - `user`: Search term (user_id, email, or Amplitude ID)
+- For IDENTIFY:
+ - `user_id`: Your application's user identifier
+ - `device_id`: Device identifier (alternative to user_id)
+ - `user_properties`: Object with `$set`, `$unset`, `$add`, `$append` operations
+
+**Pitfalls**:
+- FIND_USER searches across user_id, device_id, and Amplitude ID
+- IDENTIFY uses special property operations (`$set`, `$unset`, `$add`, `$append`)
+- `$set` overwrites existing values; `$setOnce` only sets if not already set
+- At least one of `user_id` or `device_id` is required for IDENTIFY
+- User property changes are eventually consistent; not immediate
+
+### 4. Manage Cohorts
+
+**When to use**: User wants to list cohorts, view cohort details, or update cohort membership
+
+**Tool sequence**:
+1. `AMPLITUDE_LIST_COHORTS` - List all saved cohorts [Required]
+2. `AMPLITUDE_GET_COHORT` - Get detailed cohort information [Optional]
+3. `AMPLITUDE_UPDATE_COHORT_MEMBERSHIP` - Add/remove users from a cohort [Optional]
+4. `AMPLITUDE_CHECK_COHORT_STATUS` - Check async cohort operation status [Optional]
+
+**Key parameters**:
+- For LIST_COHORTS: No required parameters
+- For GET_COHORT: `cohort_id` (from list results)
+- For UPDATE_COHORT_MEMBERSHIP:
+ - `cohort_id`: Target cohort ID
+ - `memberships`: Object with `add` and/or `remove` arrays of user IDs
+- For CHECK_COHORT_STATUS: `request_id` from update response
+
+**Pitfalls**:
+- Cohort IDs are required for all cohort-specific operations
+- UPDATE_COHORT_MEMBERSHIP is asynchronous; use CHECK_COHORT_STATUS to verify
+- `request_id` from the update response is needed for status checking
+- Maximum membership changes per request may be limited; chunk large updates
+- Only behavioral cohorts support API membership updates
+
+### 5. Browse Event Categories
+
+**When to use**: User wants to discover available event types and categories in Amplitude
+
+**Tool sequence**:
+1. `AMPLITUDE_GET_EVENT_CATEGORIES` - List all event categories [Required]
+
+**Key parameters**:
+- No required parameters; returns all configured event categories
+
+**Pitfalls**:
+- Categories are configured in Amplitude UI; API provides read access
+- Event names within categories are case-sensitive
+- Use these categories to validate event_type values before sending events
+
+## Common Patterns
+
+### ID Resolution
+
+**Application user_id -> Amplitude internal ID**:
+```
+1. Call AMPLITUDE_FIND_USER with user=your_user_id
+2. Extract Amplitude's internal user ID from response
+3. Use internal ID for GET_USER_ACTIVITY
+```
+
+**Cohort name -> Cohort ID**:
+```
+1. Call AMPLITUDE_LIST_COHORTS
+2. Find cohort by name in results
+3. Extract id for cohort operations
+```
+
+### User Property Operations
+
+Amplitude IDENTIFY supports these property operations:
+- `$set`: Set property value (overwrites existing)
+- `$setOnce`: Set only if property not already set
+- `$add`: Increment numeric property
+- `$append`: Append to list property
+- `$unset`: Remove property entirely
+
+Example structure:
+```json
+{
+ "user_properties": {
+ "$set": {"plan": "premium", "company": "Acme"},
+ "$add": {"login_count": 1}
+ }
+}
+```
+
+### Async Operation Pattern
+
+For cohort membership updates:
+```
+1. Call AMPLITUDE_UPDATE_COHORT_MEMBERSHIP -> get request_id
+2. Call AMPLITUDE_CHECK_COHORT_STATUS with request_id
+3. Repeat step 2 until status is 'complete' or 'error'
+```
+
+## Known Pitfalls
+
+**User IDs**:
+- Amplitude has its own internal user IDs separate from your application's
+- FIND_USER resolves your IDs to Amplitude's internal IDs
+- GET_USER_ACTIVITY requires Amplitude's internal ID, not your user_id
+
+**Event Timestamps**:
+- Must be in milliseconds since epoch (13 digits)
+- Seconds (10 digits) will be interpreted as very old dates
+- Omitting timestamp uses server receive time
+
+**Rate Limits**:
+- Event ingestion has throughput limits per project
+- Batch events where possible to reduce API calls
+- Cohort membership updates have async processing limits
+
+**Response Parsing**:
+- Response data may be nested under `data` key
+- User activity returns events in reverse chronological order
+- Cohort lists may include archived cohorts; check status field
+- Parse defensively with fallbacks for optional fields
+
+## Quick Reference
+
+| Task | Tool Slug | Key Params |
+|------|-----------|------------|
+| Send events | AMPLITUDE_SEND_EVENTS | events (array) |
+| Find user | AMPLITUDE_FIND_USER | user |
+| Get user activity | AMPLITUDE_GET_USER_ACTIVITY | user, offset, limit |
+| Identify user | AMPLITUDE_IDENTIFY | user_id, user_properties |
+| List cohorts | AMPLITUDE_LIST_COHORTS | (none) |
+| Get cohort | AMPLITUDE_GET_COHORT | cohort_id |
+| Update cohort members | AMPLITUDE_UPDATE_COHORT_MEMBERSHIP | cohort_id, memberships |
+| Check cohort status | AMPLITUDE_CHECK_COHORT_STATUS | request_id |
+| List event categories | AMPLITUDE_GET_EVENT_CATEGORIES | (none) |
diff --git a/web-app/public/skills/analytics-tracking/SKILL.md b/web-app/public/skills/analytics-tracking/SKILL.md
new file mode 100644
index 00000000..475e43d8
--- /dev/null
+++ b/web-app/public/skills/analytics-tracking/SKILL.md
@@ -0,0 +1,404 @@
+---
+name: analytics-tracking
+description: >
+ Design, audit, and improve analytics tracking systems that produce reliable,
+ decision-ready data. Use when the user wants to set up, fix, or evaluate
+ analytics tracking (GA4, GTM, product analytics, events, conversions, UTMs).
+ This skill focuses on measurement strategy, signal quality, and validation—
+ not just firing events.
+---
+
+# Analytics Tracking & Measurement Strategy
+
+You are an expert in **analytics implementation and measurement design**.
+Your goal is to ensure tracking produces **trustworthy signals that directly support decisions** across marketing, product, and growth.
+
+You do **not** track everything.
+You do **not** optimize dashboards without fixing instrumentation.
+You do **not** treat GA4 numbers as truth unless validated.
+
+---
+
+## Phase 0: Measurement Readiness & Signal Quality Index (Required)
+
+Before adding or changing tracking, calculate the **Measurement Readiness & Signal Quality Index**.
+
+### Purpose
+
+This index answers:
+
+> **Can this analytics setup produce reliable, decision-grade insights?**
+
+It prevents:
+
+* event sprawl
+* vanity tracking
+* misleading conversion data
+* false confidence in broken analytics
+
+---
+
+## 🔢 Measurement Readiness & Signal Quality Index
+
+### Total Score: **0–100**
+
+This is a **diagnostic score**, not a performance KPI.
+
+---
+
+### Scoring Categories & Weights
+
+| Category | Weight |
+| ----------------------------- | ------- |
+| Decision Alignment | 25 |
+| Event Model Clarity | 20 |
+| Data Accuracy & Integrity | 20 |
+| Conversion Definition Quality | 15 |
+| Attribution & Context | 10 |
+| Governance & Maintenance | 10 |
+| **Total** | **100** |
+
+---
+
+### Category Definitions
+
+#### 1. Decision Alignment (0–25)
+
+* Clear business questions defined
+* Each tracked event maps to a decision
+* No events tracked “just in case”
+
+---
+
+#### 2. Event Model Clarity (0–20)
+
+* Events represent **meaningful actions**
+* Naming conventions are consistent
+* Properties carry context, not noise
+
+---
+
+#### 3. Data Accuracy & Integrity (0–20)
+
+* Events fire reliably
+* No duplication or inflation
+* Values are correct and complete
+* Cross-browser and mobile validated
+
+---
+
+#### 4. Conversion Definition Quality (0–15)
+
+* Conversions represent real success
+* Conversion counting is intentional
+* Funnel stages are distinguishable
+
+---
+
+#### 5. Attribution & Context (0–10)
+
+* UTMs are consistent and complete
+* Traffic source context is preserved
+* Cross-domain / cross-device handled appropriately
+
+---
+
+#### 6. Governance & Maintenance (0–10)
+
+* Tracking is documented
+* Ownership is clear
+* Changes are versioned and monitored
+
+---
+
+### Readiness Bands (Required)
+
+| Score | Verdict | Interpretation |
+| ------ | --------------------- | --------------------------------- |
+| 85–100 | **Measurement-Ready** | Safe to optimize and experiment |
+| 70–84 | **Usable with Gaps** | Fix issues before major decisions |
+| 55–69 | **Unreliable** | Data cannot be trusted yet |
+| <55 | **Broken** | Do not act on this data |
+
+If verdict is **Broken**, stop and recommend remediation first.
+
+---
+
+## Phase 1: Context & Decision Definition
+
+(Proceed only after scoring)
+
+### 1. Business Context
+
+* What decisions will this data inform?
+* Who uses the data (marketing, product, leadership)?
+* What actions will be taken based on insights?
+
+---
+
+### 2. Current State
+
+* Tools in use (GA4, GTM, Mixpanel, Amplitude, etc.)
+* Existing events and conversions
+* Known issues or distrust in data
+
+---
+
+### 3. Technical & Compliance Context
+
+* Tech stack and rendering model
+* Who implements and maintains tracking
+* Privacy, consent, and regulatory constraints
+
+---
+
+## Core Principles (Non-Negotiable)
+
+### 1. Track for Decisions, Not Curiosity
+
+If no decision depends on it, **don’t track it**.
+
+---
+
+### 2. Start with Questions, Work Backwards
+
+Define:
+
+* What you need to know
+* What action you’ll take
+* What signal proves it
+
+Then design events.
+
+---
+
+### 3. Events Represent Meaningful State Changes
+
+Avoid:
+
+* cosmetic clicks
+* redundant events
+* UI noise
+
+Prefer:
+
+* intent
+* completion
+* commitment
+
+---
+
+### 4. Data Quality Beats Volume
+
+Fewer accurate events > many unreliable ones.
+
+---
+
+## Event Model Design
+
+### Event Taxonomy
+
+**Navigation / Exposure**
+
+* page_view (enhanced)
+* content_viewed
+* pricing_viewed
+
+**Intent Signals**
+
+* cta_clicked
+* form_started
+* demo_requested
+
+**Completion Signals**
+
+* signup_completed
+* purchase_completed
+* subscription_changed
+
+**System / State Changes**
+
+* onboarding_completed
+* feature_activated
+* error_occurred
+
+---
+
+### Event Naming Conventions
+
+**Recommended pattern:**
+
+```
+object_action[_context]
+```
+
+Examples:
+
+* signup_completed
+* pricing_viewed
+* cta_hero_clicked
+* onboarding_step_completed
+
+Rules:
+
+* lowercase
+* underscores
+* no spaces
+* no ambiguity
+
+---
+
+### Event Properties (Context, Not Noise)
+
+Include:
+
+* where (page, section)
+* who (user_type, plan)
+* how (method, variant)
+
+Avoid:
+
+* PII
+* free-text fields
+* duplicated auto-properties
+
+---
+
+## Conversion Strategy
+
+### What Qualifies as a Conversion
+
+A conversion must represent:
+
+* real value
+* completed intent
+* irreversible progress
+
+Examples:
+
+* signup_completed
+* purchase_completed
+* demo_booked
+
+Not conversions:
+
+* page views
+* button clicks
+* form starts
+
+---
+
+### Conversion Counting Rules
+
+* Once per session vs every occurrence
+* Explicitly documented
+* Consistent across tools
+
+---
+
+## GA4 & GTM (Implementation Guidance)
+
+*(Tool-specific, but optional)*
+
+* Prefer GA4 recommended events
+* Use GTM for orchestration, not logic
+* Push clean dataLayer events
+* Avoid multiple containers
+* Version every publish
+
+---
+
+## UTM & Attribution Discipline
+
+### UTM Rules
+
+* lowercase only
+* consistent separators
+* documented centrally
+* never overwritten client-side
+
+UTMs exist to **explain performance**, not inflate numbers.
+
+---
+
+## Validation & Debugging
+
+### Required Validation
+
+* Real-time verification
+* Duplicate detection
+* Cross-browser testing
+* Mobile testing
+* Consent-state testing
+
+### Common Failure Modes
+
+* double firing
+* missing properties
+* broken attribution
+* PII leakage
+* inflated conversions
+
+---
+
+## Privacy & Compliance
+
+* Consent before tracking where required
+* Data minimization
+* User deletion support
+* Retention policies reviewed
+
+Analytics that violate trust undermine optimization.
+
+---
+
+## Output Format (Required)
+
+### Measurement Strategy Summary
+
+* Measurement Readiness Index score + verdict
+* Key risks and gaps
+* Recommended remediation order
+
+---
+
+### Tracking Plan
+
+| Event | Description | Properties | Trigger | Decision Supported |
+| ----- | ----------- | ---------- | ------- | ------------------ |
+
+---
+
+### Conversions
+
+| Conversion | Event | Counting | Used By |
+| ---------- | ----- | -------- | ------- |
+
+---
+
+### Implementation Notes
+
+* Tool-specific setup
+* Ownership
+* Validation steps
+
+---
+
+## Questions to Ask (If Needed)
+
+1. What decisions depend on this data?
+2. Which metrics are currently trusted or distrusted?
+3. Who owns analytics long term?
+4. What compliance constraints apply?
+5. What tools are already in place?
+
+---
+
+## Related Skills
+
+* **page-cro** – Uses this data for optimization
+* **ab-test-setup** – Requires clean conversions
+* **seo-audit** – Organic performance analysis
+* **programmatic-seo** – Scale requires reliable signals
+
+---
diff --git a/web-app/public/skills/angular-best-practices/README.md b/web-app/public/skills/angular-best-practices/README.md
new file mode 100644
index 00000000..143a521f
--- /dev/null
+++ b/web-app/public/skills/angular-best-practices/README.md
@@ -0,0 +1,58 @@
+# Angular Best Practices
+
+Performance optimization and best practices for Angular applications optimized for AI agents and LLMs.
+
+## Overview
+
+This skill provides prioritized performance guidelines across:
+
+- **Change Detection** - OnPush strategy, Signals, Zoneless apps
+- **Async Operations** - Avoiding waterfalls, SSR preloading
+- **Bundle Optimization** - Lazy loading, `@defer`, tree-shaking
+- **Rendering Performance** - TrackBy, virtual scrolling, CDK
+- **SSR & Hydration** - Server-side rendering patterns
+- **Template Optimization** - Structural directives, pipe memoization
+- **State Management** - Efficient reactivity patterns
+- **Memory Management** - Subscription cleanup, detached refs
+
+## Structure
+
+The `SKILL.md` file is organized by priority:
+
+1. **Critical Priority** - Largest performance gains (change detection, async)
+2. **High Priority** - Significant impact (bundles, rendering)
+3. **Medium Priority** - Noticeable improvements (SSR, templates)
+4. **Low Priority** - Incremental gains (memory, cleanup)
+
+Each rule includes:
+
+- ❌ **WRONG** - What not to do
+- ✅ **CORRECT** - Recommended pattern
+- 📝 **Why** - Explanation of the impact
+
+## Quick Reference Checklist
+
+**For New Components:**
+
+- [ ] Using `ChangeDetectionStrategy.OnPush`
+- [ ] Using Signals for reactive state
+- [ ] Using `@defer` for non-critical content
+- [ ] Using `trackBy` for `*ngFor` loops
+- [ ] No subscriptions without cleanup
+
+**For Performance Reviews:**
+
+- [ ] No async waterfalls (parallel data fetching)
+- [ ] Routes lazy-loaded
+- [ ] Large libraries code-split
+- [ ] Images use `NgOptimizedImage`
+
+## Version
+
+Current version: 1.0.0 (February 2026)
+
+## References
+
+- [Angular Performance](https://angular.dev/guide/performance)
+- [Zoneless Angular](https://angular.dev/guide/zoneless)
+- [Angular SSR](https://angular.dev/guide/ssr)
diff --git a/web-app/public/skills/angular-best-practices/SKILL.md b/web-app/public/skills/angular-best-practices/SKILL.md
new file mode 100644
index 00000000..c2920a58
--- /dev/null
+++ b/web-app/public/skills/angular-best-practices/SKILL.md
@@ -0,0 +1,559 @@
+---
+name: angular-best-practices
+description: Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
+risk: safe
+source: self
+---
+
+# Angular Best Practices
+
+Comprehensive performance optimization guide for Angular applications. Contains prioritized rules for eliminating performance bottlenecks, optimizing bundles, and improving rendering.
+
+## When to Apply
+
+Reference these guidelines when:
+
+- Writing new Angular components or pages
+- Implementing data fetching patterns
+- Reviewing code for performance issues
+- Refactoring existing Angular code
+- Optimizing bundle size or load times
+- Configuring SSR/hydration
+
+---
+
+## Rule Categories by Priority
+
+| Priority | Category | Impact | Focus |
+| -------- | --------------------- | ---------- | ------------------------------- |
+| 1 | Change Detection | CRITICAL | Signals, OnPush, Zoneless |
+| 2 | Async Waterfalls | CRITICAL | RxJS patterns, SSR preloading |
+| 3 | Bundle Optimization | CRITICAL | Lazy loading, tree shaking |
+| 4 | Rendering Performance | HIGH | @defer, trackBy, virtualization |
+| 5 | Server-Side Rendering | HIGH | Hydration, prerendering |
+| 6 | Template Optimization | MEDIUM | Control flow, pipes |
+| 7 | State Management | MEDIUM | Signal patterns, selectors |
+| 8 | Memory Management | LOW-MEDIUM | Cleanup, subscriptions |
+
+---
+
+## 1. Change Detection (CRITICAL)
+
+### Use OnPush Change Detection
+
+```typescript
+// CORRECT - OnPush with Signals
+@Component({
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
+
+
+
+ Initializing generative art...
+ {{ count() }}
`,
+})
+export class CounterComponent {
+ count = signal(0);
+}
+
+// WRONG - Default change detection
+@Component({
+ template: `{{ count }}
`, // Checked every cycle
+})
+export class CounterComponent {
+ count = 0;
+}
+```
+
+### Prefer Signals Over Mutable Properties
+
+```typescript
+// CORRECT - Signals trigger precise updates
+@Component({
+ template: `
+ {{ title() }}
+Count: {{ count() }}
+ `, +}) +export class DashboardComponent { + title = signal("Dashboard"); + count = signal(0); +} + +// WRONG - Mutable properties require zone.js checks +@Component({ + template: ` +{{ title }}
+Count: {{ count }}
+ `, +}) +export class DashboardComponent { + title = "Dashboard"; + count = 0; +} +``` + +### Enable Zoneless for New Projects + +```typescript +// main.ts - Zoneless Angular (v20+) +bootstrapApplication(AppComponent, { + providers: [provideZonelessChangeDetection()], +}); +``` + +**Benefits:** + +- No zone.js patches on async APIs +- Smaller bundle (~15KB savings) +- Clean stack traces for debugging +- Better micro-frontend compatibility + +--- + +## 2. Async Operations & Waterfalls (CRITICAL) + +### Eliminate Sequential Data Fetching + +```typescript +// WRONG - Nested subscriptions create waterfalls +this.route.params.subscribe((params) => { + // 1. Wait for params + this.userService.getUser(params.id).subscribe((user) => { + // 2. Wait for user + this.postsService.getPosts(user.id).subscribe((posts) => { + // 3. Wait for posts + }); + }); +}); + +// CORRECT - Parallel execution with forkJoin +forkJoin({ + user: this.userService.getUser(id), + posts: this.postsService.getPosts(id), +}).subscribe((data) => { + // Fetched in parallel +}); + +// CORRECT - Flatten dependent calls with switchMap +this.route.params + .pipe( + map((p) => p.id), + switchMap((id) => this.userService.getUser(id)), + ) + .subscribe(); +``` + +### Avoid Client-Side Waterfalls in SSR + +```typescript +// CORRECT - Use resolvers or blocking hydration for critical data +export const route: Route = { + path: "profile/:id", + resolve: { data: profileResolver }, // Fetched on server before navigation + component: ProfileComponent, +}; + +// WRONG - Component fetches data on init +class ProfileComponent implements OnInit { + ngOnInit() { + // Starts ONLY after JS loads and component renders + this.http.get("/api/profile").subscribe(); + } +} +``` + +--- + +## 3. Bundle Optimization (CRITICAL) + +### Lazy Load Routes + +```typescript +// CORRECT - Lazy load feature routes +export const routes: Routes = [ + { + path: "admin", + loadChildren: () => + import("./admin/admin.routes").then((m) => m.ADMIN_ROUTES), + }, + { + path: "dashboard", + loadComponent: () => + import("./dashboard/dashboard.component").then( + (m) => m.DashboardComponent, + ), + }, +]; + +// WRONG - Eager loading everything +import { AdminModule } from "./admin/admin.module"; +export const routes: Routes = [ + { path: "admin", component: AdminComponent }, // In main bundle +]; +``` + +### Use @defer for Heavy Components + +```html + +@defer (on viewport) { +
+ {{ item.name }}
+
+ No items
+} + + +{{ user.name }} +{{ data().name }}
`,
+})
+export class Component {
+ data = toSignal(this.service.data$, { initialValue: null });
+}
+
+// WRONG - Manual subscription
+@Component({
+ template: `{{ data?.name }}
`,
+})
+export class Component implements OnInit, OnDestroy {
+ data: Data | null = null;
+ private sub!: Subscription;
+
+ ngOnInit() {
+ this.sub = this.service.data$.subscribe((d) => (this.data = d));
+ }
+
+ ngOnDestroy() {
+ this.sub.unsubscribe();
+ }
+}
+```
+
+---
+
+## Quick Reference Checklist
+
+### New Component
+
+- [ ] `changeDetection: ChangeDetectionStrategy.OnPush`
+- [ ] `standalone: true`
+- [ ] Signals for state (`signal()`, `input()`, `output()`)
+- [ ] `inject()` for dependencies
+- [ ] `@for` with `track` expression
+
+### Performance Review
+
+- [ ] No methods in templates (use pipes or computed)
+- [ ] Large lists virtualized
+- [ ] Heavy components deferred
+- [ ] Routes lazy-loaded
+- [ ] Third-party libs dynamically imported
+
+### SSR Check
+
+- [ ] Hydration configured
+- [ ] Critical content renders first
+- [ ] Non-critical content uses `@defer (hydrate on ...)`
+- [ ] TransferState for server-fetched data
+
+---
+
+## Resources
+
+- [Angular Performance Guide](https://angular.dev/best-practices/performance)
+- [Zoneless Angular](https://angular.dev/guide/experimental/zoneless)
+- [Angular SSR Guide](https://angular.dev/guide/ssr)
+- [Change Detection Deep Dive](https://angular.dev/guide/change-detection)
diff --git a/web-app/public/skills/angular-best-practices/metadata.json b/web-app/public/skills/angular-best-practices/metadata.json
new file mode 100644
index 00000000..633f57c6
--- /dev/null
+++ b/web-app/public/skills/angular-best-practices/metadata.json
@@ -0,0 +1,13 @@
+{
+ "version": "1.0.0",
+ "organization": "Antigravity Awesome Skills",
+ "date": "February 2026",
+ "abstract": "Performance optimization and best practices guide for Angular applications designed for AI agents and LLMs. Covers change detection strategies (OnPush, Signals, Zoneless), avoiding async waterfalls, bundle optimization with lazy loading and @defer, rendering performance, SSR/hydration patterns, and memory management. Prioritized by impact from critical to incremental improvements.",
+ "references": [
+ "https://angular.dev/best-practices",
+ "https://angular.dev/guide/performance",
+ "https://angular.dev/guide/zoneless",
+ "https://angular.dev/guide/ssr",
+ "https://web.dev/performance"
+ ]
+}
diff --git a/web-app/public/skills/angular-migration/SKILL.md b/web-app/public/skills/angular-migration/SKILL.md
new file mode 100644
index 00000000..89a255c3
--- /dev/null
+++ b/web-app/public/skills/angular-migration/SKILL.md
@@ -0,0 +1,428 @@
+---
+name: angular-migration
+description: Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.
+---
+
+# Angular Migration
+
+Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
+
+## Use this skill when
+
+- Migrating AngularJS (1.x) applications to Angular (2+)
+- Running hybrid AngularJS/Angular applications
+- Converting directives to components
+- Modernizing dependency injection
+- Migrating routing systems
+- Updating to latest Angular versions
+- Implementing Angular best practices
+
+## Do not use this skill when
+
+- You are not migrating from AngularJS to Angular
+- The app is already on a modern Angular version
+- You need only a small UI fix without framework changes
+
+## Instructions
+
+1. Assess the AngularJS codebase, dependencies, and migration risks.
+2. Choose a migration strategy (hybrid vs rewrite) and define milestones.
+3. Set up ngUpgrade and migrate modules, components, and routing.
+4. Validate with tests and plan a safe cutover.
+
+## Safety
+
+- Avoid big-bang cutovers without rollback and staging validation.
+- Keep hybrid compatibility testing during incremental migration.
+
+## Migration Strategies
+
+### 1. Big Bang (Complete Rewrite)
+- Rewrite entire app in Angular
+- Parallel development
+- Switch over at once
+- **Best for:** Small apps, green field projects
+
+### 2. Incremental (Hybrid Approach)
+- Run AngularJS and Angular side-by-side
+- Migrate feature by feature
+- ngUpgrade for interop
+- **Best for:** Large apps, continuous delivery
+
+### 3. Vertical Slice
+- Migrate one feature completely
+- New features in Angular, maintain old in AngularJS
+- Gradually replace
+- **Best for:** Medium apps, distinct features
+
+## Hybrid App Setup
+
+```typescript
+// main.ts - Bootstrap hybrid app
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { UpgradeModule } from '@angular/upgrade/static';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+ .bootstrapModule(AppModule)
+ .then(platformRef => {
+ const upgrade = platformRef.injector.get(UpgradeModule);
+ // Bootstrap AngularJS
+ upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
+ });
+```
+
+```typescript
+// app.module.ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ UpgradeModule
+ ]
+})
+export class AppModule {
+ constructor(private upgrade: UpgradeModule) {}
+
+ ngDoBootstrap() {
+ // Bootstrapped manually in main.ts
+ }
+}
+```
+
+## Component Migration
+
+### AngularJS Controller → Angular Component
+```javascript
+// Before: AngularJS controller
+angular.module('myApp').controller('UserController', function($scope, UserService) {
+ $scope.user = {};
+
+ $scope.loadUser = function(id) {
+ UserService.getUser(id).then(function(user) {
+ $scope.user = user;
+ });
+ };
+
+ $scope.saveUser = function() {
+ UserService.saveUser($scope.user);
+ };
+});
+```
+
+```typescript
+// After: Angular component
+import { Component, OnInit } from '@angular/core';
+import { UserService } from './user.service';
+
+@Component({
+ selector: 'app-user',
+ template: `
+
+
+ `
+})
+export class UserComponent implements OnInit {
+ user: any = {};
+
+ constructor(private userService: UserService) {}
+
+ ngOnInit() {
+ this.loadUser(1);
+ }
+
+ loadUser(id: number) {
+ this.userService.getUser(id).subscribe(user => {
+ this.user = user;
+ });
+ }
+
+ saveUser() {
+ this.userService.saveUser(this.user);
+ }
+}
+```
+
+### AngularJS Directive → Angular Component
+```javascript
+// Before: AngularJS directive
+angular.module('myApp').directive('userCard', function() {
+ return {
+ restrict: 'E',
+ scope: {
+ user: '=',
+ onDelete: '&'
+ },
+ template: `
+ {{ user.name }}
+ +
+
+ `
+ };
+});
+```
+
+```typescript
+// After: Angular component
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+ selector: 'app-user-card',
+ template: `
+ {{ user.name }}
+ +
+
+ `
+})
+export class UserCardComponent {
+ @Input() user: any;
+ @Output() delete = new EventEmitter{{ user.name }}
+ +Count: {{ counter.count() }}
+Doubled: {{ counter.doubled() }}
+ + `, +}) +export class CounterComponent { + counter = inject(CounterService); +} +``` + +### Pattern 2: Feature Signal Store + +```typescript +// stores/user.store.ts +import { Injectable, signal, computed, inject } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { toSignal } from "@angular/core/rxjs-interop"; + +interface User { + id: string; + name: string; + email: string; +} + +interface UserState { + user: User | null; + loading: boolean; + error: string | null; +} + +@Injectable({ providedIn: "root" }) +export class UserStore { + private http = inject(HttpClient); + + // State signals + private _user = signalWelcome, {{ user.name }}
+ + } + `, +}) +export class HeaderComponent { + private store = inject(Store); + + user = this.store.selectSignal(selectUser); + loading = this.store.selectSignal(selectUserLoading); + + logout() { + this.store.dispatch(UserActions.logout()); + } +} +``` + +--- + +## RxJS-Based Patterns + +### Component Store (Local Feature State) + +```typescript +// stores/todo.store.ts +import { Injectable } from "@angular/core"; +import { ComponentStore } from "@ngrx/component-store"; +import { switchMap, tap, catchError, EMPTY } from "rxjs"; + +interface TodoState { + todos: Todo[]; + loading: boolean; +} + +@Injectable() +export class TodoStore extends ComponentStore
+ ![]()
+
+ `,
+})
+export class ErrorStateComponent {
+ title = input("Something went wrong");
+ message = input("An unexpected error occurred");
+ retry = output{{ title() }}
+{{ message() }}
+ @if (retry.observed) { + + } +
+
+
+ `,
+})
+export class EmptyStateComponent {
+ icon = input("inbox");
+ title = input.required{{ title() }}
+{{ description() }}
+ @if (actionLabel()) { + + } +
+
+ `,
+})
+export class UserCardComponent {
+ // Signal inputs (read-only)
+ id = input.required{{ name() }}
+ {{ role() }} + +Count: {{ count() }}
+
+ `,
+})
+export class CounterComponent {
+ count = signal(0);
+
+ increment() {
+ this.count.update((v) => v + 1);
+ // No zone.js needed - Signal triggers change detection
+ }
+}
+```
+
+### Key Zoneless Benefits
+
+- **Performance**: No zone.js patches on async APIs
+- **Debugging**: Clean stack traces without zone wrappers
+- **Bundle size**: Smaller without zone.js (~15KB savings)
+- **Interoperability**: Better with Web Components and micro-frontends
+
+---
+
+## 4. Server-Side Rendering & Hydration
+
+### SSR Setup with Angular CLI
+
+```bash
+ng add @angular/ssr
+```
+
+### Hydration Configuration
+
+```typescript
+// app.config.ts
+import { ApplicationConfig } from "@angular/core";
+import {
+ provideClientHydration,
+ withEventReplay,
+} from "@angular/platform-browser";
+
+export const appConfig: ApplicationConfig = {
+ providers: [provideClientHydration(withEventReplay())],
+};
+```
+
+### Incremental Hydration (v20+)
+
+```typescript
+import { Component } from "@angular/core";
+
+@Component({
+ selector: "app-page",
+ standalone: true,
+ template: `
+
+
+ `
+})
+export class CardComponent {}
+
+// Usage
+
+
+
+
+
+
+ Title
+Body content
+Failed to load chart
+ } + ` +}) +``` + +### NgOptimizedImage + +```typescript +import { NgOptimizedImage } from '@angular/common'; + +@Component({ + imports: [NgOptimizedImage], + template: ` +Test
+ + + +<h1>Encoded</h1> +%3Ch1%3EURL%20Encoded%3C%2Fh1%3E + + +Hover me
+Test
", + "Bold", + "", + "Styled
",
+ "",
+ "",
+]
+
+for payload in payloads:
+ encoded = urllib.parse.quote(payload)
+ url = f"{target}?{param}={encoded}"
+
+ try:
+ response = requests.get(url, timeout=5)
+ if payload.lower() in response.text.lower():
+ print(f"[+] Possible injection: {payload}")
+ elif "" in response.text or "" in response.text: + print(f"[?] Partial reflection: {payload}") + except Exception as e: + print(f"[-] Error: {e}") +``` + +### Phase 10: Prevention and Remediation + +Secure coding practices: + +```php +// PHP: Escape output +echo htmlspecialchars($user_input, ENT_QUOTES, 'UTF-8'); + +// PHP: Strip tags +echo strip_tags($user_input); + +// PHP: Allow specific tags only +echo strip_tags($user_input, '
');
+```
+
+```python
+# Python: HTML escape
+from html import escape
+safe_output = escape(user_input)
+
+# Python Flask: Auto-escaping
+{{ user_input }} # Jinja2 escapes by default
+{{ user_input | safe }} # Marks as safe (dangerous!)
+```
+
+```javascript
+// JavaScript: Text content (safe)
+element.textContent = userInput;
+
+// JavaScript: innerHTML (dangerous!)
+element.innerHTML = userInput; // Vulnerable!
+
+// JavaScript: Sanitize
+const clean = DOMPurify.sanitize(userInput);
+element.innerHTML = clean;
+```
+
+Server-side protections:
+- Input validation (whitelist allowed characters)
+- Output encoding (context-aware escaping)
+- Content Security Policy (CSP) headers
+- Web Application Firewall (WAF) rules
+
+## Quick Reference
+
+### Common Test Payloads
+
+| Payload | Purpose |
+|---------|---------|
+| `Test
` | Basic rendering test |
+| `Bold` | Simple formatting |
+| `Link` | Link injection |
+| `` | Image tag test |
+| `
` | Style injection |
+| `