openclaw-genpark-visual-designer

9 files shipped with this skill. Inline text is the catalog copy. The upstream link is the source repository.

• SKILL.md1.8 KB307fa5fb8e83upstream ↗

  ---
  name: openclaw-genpark-visual-designer
  description: OpenClaw GenPark Visual Designer - Golden ratio typography hierarchy scaling, WCAG 2.1 color contrast ratio auditing, and triadic color harmony generation with zero dependencies.
  category: Service
  version: 1.0.0
  license: MIT
  tools:
    - calculate_golden_ratio_typography_scale
    - evaluate_wcag_color_contrast_ratio
    - generate_triadic_color_palette
  ---
  
  # Openclaw Genpark Visual Designer
  
  ## Overview & Agent Behavioral Directives
  You are an autonomous agent specialized in **Openclaw Genpark Visual Designer**.
  Your primary directive is to execute: OpenClaw GenPark Visual Designer - Golden ratio typography hierarchy scaling, WCAG 2.1 color contrast ratio auditing, and triadic color harmony generation with zero dependencies.
  Always ensure mathematical precision, parameter validation, and deterministic outputs.
  
  ## When to Activate This Skill
  - Activate when an agent workflow or user instruction requires:
  - `calculate_golden_ratio_typography_scale`
  - `evaluate_wcag_color_contrast_ratio`
  - `generate_triadic_color_palette`
  - Activate when operating in zero-dependency environments requiring pure Python standard library execution.
  
  ## How to Execute
  
  ### Option 1: Direct Python Execution (Zero-Dependency)
  ```python
  from client import *
  
  # Client operates purely on standard Python library:
  # Initialized and ready for direct function invocation.
  ```
  
  ### Option 2: FastMCP Tool Calling
  Tools registered in `mcp_server.py`:
  - `calculate_golden_ratio_typography_scale`
  - `evaluate_wcag_color_contrast_ratio`
  - `generate_triadic_color_palette`
  
  ## Core Mathematical & Algorithmic Guardrails
  - **Zero-Dependency Policy**: 100% Python standard library only (`math`, `heapq`, `hashlib`, `urllib`, `collections`, `itertools`, `typing`).
  - **Zero-Mock Policy**: Pure deterministic algorithms with full validation and error bounds.
  

