openclaw-node-harness 2.0.0

package/skills/twitter/scripts/twitter.sh

@@ -0,0 +1,421 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# twitter.sh — X/Twitter API v2 client with OAuth 1.0a signing
+# Dependencies: curl, openssl, jq
+# Env: TWITTER_API_KEY, TWITTER_API_SECRET, TWITTER_ACCESS_TOKEN, TWITTER_ACCESS_TOKEN_SECRET
+
+BASE_URL="https://api.x.com/2"
+SYNDICATION_URL="https://cdn.syndication.twimg.com"
+
+# --- Env check -----------------------------------------------------------
+
+check_env() {
+  local missing=()
+  [[ -z "${TWITTER_API_KEY:-}" ]] && missing+=("TWITTER_API_KEY")
+  [[ -z "${TWITTER_API_SECRET:-}" ]] && missing+=("TWITTER_API_SECRET")
+  [[ -z "${TWITTER_ACCESS_TOKEN:-}" ]] && missing+=("TWITTER_ACCESS_TOKEN")
+  [[ -z "${TWITTER_ACCESS_TOKEN_SECRET:-}" ]] && missing+=("TWITTER_ACCESS_TOKEN_SECRET")
+  if [[ ${#missing[@]} -gt 0 ]]; then
+    echo "Error: Missing environment variables: ${missing[*]}" >&2
+    echo "Get them from https://developer.x.com → Dashboard → App → Keys and Tokens" >&2
+    exit 1
+  fi
+}
+
+# --- OAuth 1.0a -----------------------------------------------------------
+
+# RFC 3986 percent-encode (pure bash + printf, no curl dependency)
+pct_encode() {
+  local string="$1" i c o
+  local length=${#string}
+  for (( i = 0; i < length; i++ )); do
+    c="${string:i:1}"
+    case "$c" in
+      [A-Za-z0-9._~-]) o+="$c" ;;
+      *) o+=$(printf '%%%02X' "'$c") ;;
+    esac
+  done
+  printf '%s' "$o"
+}
+
+# Generate OAuth 1.0a signature and Authorization header
+oauth_header() {
+  local method="$1"
+  local url="$2"
+  local body_params="${3:-}"
+
+  local nonce
+  nonce=$(openssl rand -hex 16)
+  local timestamp
+  timestamp=$(date +%s)
+
+  # Collect OAuth params
+  local -a params=(
+    "oauth_consumer_key=$(pct_encode "$TWITTER_API_KEY")"
+    "oauth_nonce=$(pct_encode "$nonce")"
+    "oauth_signature_method=HMAC-SHA1"
+    "oauth_timestamp=$timestamp"
+    "oauth_token=$(pct_encode "$TWITTER_ACCESS_TOKEN")"
+    "oauth_version=1.0"
+  )
+
+  # Add body params if present (for form-encoded POST)
+  if [[ -n "$body_params" ]]; then
+    while IFS= read -r line; do
+      [[ -n "$line" ]] && params+=("$line")
+    done <<< "$body_params"
+  fi
+
+  # Sort and join
+  local sorted
+  sorted=$(printf '%s\n' "${params[@]}" | sort)
+  local param_string
+  param_string=$(printf '%s\n' "$sorted" | paste -sd '&' -)
+
+  # Signature base string
+  local sig_base
+  sig_base="${method}&$(pct_encode "$url")&$(pct_encode "$param_string")"
+
+  # Signing key
+  local signing_key
+  signing_key="$(pct_encode "$TWITTER_API_SECRET")&$(pct_encode "$TWITTER_ACCESS_TOKEN_SECRET")"
+
+  # HMAC-SHA1 signature
+  local signature
+  signature=$(printf '%s' "$sig_base" | openssl dgst -sha1 -hmac "$signing_key" -binary | base64)
+
+  # Build Authorization header
+  printf 'OAuth oauth_consumer_key="%s", oauth_nonce="%s", oauth_signature="%s", oauth_signature_method="HMAC-SHA1", oauth_timestamp="%s", oauth_token="%s", oauth_version="1.0"' \
+    "$(pct_encode "$TWITTER_API_KEY")" \
+    "$(pct_encode "$nonce")" \
+    "$(pct_encode "$signature")" \
+    "$timestamp" \
+    "$(pct_encode "$TWITTER_ACCESS_TOKEN")"
+}
+
+# --- API calls ------------------------------------------------------------
+
+api_get() {
+  local url="$1"
+  local auth
+  auth=$(oauth_header "GET" "$url")
+  curl -sf -H "Authorization: $auth" "$url" 2>&1 || {
+    # Re-run without -f to get error body
+    curl -s -H "Authorization: $(oauth_header "GET" "$url")" "$url"
+  }
+}
+
+api_post_json() {
+  local url="$1"
+  local json_body="$2"
+  local auth
+  auth=$(oauth_header "POST" "$url")
+  local response
+  local http_code
+  response=$(curl -s -w "\n%{http_code}" \
+    -H "Authorization: $auth" \
+    -H "Content-Type: application/json" \
+    -d "$json_body" \
+    "$url")
+  http_code=$(echo "$response" | tail -1)
+  local body
+  body=$(echo "$response" | sed '$d')
+
+  if [[ "$http_code" -ge 200 && "$http_code" -lt 300 ]]; then
+    echo "$body"
+  else
+    echo "HTTP $http_code" >&2
+    echo "$body" >&2
+    return 1
+  fi
+}
+
+api_delete() {
+  local url="$1"
+  local auth
+  auth=$(oauth_header "DELETE" "$url")
+  local response
+  local http_code
+  response=$(curl -s -w "\n%{http_code}" \
+    -X DELETE \
+    -H "Authorization: $auth" \
+    "$url")
+  http_code=$(echo "$response" | tail -1)
+  local body
+  body=$(echo "$response" | sed '$d')
+
+  if [[ "$http_code" -ge 200 && "$http_code" -lt 300 ]]; then
+    echo "$body"
+  else
+    echo "HTTP $http_code" >&2
+    echo "$body" >&2
+    return 1
+  fi
+}
+
+# --- Commands -------------------------------------------------------------
+
+cmd_whoami() {
+  local url="${BASE_URL}/users/me?user.fields=username,name,id,public_metrics"
+  local result
+  result=$(api_get "$url")
+  if echo "$result" | jq -e '.data' >/dev/null 2>&1; then
+    echo "$result" | jq '{
+      id: .data.id,
+      name: .data.name,
+      username: .data.username,
+      followers: .data.public_metrics.followers_count,
+      following: .data.public_metrics.following_count,
+      tweets: .data.public_metrics.tweet_count
+    }'
+  else
+    echo "Auth failed. Check your credentials." >&2
+    echo "$result" >&2
+    return 1
+  fi
+}
+
+cmd_post() {
+  local text="$1"
+  if [[ -z "$text" ]]; then
+    echo "Usage: twitter.sh post \"<text>\"" >&2
+    return 1
+  fi
+  if [[ ${#text} -gt 280 ]]; then
+    echo "Error: Tweet exceeds 280 characters (${#text})" >&2
+    return 1
+  fi
+
+  local json
+  json=$(jq -nc --arg t "$text" '{text: $t}')
+  local result
+  result=$(api_post_json "${BASE_URL}/tweets" "$json")
+  if echo "$result" | jq -e '.data.id' >/dev/null 2>&1; then
+    local tweet_id
+    tweet_id=$(echo "$result" | jq -r '.data.id')
+    echo "$result" | jq '{id: .data.id, text: .data.text}'
+    echo "Posted: https://x.com/i/status/$tweet_id" >&2
+  else
+    echo "Post failed:" >&2
+    echo "$result" >&2
+    return 1
+  fi
+}
+
+cmd_delete() {
+  local tweet_id="$1"
+  if [[ -z "$tweet_id" ]]; then
+    echo "Usage: twitter.sh delete <tweet_id>" >&2
+    return 1
+  fi
+  local result
+  result=$(api_delete "${BASE_URL}/tweets/${tweet_id}")
+  if echo "$result" | jq -e '.data.deleted' >/dev/null 2>&1; then
+    echo "Deleted tweet $tweet_id"
+  else
+    echo "Delete failed:" >&2
+    echo "$result" >&2
+    return 1
+  fi
+}
+
+cmd_lookup() {
+  local username="$1"
+  if [[ -z "$username" ]]; then
+    echo "Usage: twitter.sh lookup <username>" >&2
+    return 1
+  fi
+  # Strip leading @ if present
+  username="${username#@}"
+  local url="${BASE_URL}/users/by/username/${username}?user.fields=name,username,id,description,public_metrics,created_at,profile_image_url"
+  local result
+  result=$(api_get "$url")
+  if echo "$result" | jq -e '.data' >/dev/null 2>&1; then
+    echo "$result" | jq '{
+      id: .data.id,
+      name: .data.name,
+      username: .data.username,
+      bio: .data.description,
+      followers: .data.public_metrics.followers_count,
+      following: .data.public_metrics.following_count,
+      tweets: .data.public_metrics.tweet_count,
+      created: .data.created_at,
+      avatar: .data.profile_image_url
+    }'
+  else
+    echo "Lookup failed for @$username:" >&2
+    echo "$result" >&2
+    return 1
+  fi
+}
+
+# --- Public read (syndication, no auth) ------------------------------------
+
+# Extract tweet ID from URL or raw ID
+parse_tweet_id() {
+  local input="$1"
+  # Handle full URLs: https://x.com/user/status/123 or https://twitter.com/user/status/123
+  if [[ "$input" =~ status/([0-9]+) ]]; then
+    echo "${BASH_REMATCH[1]}"
+  elif [[ "$input" =~ ^[0-9]+$ ]]; then
+    echo "$input"
+  else
+    echo "Error: Cannot parse tweet ID from: $input" >&2
+    return 1
+  fi
+}
+
+cmd_read() {
+  local input="$1"
+  if [[ -z "$input" ]]; then
+    echo "Usage: twitter.sh read <tweet_id_or_url>" >&2
+    return 1
+  fi
+  local tweet_id
+  tweet_id=$(parse_tweet_id "$input") || return 1
+
+  local result
+  result=$(curl -s "${SYNDICATION_URL}/tweet-result?id=${tweet_id}&token=0")
+
+  if echo "$result" | jq -e '.text' >/dev/null 2>&1; then
+    echo "$result" | jq '{
+      id: .id_str,
+      author: .user.screen_name,
+      author_name: .user.name,
+      text: .text,
+      created_at: .created_at,
+      likes: .favorite_count,
+      replies: .conversation_count,
+      quoted_tweet: (if .quoted_tweet then {
+        author: .quoted_tweet.user.screen_name,
+        text: .quoted_tweet.text,
+        article_title: .quoted_tweet.article.title,
+        article_preview: .quoted_tweet.article.preview_text
+      } else null end),
+      article: (if .article then {
+        title: .article.title,
+        preview: .article.preview_text
+      } else null end)
+    }'
+  else
+    echo "Could not read tweet $tweet_id" >&2
+    echo "$result" >&2
+    return 1
+  fi
+}
+
+cmd_timeline() {
+  local username="$1"
+  local count="${2:-5}"
+  if [[ -z "$username" ]]; then
+    echo "Usage: twitter.sh timeline <username> [count]" >&2
+    return 1
+  fi
+  username="${username#@}"
+
+  local result
+  result=$(curl -s "${SYNDICATION_URL}/srv/timeline-profile/screen-name/${username}")
+
+  if [[ -z "$result" || "$result" == "null" ]]; then
+    echo "Could not fetch timeline for @$username" >&2
+    return 1
+  fi
+
+  # The timeline endpoint returns HTML with embedded JSON. Extract tweet data.
+  # Try the JSON data-props approach first
+  local tweets_json
+  tweets_json=$(echo "$result" | sed -n 's/.*data-props="\([^"]*\)".*/\1/p' | sed 's/&quot;/"/g; s/&amp;/\&/g; s/&lt;/</g; s/&gt;/>/g; s/&#39;/'"'"'/g')
+
+  if [[ -n "$tweets_json" ]] && echo "$tweets_json" | jq -e '.timeline' >/dev/null 2>&1; then
+    echo "$tweets_json" | jq --argjson n "$count" '[
+      .timeline.entries[]
+      | select(.content.tweet)
+      | .content.tweet
+      | {
+          id: .id_str,
+          text: .text,
+          created_at: .created_at,
+          likes: .favorite_count,
+          retweets: .retweet_count
+        }
+    ][:$n]'
+  else
+    # Fallback: try extracting tweet IDs from the HTML and fetch individually
+    local tweet_ids
+    tweet_ids=$(echo "$result" | grep -oE 'status/[0-9]+' | grep -oE '[0-9]+' | head -n "$count" | sort -u)
+
+    if [[ -z "$tweet_ids" ]]; then
+      echo "Could not parse timeline for @$username. The syndication format may have changed." >&2
+      return 1
+    fi
+
+    echo "["
+    local first=true
+    while IFS= read -r tid; do
+      [[ -z "$tid" ]] && continue
+      local tweet
+      tweet=$(curl -s "${SYNDICATION_URL}/tweet-result?id=${tid}&token=0")
+      if echo "$tweet" | jq -e '.text' >/dev/null 2>&1; then
+        [[ "$first" == "true" ]] || echo ","
+        echo "$tweet" | jq '{
+          id: .id_str,
+          author: .user.screen_name,
+          text: .text,
+          created_at: .created_at,
+          likes: .favorite_count
+        }'
+        first=false
+      fi
+    done <<< "$tweet_ids"
+    echo "]"
+  fi
+}
+
+# --- Main -----------------------------------------------------------------
+
+usage() {
+  cat <<EOF
+twitter.sh — X/Twitter API v2 client (Free tier + syndication read)
+
+Usage (auth required — set env vars):
+  twitter.sh whoami                  Verify credentials
+  twitter.sh post "<text>"           Post a tweet (max 280 chars)
+  twitter.sh delete <tweet_id>       Delete a tweet
+  twitter.sh lookup <username>       Look up a user
+
+Usage (no auth — public syndication):
+  twitter.sh read <tweet_id_or_url>  Read a tweet by ID or URL
+  twitter.sh timeline <user> [n]     Read last n tweets (default 5)
+
+Environment (for auth commands only):
+  TWITTER_API_KEY                    API key (consumer key)
+  TWITTER_API_SECRET                 API secret (consumer secret)
+  TWITTER_ACCESS_TOKEN               Access token
+  TWITTER_ACCESS_TOKEN_SECRET        Access token secret
+
+Get credentials at https://developer.x.com
+EOF
+}
+
+main() {
+  local cmd="${1:-}"
+  shift || true
+
+  case "$cmd" in
+    whoami)   check_env; cmd_whoami ;;
+    post)     check_env; cmd_post "${1:-}" ;;
+    delete)   check_env; cmd_delete "${1:-}" ;;
+    lookup)   check_env; cmd_lookup "${1:-}" ;;
+    read)     cmd_read "${1:-}" ;;
+    timeline) cmd_timeline "${1:-}" "${2:-5}" ;;
+    help|-h|--help) usage ;;
+    *)
+      echo "Unknown command: $cmd" >&2
+      usage >&2
+      exit 1
+      ;;
+  esac
+}
+
+main "$@"