• README.md2.0 KB65d1c90d96bdupstream ↗

  # openclaw-genpark-visual-designer
  
  [![OpenClaw](https://img.shields.io/badge/OpenClaw-Ecosystem-blue.svg)](https://github.com/alphaparkinc/openclaw-genpark-visual-designer)
  [![Zero Dependency](https://img.shields.io/badge/Dependencies-Standard_Library_Only-success.svg)](https://www.python.org/)
  [![MCP Ready](https://img.shields.io/badge/MCP-Model_Context_Protocol-orange.svg)](https://modelcontextprotocol.io/)
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
  [![Production Grade](https://img.shields.io/badge/Status-Production_Ready-brightgreen.svg)](https://github.com/Alpha-Park/openclaw-genpark-visual-designer)
  
  Production-grade agentic skill designed for the OpenClaw and GenPark swarms. Built strictly using the Python standard library with zero external runtime dependencies.
  
  ## Architecture & Flow
  
  ```mermaid
  flowchart TD
      A[Agent Planner / Host] -->|Tool Invocation| B(MCP Server Entrypoint)
      B --> C[OpenClawGenParkVisualDesigner]
      C --> D[Deterministic Mathematical Algorithms]
      D --> E[Validated JSON Response]
      E -->|Structured Payload| A
  ```
  
  ## Features
  
  - **Standard Library Only**: 100% Python standard library with no wheels, C-extensions, or pip requirements.
  - **Model Context Protocol (MCP)**: Native FastMCP JSON-RPC interface for seamless tool-calling in Claude, Cursor, and OpenClaw.
  - **Algorithmic Rigor**: Rigorous closed-form mathematical equations and quantitative deterministic metrics.
  - **Multi-Tenant Mirrored**: Dual-deployed across `@alphaparkinc` and `@Alpha-Park`.
  
  ## Installation & Usage
  
  ```bash
  git clone https://github.com/Alpha-Park/openclaw-genpark-visual-designer.git
  cd openclaw-genpark-visual-designer
  python example_usage.py
  ```
  
  ## MCP Configuration
  
  Add to your `claude_desktop_config.json`:
  ```json
  {
    "mcpServers": {
      "openclaw-genpark-visual-designer": {
        "command": "python",
        "args": ["-m", "openclaw-genpark-visual-designer.mcp_server"]
      }
    }
  }
  ```
  
  ## License
  
  MIT License. See [LICENSE](LICENSE) for details.
  

• .gitignore64 Bed8ae579cca3upstream ↗

  __pycache__/\n*.py[cod]\n.env\n.venv/\nvenv/\n*.log\n.DS_Store\n

• client.py5.4 KB0cc1d12f09b2upstream ↗

  # -*- coding: utf-8 -*-
  """
  OpenClaw GenPark Visual Designer Client
  Pure Python Standard Library (Zero External Dependencies)
  Implements Golden Ratio (phi = 1.618) typography scale hierarchy,
  WCAG 2.1 relative luminance color contrast ratio auditing, and triadic color harmony generation.
  """
  
  import math
  from typing import Dict, Any, List, Optional, Tuple
  
  class OpenClawGenParkVisualDesigner:
      """
      Algorithmic UI design system, typography scale, and color harmony engine.
      """
  
      def __init__(self):
          self.phi = (1.0 + math.sqrt(5.0)) / 2.0  # 1.6180339887...
  
      def calculate_golden_ratio_typography_scale(
          self,
          base_font_size_px: float = 16.0,
          scale_ratio: Optional[float] = None
      ) -> Dict[str, Any]:
          """
          Calculates modular typography scale based on Golden Ratio phi or custom geometric ratio:
            Font_Size = Base * (Ratio ^ Step)
          """
          r = scale_ratio if scale_ratio is not None else self.phi
  
          scale = {
              "display": round(base_font_size_px * (r ** 3), 1),
              "h1": round(base_font_size_px * (r ** 2), 1),
              "h2": round(base_font_size_px * (r ** 1.5), 1),
              "h3": round(base_font_size_px * r, 1),
              "body": round(base_font_size_px, 1),
              "small": round(base_font_size_px / r, 1),
              "caption": round(base_font_size_px / (r ** 1.5), 1)
          }
  
          line_heights = {
              k: round(v * 1.35, 1) if v > 24 else round(v * 1.5, 1)
              for k, v in scale.items()
          }
  
          return {
              "base_font_size_px": base_font_size_px,
              "scale_ratio": round(r, 4),
              "typography_hierarchy_px": scale,
              "line_heights_px": line_heights
          }
  
      def _hex_to_rgb(self, hex_str: str) -> Tuple[int, int, int]:
          clean = hex_str.lstrip("#")
          if len(clean) == 3:
              clean = "".join([c * 2 for c in clean])
          val = int(clean, 16)
          return ((val >> 16) & 255, (val >> 8) & 255, val & 255)
  
      def _relative_luminance(self, r: int, g: int, b: int) -> float:
          """
          Calculates sRGB relative luminance according to WCAG 2.1 specs:
            C_srgb = C / 255.0
            C_lin = C_srgb / 12.92 if C_srgb <= 0.03928 else ((C_srgb + 0.055) / 1.055) ^ 2.4
            L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
          """
          def to_lin(c):
              c_s = c / 255.0
              return c_s / 12.92 if c_s <= 0.03928 else ((c_s + 0.055) / 1.055) ** 2.4
  
          return 0.2126 * to_lin(r) + 0.7152 * to_lin(g) + 0.0722 * to_lin(b)
  
      def evaluate_wcag_color_contrast_ratio(
          self,
          foreground_hex: str,
          background_hex: str
      ) -> Dict[str, Any]:
          """
          Calculates WCAG 2.1 color contrast ratio:
            Contrast = (L1 + 0.05) / (L2 + 0.05) where L1 > L2
          Evaluates AA (4.5:1), AAA (7.0:1), and Large Text (3.0:1).
          """
          r1, g1, b1 = self._hex_to_rgb(foreground_hex)
          r2, g2, b2 = self._hex_to_rgb(background_hex)
  
          lum1 = self._relative_luminance(r1, g1, b1)
          lum2 = self._relative_luminance(r2, g2, b2)
  
          lighter = max(lum1, lum2)
          darker = min(lum1, lum2)
  
          contrast = (lighter + 0.05) / (darker + 0.05)
          contrast = round(contrast, 2)
  
          pass_aa_normal = contrast >= 4.5
          pass_aa_large = contrast >= 3.0
          pass_aaa_normal = contrast >= 7.0
          pass_aaa_large = contrast >= 4.5
  
          return {
              "foreground_hex": foreground_hex,
              "background_hex": background_hex,
              "contrast_ratio": contrast,
              "wcag_aa_normal": pass_aa_normal,
              "wcag_aa_large": pass_aa_large,
              "wcag_aaa_normal": pass_aaa_normal,
              "wcag_aaa_large": pass_aaa_large,
              "compliance_rating": "AAA_EXCELLENT" if pass_aaa_normal else ("AA_COMPLIANT" if pass_aa_normal else "FAIL_INSUFFICIENT_CONTRAST")
          }
  
      def generate_triadic_color_palette(
          self,
          seed_hue_degrees: float = 210.0,
          saturation: float = 0.8,
          lightness: float = 0.5
      ) -> Dict[str, Any]:
          """
          Generates 3 harmonized triadic color hues on the color wheel:
            H1 = seed, H2 = (seed + 120) % 360, H3 = (seed + 240) % 360
          Converts HSL to Hex.
          """
          def hsl_to_hex(h, s, l):
              c = (1.0 - abs(2.0 * l - 1.0)) * s
              x = c * (1.0 - abs((h / 60.0) % 2.0 - 1.0))
              m = l - c / 2.0
  
              if 0 <= h < 60:
                  r1, g1, b1 = c, x, 0
              elif 60 <= h < 120:
                  r1, g1, b1 = x, c, 0
              elif 120 <= h < 180:
                  r1, g1, b1 = 0, c, x
              elif 180 <= h < 240:
                  r1, g1, b1 = 0, x, c
              elif 240 <= h < 300:
                  r1, g1, b1 = x, 0, c
              else:
                  r1, g1, b1 = c, 0, x
  
              r = round((r1 + m) * 255)
              g = round((g1 + m) * 255)
              b = round((b1 + m) * 255)
              return f"#{r:02x}{g:02x}{b:02x}"
  
          h1 = seed_hue_degrees % 360.0
          h2 = (seed_hue_degrees + 120.0) % 360.0
          h3 = (seed_hue_degrees + 240.0) % 360.0
  
          return {
              "primary_hex": hsl_to_hex(h1, saturation, lightness),
              "secondary_hex": hsl_to_hex(h2, saturation, lightness),
              "accent_hex": hsl_to_hex(h3, saturation, lightness),
              "triadic_hues_deg": [round(h1, 1), round(h2, 1), round(h3, 1)]
          }
  

• example_usage.py1011 Bd386549367b7upstream ↗

  # -*- coding: utf-8 -*-
  from client import OpenClawGenParkVisualDesigner
  
  designer = OpenClawGenParkVisualDesigner()
  
  # 1. Golden Ratio Typography
  typo = designer.calculate_golden_ratio_typography_scale(base_font_size_px=16.0)
  print(f"Golden Ratio Typography: Base={typo['base_font_size_px']}px (Ratio={typo['scale_ratio']})")
  for tag, sz in typo['typography_hierarchy_px'].items():
      print(f"  {tag.upper()}: {sz}px (Line Height: {typo['line_heights_px'][tag]}px)")
  
  # 2. WCAG Contrast Check
  contrast = designer.evaluate_wcag_color_contrast_ratio("#1e293b", "#ffffff")
  print()
  print(f"WCAG Contrast: Ratio={contrast['contrast_ratio']}:1 ({contrast['compliance_rating']}, AA={contrast['wcag_aa_normal']}, AAA={contrast['wcag_aaa_normal']})")
  
  # 3. Triadic Harmony Palette
  triad = designer.generate_triadic_color_palette(seed_hue_degrees=215.0, saturation=0.85, lightness=0.48)
  print()
  print(f"Triadic Palette: Primary={triad['primary_hex']}, Secondary={triad['secondary_hex']}, Accent={triad['accent_hex']}")
  

• LICENSE1.0 KBbafb53b2fc92upstream ↗

  MIT License
  
  Copyright (c) 2026 AlphaPark Inc.
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
  
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  SOFTWARE.
  

• mcp_server.py1.9 KBe77547576c5bupstream ↗

  # -*- coding: utf-8 -*-
  """
  OpenClaw GenPark Visual Designer MCP Server
  FastMCP standard interface for golden ratio typography, WCAG contrast auditing, and triadic palette generation.
  """
  
  import json
  from typing import Dict, Any, Optional
  from client import OpenClawGenParkVisualDesigner
  
  try:
      from mcp.server.fastmcp import FastMCP
      mcp = FastMCP("openclaw-genpark-visual-designer")
  except ImportError:
      class MockFastMCP:
          def __init__(self, name):
              self.name = name
          def tool(self):
              def decorator(f):
                  return f
              return decorator
      mcp = MockFastMCP("openclaw-genpark-visual-designer")
  
  designer = OpenClawGenParkVisualDesigner()
  
  @mcp.tool()
  def calculate_golden_ratio_typography_scale(
      base_font_size_px: float = 16.0,
      scale_ratio: Optional[float] = None
  ) -> str:
      """
      Calculates modular typography scale based on Golden Ratio phi.
      """
      res = designer.calculate_golden_ratio_typography_scale(base_font_size_px, scale_ratio)
      return json.dumps(res, indent=2)
  
  @mcp.tool()
  def evaluate_wcag_color_contrast_ratio(
      foreground_hex: str,
      background_hex: str
  ) -> str:
      """
      Calculates WCAG 2.1 color contrast ratio and evaluates AA/AAA compliance.
      """
      res = designer.evaluate_wcag_color_contrast_ratio(foreground_hex, background_hex)
      return json.dumps(res, indent=2)
  
  @mcp.tool()
  def generate_triadic_color_palette(
      seed_hue_degrees: float = 210.0,
      saturation: float = 0.8,
      lightness: float = 0.5
  ) -> str:
      """
      Generates 3 harmonized triadic color hues on the color wheel.
      """
      res = designer.generate_triadic_color_palette(seed_hue_degrees, saturation, lightness)
      return json.dumps(res, indent=2)
  
  def main():
      print("Testing Visual Designer:")
      print(evaluate_wcag_color_contrast_ratio("#000000", "#ffffff"))
  
  if __name__ == "__main__":
      main()
  

• requirements.txt76 B0528add65f81upstream ↗

  # Zero external dependencies required -- Python 3.9+ standard library only\n

• skill.json413 Bbd10dce26c01upstream ↗

  {
    "name": "openclaw-genpark-visual-designer",
    "version": "1.0.0",
    "description": "OpenClaw GenPark Visual Designer - Golden ratio typography hierarchy scaling, WCAG 2.1 color contrast ratio auditing, and triadic color harmony generation with zero dependencies.",
    "tools": [
      "calculate_golden_ratio_typography_scale",
      "evaluate_wcag_color_contrast_ratio",
      "generate_triadic_color_palette"
    ]
  }

Plain-text copy, no login: /skill-bundles/alpha-park-openclaw-genpark-visual-designer.md