package/skills/ui-ux-pro-max/.clawhub/origin.json

@@ -0,0 +1,7 @@
+{
+  "version": 1,
+  "registry": "https://clawhub.ai",
+  "slug": "ui-ux-pro-max",
+  "installedVersion": "0.1.0",
+  "installedAt": 1770236316928
+}

package/skills/ui-ux-pro-max/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: ui-ux-pro-max
+description: "UI/UX design intelligence and implementation guidance. Use when the user needs UI layouts, UX flows, design systems, component specs, accessibility audits, or frontend design critique and refinement."
+triggers:
+  - "design a UI for"
+  - "improve the UX of"
+  - "create a design system"
+  - "make this look better"
+  - "accessibility audit"
+negative_triggers:
+  - "fix this backend bug"
+  - "write unit tests"
+  - "deploy to production"
+  - "optimize database queries"
+---
+
+Follow these steps to deliver high-quality UI/UX output with minimal back-and-forth.
+
+## 1) Triage
+Ask only what you must to avoid wrong work:
+- Target platform: web / iOS / Android / desktop
+- Stack (if code changes): React/Next/Vue/Svelte, CSS/Tailwind, component library
+- Goal and constraints: conversion, speed, brand vibe, accessibility level (WCAG AA?)
+- What you have: screenshot, Figma, repo, URL, user journey
+
+If the user says "全部都要" (design + UX + code + design system), treat it as four deliverables and ship in that order.
+
+## 2) Produce Deliverables (pick what fits)
+Always be concrete: name components, states, spacing, typography, and interactions.
+
+- **UI concept + layout**: Provide a clear visual direction, grid, typography, color system, key screens/sections.
+- **UX flow**: Map the user journey, critical paths, error/empty/loading states, edge cases.
+- **Design system**: Tokens (color/typography/spacing/radius/shadow), component rules, accessibility notes.
+- **Implementation plan**: Exact file-level edits, component breakdown, and acceptance criteria.
+
+## 3) Use Bundled Assets
+This skill bundles data you can cite for inspiration/standards.
+
+- **Design intelligence data**: Read from `skills/ui-ux-pro-max/assets/data/` when you need palettes, patterns, or UI/UX heuristics.
+- **Upstream reference**: If you need more phrasing/examples, consult `skills/ui-ux-pro-max/references/upstream-skill-content.md`.
+
+## 4) Optional Script (Design System Generator)
+If you need to quickly generate tokens and page-specific overrides, use the bundled script:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/design_system.py --help
+```
+
+Prefer running it when the user wants a structured token output (ASCII-friendly).
+
+## Output Standards
+- Default to ASCII-only tokens/variables unless the project already uses Unicode.
+- Include: spacing scale, type scale, 2-3 font pair options, color tokens, component states.
+- Always cover: empty/loading/error, keyboard navigation, focus states, contrast.

package/skills/ui-ux-pro-max/assets/data/charts.csv

@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
+19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS
+24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click

package/skills/ui-ux-pro-max/assets/data/colors.csv

@@ -0,0 +1,97 @@
+No,Product Type,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex),Text (Hex),Border (Hex),Notes
+1,SaaS (General),#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust blue + orange CTA contrast
+2,Micro SaaS,#6366F1,#818CF8,#10B981,#F5F3FF,#1E1B4B,#E0E7FF,Indigo primary + emerald CTA
+3,E-commerce,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Success green + urgency orange
+4,E-commerce Luxury,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium dark + gold accent
+5,Service Landing Page,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue trust + warm CTA
+6,B2B Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional navy + blue CTA
+7,Financial Dashboard,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Dark bg + green positive indicators
+8,Analytics Dashboard,#1E40AF,#3B82F6,#F59E0B,#F8FAFC,#1E3A8A,#DBEAFE,Blue data + amber highlights
+9,Healthcare App,#0891B2,#22D3EE,#059669,#ECFEFF,#164E63,#A5F3FC,Calm cyan + health green
+10,Educational App,#4F46E5,#818CF8,#F97316,#EEF2FF,#1E1B4B,#C7D2FE,Playful indigo + energetic orange
+11,Creative Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + cyan accent
+12,Portfolio/Personal,#18181B,#3F3F46,#2563EB,#FAFAFA,#09090B,#E4E4E7,Monochrome + blue accent
+13,Gaming,#7C3AED,#A78BFA,#F43F5E,#0F0F23,#E2E8F0,#4C1D95,Neon purple + rose action
+14,Government/Public Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,High contrast navy + blue
+15,Fintech/Crypto,#F59E0B,#FBBF24,#8B5CF6,#0F172A,#F8FAFC,#334155,Gold trust + purple tech
+16,Social Media App,#E11D48,#FB7185,#2563EB,#FFF1F2,#881337,#FECDD3,Vibrant rose + engagement blue
+17,Productivity Tool,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Teal focus + action orange
+18,Design System/Component Library,#4F46E5,#6366F1,#F97316,#EEF2FF,#312E81,#C7D2FE,Indigo brand + doc hierarchy
+19,AI/Chatbot Platform,#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,AI purple + cyan interactions
+20,NFT/Web3 Platform,#8B5CF6,#A78BFA,#FBBF24,#0F0F23,#F8FAFC,#4C1D95,Purple tech + gold value
+21,Creator Economy Platform,#EC4899,#F472B6,#F97316,#FDF2F8,#831843,#FBCFE8,Creator pink + engagement orange
+22,Sustainability/ESG Platform,#059669,#10B981,#0891B2,#ECFDF5,#064E3B,#A7F3D0,Nature green + ocean blue
+23,Remote Work/Collaboration Tool,#6366F1,#818CF8,#10B981,#F5F3FF,#312E81,#E0E7FF,Calm indigo + success green
+24,Mental Health App,#8B5CF6,#C4B5FD,#10B981,#FAF5FF,#4C1D95,#EDE9FE,Calming lavender + wellness green
+25,Pet Tech App,#F97316,#FB923C,#2563EB,#FFF7ED,#9A3412,#FED7AA,Playful orange + trust blue
+26,Smart Home/IoT Dashboard,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Dark tech + status green
+27,EV/Charging Ecosystem,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Electric cyan + eco green
+28,Subscription Box Service,#D946EF,#E879F9,#F97316,#FDF4FF,#86198F,#F5D0FE,Excitement purple + urgency orange
+29,Podcast Platform,#1E1B4B,#312E81,#F97316,#0F0F23,#F8FAFC,#4338CA,Dark audio + warm accent
+30,Dating App,#E11D48,#FB7185,#F97316,#FFF1F2,#881337,#FECDD3,Romantic rose + warm orange
+31,Micro-Credentials/Badges Platform,#0369A1,#0EA5E9,#CA8A04,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + achievement gold
+32,Knowledge Base/Documentation,#475569,#64748B,#2563EB,#F8FAFC,#1E293B,#E2E8F0,Neutral grey + link blue
+33,Hyperlocal Services,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Location green + action orange
+34,Beauty/Spa/Wellness Service,#EC4899,#F9A8D4,#8B5CF6,#FDF2F8,#831843,#FBCFE8,Soft pink + lavender luxury
+35,Luxury/Premium Brand,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium black + gold accent
+36,Restaurant/Food Service,#DC2626,#F87171,#CA8A04,#FEF2F2,#450A0A,#FECACA,Appetizing red + warm gold
+37,Fitness/Gym App,#F97316,#FB923C,#22C55E,#1F2937,#F8FAFC,#374151,Energy orange + success green
+38,Real Estate/Property,#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Trust teal + professional blue
+39,Travel/Tourism Agency,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue + adventure orange
+40,Hotel/Hospitality,#1E3A8A,#3B82F6,#CA8A04,#F8FAFC,#1E40AF,#BFDBFE,Luxury navy + gold service
+41,Wedding/Event Planning,#DB2777,#F472B6,#CA8A04,#FDF2F8,#831843,#FBCFE8,Romantic pink + elegant gold
+42,Legal Services,#1E3A8A,#1E40AF,#B45309,#F8FAFC,#0F172A,#CBD5E1,Authority navy + trust gold
+43,Insurance Platform,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Security blue + protected green
+44,Banking/Traditional Finance,#0F172A,#1E3A8A,#CA8A04,#F8FAFC,#020617,#E2E8F0,Trust navy + premium gold
+45,Online Course/E-learning,#0D9488,#2DD4BF,#F97316,#F0FDFA,#134E4A,#5EEAD4,Progress teal + achievement orange
+46,Non-profit/Charity,#0891B2,#22D3EE,#F97316,#ECFEFF,#164E63,#A5F3FC,Compassion blue + action orange
+47,Music Streaming,#1E1B4B,#4338CA,#22C55E,#0F0F23,#F8FAFC,#312E81,Dark audio + play green
+48,Video Streaming/OTT,#0F0F23,#1E1B4B,#E11D48,#000000,#F8FAFC,#312E81,Cinema dark + play red
+49,Job Board/Recruitment,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Professional blue + success green
+50,Marketplace (P2P),#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Trust purple + transaction green
+51,Logistics/Delivery,#2563EB,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Tracking blue + delivery orange
+52,Agriculture/Farm Tech,#15803D,#22C55E,#CA8A04,#F0FDF4,#14532D,#BBF7D0,Earth green + harvest gold
+53,Construction/Architecture,#64748B,#94A3B8,#F97316,#F8FAFC,#334155,#E2E8F0,Industrial grey + safety orange
+54,Automotive/Car Dealership,#1E293B,#334155,#DC2626,#F8FAFC,#0F172A,#E2E8F0,Premium dark + action red
+55,Photography Studio,#18181B,#27272A,#F8FAFC,#000000,#FAFAFA,#3F3F46,Pure black + white contrast
+56,Coworking Space,#F59E0B,#FBBF24,#2563EB,#FFFBEB,#78350F,#FDE68A,Energetic amber + booking blue
+57,Cleaning Service,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Fresh cyan + clean green
+58,Home Services (Plumber/Electrician),#1E40AF,#3B82F6,#F97316,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + urgent orange
+59,Childcare/Daycare,#F472B6,#FBCFE8,#22C55E,#FDF2F8,#9D174D,#FCE7F3,Soft pink + safe green
+60,Senior Care/Elderly,#0369A1,#38BDF8,#22C55E,#F0F9FF,#0C4A6E,#E0F2FE,Calm blue + reassuring green
+61,Medical Clinic,#0891B2,#22D3EE,#22C55E,#F0FDFA,#134E4A,#CCFBF1,Medical teal + health green
+62,Pharmacy/Drug Store,#15803D,#22C55E,#0369A1,#F0FDF4,#14532D,#BBF7D0,Pharmacy green + trust blue
+63,Dental Practice,#0EA5E9,#38BDF8,#FBBF24,#F0F9FF,#0C4A6E,#BAE6FD,Fresh blue + smile yellow
+64,Veterinary Clinic,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Caring teal + warm orange
+65,Florist/Plant Shop,#15803D,#22C55E,#EC4899,#F0FDF4,#14532D,#BBF7D0,Natural green + floral pink
+66,Bakery/Cafe,#92400E,#B45309,#F8FAFC,#FEF3C7,#78350F,#FDE68A,Warm brown + cream white
+67,Coffee Shop,#78350F,#92400E,#FBBF24,#FEF3C7,#451A03,#FDE68A,Coffee brown + warm gold
+68,Brewery/Winery,#7C2D12,#B91C1C,#CA8A04,#FEF2F2,#450A0A,#FECACA,Deep burgundy + craft gold
+69,Airline,#1E3A8A,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Sky blue + booking orange
+70,News/Media Platform,#DC2626,#EF4444,#1E40AF,#FEF2F2,#450A0A,#FECACA,Breaking red + link blue
+71,Magazine/Blog,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Editorial black + accent pink
+72,Freelancer Platform,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Creative indigo + hire green
+73,Consulting Firm,#0F172A,#334155,#CA8A04,#F8FAFC,#020617,#E2E8F0,Authority navy + premium gold
+74,Marketing Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + creative cyan
+75,Event Management,#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Excitement purple + action orange
+76,Conference/Webinar Platform,#1E40AF,#3B82F6,#22C55E,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + join green
+77,Membership/Community,#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Community purple + join green
+78,Newsletter Platform,#0369A1,#0EA5E9,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + subscribe orange
+79,Digital Products/Downloads,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Digital indigo + buy green
+80,Church/Religious Organization,#7C3AED,#A78BFA,#CA8A04,#FAF5FF,#4C1D95,#DDD6FE,Spiritual purple + warm gold
+81,Sports Team/Club,#DC2626,#EF4444,#FBBF24,#FEF2F2,#7F1D1D,#FECACA,Team red + championship gold
+82,Museum/Gallery,#18181B,#27272A,#F8FAFC,#FAFAFA,#09090B,#E4E4E7,Gallery black + white space
+83,Theater/Cinema,#1E1B4B,#312E81,#CA8A04,#0F0F23,#F8FAFC,#4338CA,Dramatic dark + spotlight gold
+84,Language Learning App,#4F46E5,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Learning indigo + progress green
+85,Coding Bootcamp,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Terminal dark + success green
+86,Cybersecurity Platform,#00FF41,#0D0D0D,#FF3333,#000000,#E0E0E0,#1F1F1F,Matrix green + alert red
+87,Developer Tool / IDE,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Code dark + run green
+88,Biotech / Life Sciences,#0EA5E9,#0284C7,#10B981,#F0F9FF,#0C4A6E,#BAE6FD,DNA blue + life green
+89,Space Tech / Aerospace,#F8FAFC,#94A3B8,#3B82F6,#0B0B10,#F8FAFC,#1E293B,Star white + launch blue
+90,Architecture / Interior,#171717,#404040,#D4AF37,#FFFFFF,#171717,#E5E5E5,Minimal black + accent gold
+91,Quantum Computing,#00FFFF,#7B61FF,#FF00FF,#050510,#E0E0FF,#333344,Quantum cyan + interference purple
+92,Biohacking / Longevity,#FF4D4D,#4D94FF,#00E676,#F5F5F7,#1C1C1E,#E5E5EA,Bio red/blue + vitality green
+93,Autonomous Systems,#00FF41,#008F11,#FF3333,#0D1117,#E6EDF3,#30363D,Terminal green + alert red
+94,Generative AI Art,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Canvas neutral + creative pink
+95,Spatial / Vision OS,#FFFFFF,#E5E5E5,#007AFF,#888888,#000000,#CCCCCC,Glass white + system blue
+96,Climate Tech,#059669,#10B981,#FBBF24,#ECFDF5,#064E3B,#A7F3D0,Nature green + solar gold