AutoGineer
Generated banner for Corner Diagonals
Generated logo for Corner Diagonals

Corner Diagonals

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • Medium risk
Download ZIP

From the author

Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to creating engineered, sharp UI surfaces using diagonal-cut corners. It covers the implementation of CSS clip-path polygons for buttons, cards, and panels, ensuring that visual geometry remains consistent across a design system. The guide emphasizes maintaining usability and readability while achieving a distinct, sci-fi or technical aesthetic, moving away from standard rounded corners.

What it does

  • Defines CSS variables for consistent corner-cut sizing.
  • Provides CSS clip-path patterns for various chamfered corner configurations.
  • Offers implementation patterns for bordered shells and buttons.
  • Establishes best practices for maintaining touch targets and focus states.
  • Outlines visual hierarchy rules for mixing diagonal and straight edges.
  • Includes a checklist for verifying geometric consistency across components.

When to use it

  • When designing sci-fi or high-tech user interfaces.
  • When you need to move away from standard rounded or rectangular UI elements.
  • When building a design system that requires precise, engineered geometric framing.
  • When creating custom buttons or panels that need a distinct, sharp silhouette.

Advantages

  • Promotes visual consistency through reusable CSS tokens and patterns.
  • Ensures that clipped shapes remain accessible and functional.
  • Provides a clear framework for scaling corner cuts across different component sizes.
  • Offers ready-to-use CSS snippets for common UI shapes.

Usage examples

“Create a primary button with a top-left and bottom-right diagonal cut.”
The agent provides the CSS class using the specified clip-path polygon and button styling, ensuring the button maintains a 44px height and correct padding.
“How should I style a card container with chamfered corners?”
The agent explains the use of an outer wrapper and inner surface with matching clip-path polygons to create a bordered shell effect.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/mengto/corner-diagonals/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip corner-diagonals.zip -d .agents/skills

Documentation by Meng To

Corner Diagonals

Scope

  • Apply only to buttons, cards, panels, and container shells.

  • Use when surfaces need diagonal-cut corners or chamfered edges.

  • Keep the hit area readable and usable even when the visual shape is clipped.

  • Reuse the same corner logic across surfaces so it feels like a system.

Visual Target

  • Diagonal cuts should feel engineered, sharp, and intentional.

  • Cuts stay subtle and proportional to the component size.

  • One or more corners can be chamfered, but the silhouette should still read quickly.

  • Use diagonal corners as a repeated structural motif, not a one-off trick.

Cut Tokens

:root {
  --corner-cut-sm: 8px;
  --corner-cut-md: 14px;
  --corner-cut-lg: 24px;
  --corner-line: rgba(255, 255, 255, 0.18);
  --corner-line-strong: rgba(255, 255, 255, 0.34);
  --corner-fill: rgba(10, 14, 24, 0.82);
  --corner-accent: #8b5cf6;
}

Core Shapes

Use clip-path: polygon(...) for true diagonal silhouettes.

.cut-all {
  --cut: var(--corner-cut-md);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.cut-top-left-bottom-right {
  --cut: var(--corner-cut-md);
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.cut-top-right-bottom-left {
  --cut: var(--corner-cut-md);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 100%,
    0 0
  );
}

Bordered Shell

For bordered surfaces, use an outer wrapper and inner surface with the same polygon.

.cut-shell {
  --cut: var(--corner-cut-md);
  --border-size: 1px;
  position: relative;
  padding: var(--border-size);
  background: linear-gradient(135deg, var(--corner-line-strong), transparent 46%, var(--corner-line));
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.cut-shell__inner {
  min-height: 100%;
  padding: clamp(16px, 2.4vw, 28px);
  background: var(--corner-fill);
  clip-path: inherit;
}
<section class="cut-shell">
  <div class="cut-shell__inner">
    ...
  </div>
</section>

Button Pattern

.cut-button {
  --cut: var(--corner-cut-sm);
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  color: white;
  background: linear-gradient(135deg, var(--corner-accent), color-mix(in srgb, var(--corner-accent), black 28%));
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.cut-button:hover {
  filter: brightness(1.08);
}

.cut-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--corner-accent), white 45%);
  outline-offset: 3px;
}

Secondary Button

Use a darker shell with diagonal outline treatment.

.cut-button-secondary {
  --cut: var(--corner-cut-sm);
  color: white;
  background:
    linear-gradient(var(--corner-fill), var(--corner-fill)) padding-box,
    linear-gradient(135deg, var(--corner-line-strong), transparent 58%, var(--corner-accent)) border-box;
  border: 1px solid transparent;
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

Recommended Patterns

  • Primary buttons: clipped hex-like or chamfered rectangles with one consistent cut amount.

  • Secondary buttons: dark shells with diagonal outline treatment and restrained hover fill.

  • Cards and panels: thin framed containers with one or two diagonal corners.

  • Large sections: diagonal-corner inner blocks nested inside straight outer frames for hierarchy.

  • Mirrored pairings: top-left plus bottom-right, or top-right plus bottom-left.

Tuning Knobs

  • Cut size: 6px-10px for small controls, 12px-18px for cards, 20px-32px for large panels.

  • Border treatment: use a thin stroke, gradient shell, or inset line to make the silhouette legible.

  • Consistency: reuse the same polygon family across buttons and containers.

  • Accent: reserve bright color for primary controls, hover borders, or focal states.

  • Motion: brighten fills, reveal borders, or slide overlays; keep the shape stable.

Avoid

  • Random cut sizes across similar components.

  • Aggressive clipping that harms readability or makes the component feel broken.

  • Mixing rounded pills and chamfered geometry without clear hierarchy.

  • Clipping only the background while borders and hit areas stay rectangular.

  • Flooding every diagonal surface with a bright accent color.

Quick Checks

  • Border, background, and hit area follow the same diagonal geometry.

  • Text still has comfortable horizontal padding after the cut.

  • Buttons keep at least 44px height for touch targets.

  • Repeated components use the same --cut scale.

  • Focus states remain visible around the clipped shape.

Files

demo/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="neuform-sandboxed-demo" content="1">
  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self'; frame-src 'self'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'; object-src 'none'">
  <title>Sandboxed Neuform demo</title>
  <style>
    html, body, iframe { width: 100%; height: 100%; margin: 0; border: 0; }
    body { overflow: hidden; background: #0b0b0b; }
    iframe { display: block; background: white; }
    .error { box-sizing: border-box; min-height: 100%; padding: 32px; color: #fff; font: 16px/1.5 system-ui, sans-serif; }
  </style>
</head>
<body>
  <iframe id="neuform-demo" title="Sandboxed Neuform design demo" sandbox="allow-scripts" referrerpolicy="no-referrer"></iframe>
  <script>
    const encodedHtml = "PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CjxtZXRhIGh0dHAtZXF1aXY9IkNvbnRlbnQtU2VjdXJpdHktUG9saWN5IiBjb250ZW50PSJkZWZhdWx0LXNyYyAnbm9uZSc7IGJhc2UtdXJpICdub25lJzsgY29ubmVjdC1zcmMgJ25vbmUnOyBmb250LXNyYyBkYXRhOiBodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tOyBmb3JtLWFjdGlvbiAnbm9uZSc7IGZyYW1lLXNyYyAnbm9uZSc7IGltZy1zcmMgYmxvYjo7IG1lZGlhLXNyYyBibG9iOjsgbmF2aWdhdGUtdG8gJ25vbmUnOyBvYmplY3Qtc3JjICdub25lJzsgc2NyaXB0LXNyYyAndW5zYWZlLWlubGluZScgX19ORVVGT1JNX1JVTlRJTUVfU09VUkNFU19fOyBzdHlsZS1zcmMgJ3Vuc2FmZS1pbmxpbmUnIGh0dHBzOi8vYXBpLmZvbnRzaGFyZS5jb20gaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbTsgd29ya2VyLXNyYyAnbm9uZSciPgo8c2NyaXB0IGRhdGEtbmV1Zm9ybS1hc3NldC1ib290c3RyYXA+CigoKSA9PiB7CiAgbGV0IHJlY2VpdmVkID0gZmFsc2U7CiAgY29uc3Qgb2JqZWN0VXJscyA9IFtdOwogIGNvbnN0IHJlcGxhY2VBbGwgPSAodmFsdWUsIHJlcGxhY2VtZW50cykgPT4gewogICAgbGV0IG5leHQgPSBTdHJpbmcodmFsdWUgfHwgIiIpOwogICAgZm9yIChjb25zdCBbZmlsZSwgb2JqZWN0VXJsXSBvZiByZXBsYWNlbWVudHMpIG5leHQgPSBuZXh0LnNwbGl0KGZpbGUpLmpvaW4ob2JqZWN0VXJsKTsKICAgIHJldHVybiBuZXh0OwogIH07CiAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoIm1lc3NhZ2UiLCAoZXZlbnQpID0+IHsKICAgIGlmIChyZWNlaXZlZCB8fCBldmVudC5zb3VyY2UgIT09IHBhcmVudCB8fCBldmVudC5kYXRhPy50eXBlICE9PSAibmV1Zm9ybS1hc3NldHMtdjEiKSByZXR1cm47CiAgICByZWNlaXZlZCA9IHRydWU7CiAgICBjb25zdCByZXBsYWNlbWVudHMgPSBbXTsKICAgIGZvciAoY29uc3QgYXNzZXQgb2YgZXZlbnQuZGF0YS5hc3NldHMgfHwgW10pIHsKICAgICAgaWYgKCFhc3NldCB8fCB0eXBlb2YgYXNzZXQuZmlsZSAhPT0gInN0cmluZyIgfHwgdHlwZW9mIGFzc2V0LmJhc2U2NCAhPT0gInN0cmluZyIpIGNvbnRpbnVlOwogICAgICBjb25zdCBiaW5hcnkgPSBhdG9iKGFzc2V0LmJhc2U2NCk7CiAgICAgIGNvbnN0IGJ5dGVzID0gVWludDhBcnJheS5mcm9tKGJpbmFyeSwgKGNoYXJhY3RlcikgPT4gY2hhcmFjdGVyLmNoYXJDb2RlQXQoMCkpOwogICAgICBjb25zdCBvYmplY3RVcmwgPSBVUkwuY3JlYXRlT2JqZWN0VVJMKG5ldyBCbG9iKFtieXRlc10sIHsgdHlwZTogYXNzZXQuY29udGVudFR5cGUgfHwgImFwcGxpY2F0aW9uL29jdGV0LXN0cmVhbSIgfSkpOwogICAgICBvYmplY3RVcmxzLnB1c2gob2JqZWN0VXJsKTsKICAgICAgcmVwbGFjZW1lbnRzLnB1c2goW2Fzc2V0LmZpbGUsIG9iamVjdFVybF0pOwogICAgfQogICAgZm9yIChjb25zdCBlbGVtZW50IG9mIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoIioiKSkgewogICAgICBmb3IgKGNvbnN0IG5hbWUgb2YgWyJzcmMiLCAicG9zdGVyIiwgInNyY3NldCIsICJzdHlsZSJdKSB7CiAgICAgICAgY29uc3QgdmFsdWUgPSBlbGVtZW50LmdldEF0dHJpYnV0ZShuYW1lKTsKICAgICAgICBpZiAodmFsdWUpIGVsZW1lbnQuc2V0QXR0cmlidXRlKG5hbWUsIHJlcGxhY2VBbGwodmFsdWUsIHJlcGxhY2VtZW50cykpOwogICAgICB9CiAgICB9CiAgICBmb3IgKGNvbnN0IHN0eWxlIG9mIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoInN0eWxlIikpIHsKICAgICAgc3R5bGUudGV4dENvbnRlbnQgPSByZXBsYWNlQWxsKHN0eWxlLnRleHRDb250ZW50LCByZXBsYWNlbWVudHMpOwogICAgfQogIH0pOwogIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCJwYWdlaGlkZSIsICgpID0+IHsKICAgIGZvciAoY29uc3Qgb2JqZWN0VXJsIG9mIG9iamVjdFVybHMpIFVSTC5yZXZva2VPYmplY3RVUkwob2JqZWN0VXJsKTsKICB9LCB7IG9uY2U6IHRydWUgfSk7Cn0pKCk7Cjwvc2NyaXB0PgoKPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHRpdGxlPkF1cmFsaXMgLSBOZXVyYWwgQXVkaW8gRW5naW5lPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSIuLi8uLi8uLi8uLi9hc3NldHMvcnVudGltZS9ydW50aW1lLWNjYzg4OTRiMzQxOC1ydW50aW1lLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSIuLi8uLi8uLi8uLi9hc3NldHMvcnVudGltZS9ydW50aW1lLTE2M2ViZDA4N2NmYy1pY29uaWZ5LWljb24tbWluLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSIuLi8uLi8uLi8uLi9hc3NldHMvcnVudGltZS9ydW50aW1lLTI1MDIzYjUyMWQ3Ny10aHJlZS1taW4uanMiPjwvc2NyaXB0PgogICAgPHNjcmlwdCBzcmM9Ii4uLy4uLy4uLy4uL2Fzc2V0cy9ydW50aW1lL3J1bnRpbWUtMDI3MDUxZWZmYTQ3LWdzYXAtbWluLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSIuLi8uLi8uLi8uLi9hc3NldHMvcnVudGltZS9ydW50aW1lLTY4OWNhOGRkYTQ0Yy1zY3JvbGx0cmlnZ2VyLW1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8bGluayBocmVmPSJodHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2NzczI/ZmFtaWx5PUdlaXN0OndnaHRAMzAwOzQwMDs1MDA7NjAwOzcwMCZkaXNwbGF5PXN3YXAiIHJlbD0ic3R5bGVzaGVldCI+CjwvaGVhZD4KPGJvZHkgY2xhc3M9ImFudGlhbGlhc2VkIHRleHQtZ3JheS05MDAgYmctd2hpdGUgb3ZlcmZsb3cteC1oaWRkZW4gbWluLWgtc2NyZWVuIGZsZXggZmxleC1jb2wgc2VsZWN0aW9uOmJnLW9yYW5nZS0xMDAgc2VsZWN0aW9uOnRleHQtb3JhbmdlLTkwMCIgc3R5bGU9ImZvbnQtZmFtaWx5OiAnR2Vpc3QnLCBzYW5zLXNlcmlmOyI+CgogICAgPCEtLSBCYWNrZ3JvdW5kIEVmZmVjdCBDb250YWluZXIgLS0+CiAgICA8ZGl2IGNsYXNzPSJmaXhlZCBpbnNldC15LTAgcmlnaHQtMCB3LVsxMjB2d10gbWQ6dy1bNzB2d10gdHJhbnNsYXRlLXgtWzEwJV0gbWQ6dHJhbnNsYXRlLXgtMCB6LTAgb3ZlcmZsb3ctaGlkZGVuIHBvaW50ZXItZXZlbnRzLW5vbmUiPgogICAgICAgIAogICAgICAgIDwhLS0gV2ViR0wgQW5pbWF0ZWQgR3JhZGllbnQgQ2FudmFzIC0tPgogICAgICAgIDxjYW52YXMgaWQ9IndlYmdsLWNhbnZhcyIgY2xhc3M9ImFic29sdXRlIGluc2V0LTAgdy1mdWxsIGgtZnVsbCI+PC9jYW52YXM+CgogICAgICAgIDwhLS0gR2xhc3MgU2xpY2VzIE92ZXJsYXkgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0iYWJzb2x1dGUgaW5zZXQtMCBmbGV4Ij4KICAgICAgICAgICAgPCEtLSBTbGljZSAxOiBTZWFtbGVzcyBibGVuZCB3aXRoIGJvZHkgYmFja2dyb3VuZCAtLT4KICAgICAgICAgICAgPGRpdiBjbGFzcz0iaC1mdWxsIGZsZXgtMSByZWxhdGl2ZSBib3JkZXItbCBib3JkZXItdHJhbnNwYXJlbnQiIHN0eWxlPSJiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsIHJnYmEoMjU1LDI1NSwyNTUsMSkgMCUsIHJnYmEoMjU1LDI1NSwyNTUsMC44NSkgMTAwJSk7Ij48L2Rpdj4KCiAgICAgICAgICAgIDwhLS0gU2xpY2UgMiAtLT4KICAgICAgICAgICAgPGRpdiBjbGFzcz0iaC1mdWxsIGZsZXgtMSByZWxhdGl2ZSBib3JkZXItbCBib3JkZXItd2hpdGUvNjAgc2hhZG93LVstMTVweF8wXzMwcHhfLTEwcHhfcmdiYSgyNTUsMjU1LDI1NSwxKV0iIHN0eWxlPSJiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsIHJnYmEoMjU1LDI1NSwyNTUsMC44NSksIHJnYmEoMjU1LDI1NSwyNTUsMC42NSkpOyBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoMTZweCk7Ij48L2Rpdj4KCiAgICAgICAgICAgIDwhLS0gU2xpY2UgMyAtLT4KICAgICAgICAgICAgPGRpdiBjbGFzcz0iaC1mdWxsIGZsZXgtMSByZWxhdGl2ZSBib3JkZXItbCBib3JkZXItd2hpdGUvNDAgc2hhZG93LVstMTVweF8wXzMwcHhfLTEwcHhfcmdiYSgyNTUsMjU1LDI1NSwwLjkpXSIgc3R5bGU9ImJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgcmdiYSgyNTUsMjU1LDI1NSwwLjY1KSwgcmdiYSgyNTUsMjU1LDI1NSwwLjQpKTsgYmFja2Ryb3AtZmlsdGVyOiBibHVyKDEycHgpOyI+PC9kaXY+CgogICAgICAgICAgICA8IS0tIFNsaWNlIDQgLS0+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImgtZnVsbCBmbGV4LTEgcmVsYXRpdmUgYm9yZGVyLWwgYm9yZGVyLXdoaXRlLzIwIHNoYWRvdy1bLTE1cHhfMF8zMHB4Xy0xMHB4X3JnYmEoMjU1LDI1NSwyNTUsMC42KV0iIHN0eWxlPSJiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsIHJnYmEoMjU1LDI1NSwyNTUsMC40KSwgcmdiYSgyNTUsMjU1LDI1NSwwLjE1KSk7IGJhY2tkcm9wLWZpbHRlcjogYmx1cig2cHgpOyI+PC9kaXY+CgogICAgICAgICAgICA8IS0tIFNsaWNlIDUgKFJpZ2h0bW9zdCwgbW9zdCB0cmFuc3BhcmVudCkgLS0+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImgtZnVsbCBmbGV4LTEgcmVsYXRpdmUgYm9yZGVyLWwgYm9yZGVyLXdoaXRlLzEwIHNoYWRvdy1bLTE1cHhfMF8zMHB4Xy0xMHB4X3JnYmEoMjU1LDI1NSwyNTUsMC4zKV0iIHN0eWxlPSJiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsIHJnYmEoMjU1LDI1NSwyNTUsMC4xNSksIHJnYmEoMjU1LDI1NSwyNTUsMC4wMikpOyBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoMnB4KTsiPjwvZGl2PgogICAgICAgIDwvZGl2PgogICAgPC9kaXY+CgogICAgPCEtLSBNYWluIENvbnRlbnQgQ29udGFpbmVyIC0tPgogICAgPGRpdiBjbGFzcz0icmVsYXRpdmUgei0xMCB3LWZ1bGwgbWF4LXctWzg4cmVtXSBteC1hdXRvIHB4LTYgc206cHgtOCBtZDpweC0xMiBsZzpweC0xNiBmbGV4IGZsZXgtY29sIG1pbi1oLXNjcmVlbiI+CiAgICAgICAgCiAgICAgICAgPCEtLSBIZWFkZXIgLS0+CiAgICAgICAgPGhlYWRlciBjbGFzcz0iZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1iZXR3ZWVuIHB5LTggYW5pbS1lbGVtZW50IiBzdHlsZT0ib3BhY2l0eTogMDsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0xMHB4KTsgdHJhbnNpdGlvbjogYWxsIDAuOHMgY3ViaWMtYmV6aWVyKDAuMTYsIDEsIDAuMywgMSk7Ij4KICAgICAgICAgICAgPGRpdiBjbGFzcz0iZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTEgdGV4dC1sZyBmb250LW5vcm1hbCB0cmFja2luZy10aWdodCB0ZXh0LWdyYXktOTAwIHVwcGVyY2FzZSI+CiAgICAgICAgICAgICAgICBBVVJBTElTPHNwYW4gY2xhc3M9InRleHQtWyNlYTU4MGNdIHRleHQteGwgbGVhZGluZy1ub25lIj7CsDwvc3Bhbj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIAogICAgICAgICAgICA8bmF2IGNsYXNzPSJoaWRkZW4gbWQ6ZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTEwIHRleHQtc20gZm9udC1ub3JtYWwgdGV4dC1ncmF5LTYwMCI+CiAgICAgICAgICAgICAgICA8YSBocmVmPSIjIiBjbGFzcz0iaG92ZXI6dGV4dC1ncmF5LTkwMCB0cmFuc2l0aW9uLWNvbG9ycyI+UGxhdGZvcm08L2E+CiAgICAgICAgICAgICAgICA8YSBocmVmPSIjIiBjbGFzcz0iaG92ZXI6dGV4dC1ncmF5LTkwMCB0cmFuc2l0aW9uLWNvbG9ycyI+U29sdXRpb25zPC9hPgogICAgICAgICAgICAgICAgPGEgaHJlZj0iIyIgY2xhc3M9ImhvdmVyOnRleHQtZ3JheS05MDAgdHJhbnNpdGlvbi1jb2xvcnMiPkRldmVsb3BlcnM8L2E+CiAgICAgICAgICAgICAgICA8YSBocmVmPSIjIiBjbGFzcz0iaG92ZXI6dGV4dC1ncmF5LTkwMCB0cmFuc2l0aW9uLWNvbG9ycyI+Q29tcGFueTwvYT4KICAgICAgICAgICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJob3Zlcjp0ZXh0LWdyYXktOTAwIHRyYW5zaXRpb24tY29sb3JzIj5Eb2NzPC9hPgogICAgICAgICAgICA8L25hdj4KCiAgICAgICAgICAgIDxkaXY+CiAgICAgICAgICAgICAgICA8YSBocmVmPSIjIiBjbGFzcz0idGV4dC1zbSBmb250LW5vcm1hbCB0ZXh0LWdyYXktNjAwIGhvdmVyOnRleHQtZ3JheS05MDAgdHJhbnNpdGlvbi1jb2xvcnMiPlNpZ24gaW48L2E+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvaGVhZGVyPgoKICAgICAgICA8IS0tIEhlcm8gU2VjdGlvbiAtLT4KICAgICAgICA8bWFpbiBjbGFzcz0iZmxleC0xIGZsZXggZmxleC1jb2wganVzdGlmeS1jZW50ZXIgbWF4LXctMnhsIHB0LTE2IHBiLTI0Ij4KICAgICAgICAgICAgCiAgICAgICAgICAgIDwhLS0gQmFkZ2UgLS0+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImFuaW0tZWxlbWVudCBtYi04IHctbWF4IGlubGluZS1mbGV4IGl0ZW1zLWNlbnRlciBnYXAtMiBweC0zLjUgcHktMS41IHRleHQteHMgZm9udC1ub3JtYWwgdGV4dC1vcmFuZ2UtNjAwIHNoYWRvdy1bMHB4XzJweF8zcHhfLTFweF9yZ2JhKDAsMCwwLDAuMSksMHB4XzFweF8wcHhfMHB4X3JnYmEoMjUsMjgsMzMsMC4wMiksMHB4XzBweF8wcHhfMXB4X3JnYmEoMjUsMjgsMzMsMC4wOCldIGJhY2tkcm9wLWJsdXItbWQiIHN0eWxlPSJjbGlwLXBhdGg6IHBvbHlnb24oOHB4IDAsIDEwMCUgMCwgMTAwJSBjYWxjKDEwMCUgLSA4cHgpLCBjYWxjKDEwMCUgLSA4cHgpIDEwMCUsIDAgMTAwJSwgMCA4cHgpOyBib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDsgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KHJnYmEoMjU1LDIzNywyMTMsMC42KSwgcmdiYSgyNTUsMjM3LDIxMywwLjYpKSBwYWRkaW5nLWJveCwgbGluZWFyLWdyYWRpZW50KDEzNWRlZywgI2ZkYmE3NCwgI2ZkYTRhZikgYm9yZGVyLWJveDsgb3BhY2l0eTogMDsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDE1cHgpOyB0cmFuc2l0aW9uOiBhbGwgMC44cyBjdWJpYy1iZXppZXIoMC4xNiwgMSwgMC4zLCAxKTsiPgogICAgICAgICAgICAgICAgPGljb25pZnktaWNvbiBpY29uPSJzb2xhcjptaWNyb3Bob25lLTMtbGluZWFyIiBjbGFzcz0idGV4dC1iYXNlIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgICAgICBBZHZhbmNlZCBWb2NhbCBTeW50aGVzaXMKICAgICAgICAgICAgPC9kaXY+CgogICAgICAgICAgICA8IS0tIEhlYWRsaW5lIHdpdGggTWFza2VkIFJldmVhbCAtLT4KICAgICAgICAgICAgPGgxIGNsYXNzPSJ0ZXh0LTV4bCBzbTp0ZXh0LTZ4bCBtZDp0ZXh0LTd4bCBsZzp0ZXh0LTh4bCB0ZXh0LWdyYXktOTAwIGxlYWRpbmctWzEuMDVdIGZvbnQtbGlnaHQgdHJhY2tpbmctdGlnaHRlciBncy1yZXZlYWwtY29udGFpbmVyIj4KICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJpbmxpbmUtZmxleCBvdmVyZmxvdy1oaWRkZW4gcGItMSBwdC0xIj48c3BhbiBjbGFzcz0iZ3MtcmV2ZWFsLXdvcmQgdHJhbnNsYXRlLXktWzExMCVdIHdpbGwtY2hhbmdlLXRyYW5zZm9ybSI+Q29udmVyc2U8L3NwYW4+PC9zcGFuPgogICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9ImlubGluZS1mbGV4IG92ZXJmbG93LWhpZGRlbiBwYi0xIHB0LTEiPjxzcGFuIGNsYXNzPSJncy1yZXZlYWwtd29yZCB0cmFuc2xhdGUteS1bMTEwJV0gd2lsbC1jaGFuZ2UtdHJhbnNmb3JtIj5OYXR1cmFsbHkuPC9zcGFuPjwvc3Bhbj48YnI+CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0iaW5saW5lLWZsZXggb3ZlcmZsb3ctaGlkZGVuIHBiLTEgcHQtMSI+PHNwYW4gY2xhc3M9ImdzLXJldmVhbC13b3JkIHRyYW5zbGF0ZS15LVsxMTAlXSB3aWxsLWNoYW5nZS10cmFuc2Zvcm0iPkJleW9uZDwvc3Bhbj48L3NwYW4+CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0iaW5saW5lLWZsZXggb3ZlcmZsb3ctaGlkZGVuIHBiLTEgcHQtMSI+PHNwYW4gY2xhc3M9ImdzLXJldmVhbC13b3JkIHRyYW5zbGF0ZS15LVsxMTAlXSB3aWxsLWNoYW5nZS10cmFuc2Zvcm0iPkJvdW5kYXJpZXMuPC9zcGFuPjwvc3Bhbj48YnI+CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0iaW5saW5lLWZsZXggb3ZlcmZsb3ctaGlkZGVuIHBiLTEgcHQtMSI+PHNwYW4gY2xhc3M9ImdzLXJldmVhbC13b3JkIHRyYW5zbGF0ZS15LVsxMTAlXSB3aWxsLWNoYW5nZS10cmFuc2Zvcm0gdGV4dC10cmFuc3BhcmVudCBiZy1jbGlwLXRleHQgYmctZ3JhZGllbnQtdG8tciBmcm9tLVsjZWE1ODBjXSB0by1bI2UxMWQ0OF0iPkluZmluaXRlIFNjYWxlLjwvc3Bhbj48L3NwYW4+CiAgICAgICAgICAgIDwvaDE+CgogICAgICAgICAgICA8IS0tIFN1YmhlYWRsaW5lIC0tPgogICAgICAgICAgICA8cCBjbGFzcz0iYW5pbS1lbGVtZW50IG10LTcgdGV4dC1iYXNlIG1kOnRleHQtbGcgdGV4dC1ncmF5LTYwMCBsZWFkaW5nLXJlbGF4ZWQgbWF4LXctWzI4cmVtXSIgc3R5bGU9Im9wYWNpdHk6IDA7IHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxNXB4KTsgdHJhbnNpdGlvbjogYWxsIDAuOHMgY3ViaWMtYmV6aWVyKDAuMTYsIDEsIDAuMywgMSk7IHRyYW5zaXRpb24tZGVsYXk6IDAuM3M7Ij4KICAgICAgICAgICAgICAgIEdlbmVyYXRlIGhpZ2hseSByZWFsaXN0aWMgaHVtYW4gYXVkaW8gaW5zdGFudGx5LCByZXBsaWNhdGluZyB2b2NhbCBzaWduYXR1cmVzIHdpdGggc3R1bm5pbmcgcHJlY2lzaW9uLiBFbWJlZCBzbW9vdGhseSBpbnRvIGFwcGxpY2F0aW9ucywgbWVkaWEsIGFuZCBpbnRlcmFjdGl2ZSBpbnRlcmZhY2VzLiBTd2lmdC4gUHJpdmF0ZS4gQnJvYWRjYXN0LXJlYWR5LgogICAgICAgICAgICA8L3A+CgogICAgICAgICAgICA8IS0tIENUQSBCdXR0b25zIC0tPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJhbmltLWVsZW1lbnQgbXQtMTAgZmxleCBmbGV4LXdyYXAgaXRlbXMtY2VudGVyIGdhcC00IiBzdHlsZT0ib3BhY2l0eTogMDsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDE1cHgpOyB0cmFuc2l0aW9uOiBhbGwgMC44cyBjdWJpYy1iZXppZXIoMC4xNiwgMSwgMC4zLCAxKTsgdHJhbnNpdGlvbi1kZWxheTogMC40czsiPgogICAgICAgICAgICAgICAgPGEgaHJlZj0iIyIgY2xhc3M9ImlubGluZS1mbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBnYXAtMiBiZy1bIzFjMWMxZV0gcHgtNyBweS0zLjUgdGV4dC1zbSBmb250LW5vcm1hbCB0ZXh0LXdoaXRlIGhvdmVyOmJnLWJsYWNrIHRyYW5zaXRpb24tYWxsIGR1cmF0aW9uLTMwMCBzaGFkb3ctWzBweF8wcHhfMHB4XzFweF9yZ2JhKDAsMCwwLDAuMDYpLDBweF8xcHhfMXB4Xy0wLjVweF9yZ2JhKDAsMCwwLDAuMDYpLDBweF8zcHhfM3B4Xy0xLjVweF9yZ2JhKDAsMCwwLDAuMDYpLF8wcHhfNnB4XzZweF8tM3B4X3JnYmEoMCwwLDAsMC4wNiksMHB4XzEycHhfMTJweF8tNnB4X3JnYmEoMCwwLDAsMC4wNiksMHB4XzI0cHhfMjRweF8tMTJweF9yZ2JhKDAsMCwwLDAuMDYpXSBob3ZlcjotdHJhbnNsYXRlLXktMC41IiBzdHlsZT0iY2xpcC1wYXRoOiBwb2x5Z29uKDEycHggMCwgMTAwJSAwLCAxMDAlIGNhbGMoMTAwJSAtIDEycHgpLCBjYWxjKDEwMCUgLSAxMnB4KSAxMDAlLCAwIDEwMCUsIDAgMTJweCk7Ij4KICAgICAgICAgICAgICAgICAgICBTdGFydCBidWlsZGluZyB0b2RheQogICAgICAgICAgICAgICAgICAgIDxpY29uaWZ5LWljb24gaWNvbj0ic29sYXI6YXJyb3ctcmlnaHQtdXAtbGluZWFyIiBjbGFzcz0idGV4dC1sZyBvcGFjaXR5LTgwIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgICAgICA8L2E+CiAgICAgICAgICAgICAgICA8YSBocmVmPSIjIiBjbGFzcz0iaW5saW5lLWZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGJhY2tkcm9wLWJsdXItbWQgcHgtNyBweS0zLjUgdGV4dC1zbSBmb250LW5vcm1hbCB0ZXh0LW9yYW5nZS02MDAgaG92ZXI6dGV4dC1vcmFuZ2UtNzAwIGhvdmVyOi10cmFuc2xhdGUteS0wLjUgdHJhbnNpdGlvbi1hbGwgZHVyYXRpb24tMzAwIHNoYWRvdy1bMHB4XzJweF8zcHhfLTFweF9yZ2JhKDAsMCwwLDAuMSksMHB4XzFweF8wcHhfMHB4X3JnYmEoMjUsMjgsMzMsMC4wMiksMHB4XzBweF8wcHhfMXB4X3JnYmEoMjUsMjgsMzMsMC4wOCldIiBzdHlsZT0iY2xpcC1wYXRoOiBwb2x5Z29uKDEycHggMCwgMTAwJSAwLCAxMDAlIGNhbGMoMTAwJSAtIDEycHgpLCBjYWxjKDEwMCUgLSAxMnB4KSAxMDAlLCAwIDEwMCUsIDAgMTJweCk7IGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50OyBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQocmdiYSgyNTUsMjU1LDI1NSwwLjYpLCByZ2JhKDI1NSwyNTUsMjU1LDAuNikpIHBhZGRpbmctYm94LCBsaW5lYXItZ3JhZGllbnQoMTM1ZGVnLCAjZmRiYTc0LCAjZmRhNGFmKSBib3JkZXItYm94OyI+CiAgICAgICAgICAgICAgICAgICAgQ29udGFjdCBFbnRlcnByaXNlCiAgICAgICAgICAgICAgICA8L2E+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvbWFpbj4KCiAgICAgICAgPCEtLSBCb3R0b20gRmVhdHVyZXMgUm93IC0tPgogICAgICAgIDxkaXYgY2xhc3M9ImFuaW0tZWxlbWVudCBwYi0xMiBwdC04IGZsZXggZmxleC1jb2wgc206ZmxleC1yb3cgZ2FwLTEwIHNtOmdhcC0xNCBib3JkZXItdCBib3JkZXItdHJhbnNwYXJlbnQiIHN0eWxlPSJvcGFjaXR5OiAwOyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTVweCk7IHRyYW5zaXRpb246IGFsbCAwLjhzIGN1YmljLWJlemllcigwLjE2LCAxLCAwLjMsIDEpOyB0cmFuc2l0aW9uLWRlbGF5OiAwLjVzOyI+CiAgICAgICAgICAgIAogICAgICAgICAgICA8IS0tIEZlYXR1cmUgMSAtLT4KICAgICAgICAgICAgPGRpdiBjbGFzcz0iZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTQgZ3JvdXAgY3Vyc29yLWRlZmF1bHQiPgogICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iZmxleCBoLTExIHctMTEgc2hyaW5rLTAgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGJnLW9yYW5nZS01MCB0ZXh0LW9yYW5nZS01MDAgZ3JvdXAtaG92ZXI6c2NhbGUtMTEwIHRyYW5zaXRpb24tdHJhbnNmb3JtIGR1cmF0aW9uLTMwMCBzaGFkb3ctWzBweF8ycHhfM3B4Xy0xcHhfcmdiYSgwLDAsMCwwLjEpLDBweF8xcHhfMHB4XzBweF9yZ2JhKDI1LDI4LDMzLDAuMDIpLDBweF8wcHhfMHB4XzFweF9yZ2JhKDI1LDI4LDMzLDAuMDgpXSIgc3R5bGU9ImNsaXAtcGF0aDogcG9seWdvbig4cHggMCwgMTAwJSAwLCAxMDAlIGNhbGMoMTAwJSAtIDhweCksIGNhbGMoMTAwJSAtIDhweCkgMTAwJSwgMCAxMDAlLCAwIDhweCk7Ij4KICAgICAgICAgICAgICAgICAgICA8aWNvbmlmeS1pY29uIGljb249InNvbGFyOnNlcnZlci1saW5lYXIiIGNsYXNzPSJ0ZXh0LXhsIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgIDxkaXY+CiAgICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzPSJ0ZXh0LXNtIGZvbnQtbm9ybWFsIHRleHQtZ3JheS05MDAiPlNlYW1sZXNzIFN0cmVhbWluZzwvaDM+CiAgICAgICAgICAgICAgICAgICAgPHAgY2xhc3M9InRleHQteHMgdGV4dC1ncmF5LTUwMCBtdC0wLjUiPkluc3RhbnQgdm9pY2UgZ2VuZXJhdGlvbjwvcD4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8L2Rpdj4KCiAgICAgICAgICAgIDwhLS0gRmVhdHVyZSAyIC0tPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJmbGV4IGl0ZW1zLWNlbnRlciBnYXAtNCBncm91cCBjdXJzb3ItZGVmYXVsdCI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJmbGV4IGgtMTEgdy0xMSBzaHJpbmstMCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgYmctb3JhbmdlLTUwIHRleHQtb3JhbmdlLTUwMCBncm91cC1ob3ZlcjpzY2FsZS0xMTAgdHJhbnNpdGlvbi10cmFuc2Zvcm0gZHVyYXRpb24tMzAwIHNoYWRvdy1bMHB4XzJweF8zcHhfLTFweF9yZ2JhKDAsMCwwLDAuMSksMHB4XzFweF8wcHhfMHB4X3JnYmEoMjUsMjgsMzMsMC4wMiksMHB4XzBweF8wcHhfMXB4X3JnYmEoMjUsMjgsMzMsMC4wOCldIiBzdHlsZT0iY2xpcC1wYXRoOiBwb2x5Z29uKDhweCAwLCAxMDAlIDAsIDEwMCUgY2FsYygxMDAlIC0gOHB4KSwgY2FsYygxMDAlIC0gOHB4KSAxMDAlLCAwIDEwMCUsIDAgOHB4KTsiPgogICAgICAgICAgICAgICAgICAgIDxpY29uaWZ5LWljb24gaWNvbj0ic29sYXI6c291bmR3YXZlLWxpbmVhciIgY2xhc3M9InRleHQteGwiIHN0cm9rZS13aWR0aD0iMS41Ij48L2ljb25pZnktaWNvbj4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgPGRpdj4KICAgICAgICAgICAgICAgICAgICA8aDMgY2xhc3M9InRleHQtc20gZm9udC1ub3JtYWwgdGV4dC1ncmF5LTkwMCI+Vm9jYWwgQ2xvbmluZzwvaDM+CiAgICAgICAgICAgICAgICAgICAgPHAgY2xhc3M9InRleHQteHMgdGV4dC1ncmF5LTUwMCBtdC0wLjUiPlN0dWRpby1ncmFkZSBwcmVjaXNpb248L3A+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPC9kaXY+CgogICAgICAgICAgICA8IS0tIEZlYXR1cmUgMyAtLT4KICAgICAgICAgICAgPGRpdiBjbGFzcz0iZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTQgZ3JvdXAgY3Vyc29yLWRlZmF1bHQiPgogICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iZmxleCBoLTExIHctMTEgc2hyaW5rLTAgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGJnLW9yYW5nZS01MCB0ZXh0LW9yYW5nZS01MDAgZ3JvdXAtaG92ZXI6c2NhbGUtMTEwIHRyYW5zaXRpb24tdHJhbnNmb3JtIGR1cmF0aW9uLTMwMCBzaGFkb3ctWzBweF8ycHhfM3B4Xy0xcHhfcmdiYSgwLDAsMCwwLjEpLDBweF8xcHhfMHB4XzBweF9yZ2JhKDI1LDI4LDMzLDAuMDIpLDBweF8wcHhfMHB4XzFweF9yZ2JhKDI1LDI4LDMzLDAuMDgpXSIgc3R5bGU9ImNsaXAtcGF0aDogcG9seWdvbig4cHggMCwgMTAwJSAwLCAxMDAlIGNhbGMoMTAwJSAtIDhweCksIGNhbGMoMTAwJSAtIDhweCkgMTAwJSwgMCAxMDAlLCAwIDhweCk7Ij4KICAgICAgICAgICAgICAgICAgICA8aWNvbmlmeS1pY29uIGljb249InNvbGFyOnNoaWVsZC1jaGVjay1saW5lYXIiIGNsYXNzPSJ0ZXh0LXhsIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgIDxkaXY+CiAgICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzPSJ0ZXh0LXNtIGZvbnQtbm9ybWFsIHRleHQtZ3JheS05MDAiPkVudGVycHJpc2UtUmVhZHk8L2gzPgogICAgICAgICAgICAgICAgICAgIDxwIGNsYXNzPSJ0ZXh0LXhzIHRleHQtZ3JheS01MDAgbXQtMC41Ij5GbGF3bGVzcyBjb21tZXJjaWFsIHVwdGltZTwvcD4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8L2Rpdj4KCiAgICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KCiAgICA8IS0tIFNjcmlwdHMgZm9yIFdlYkdMIGFuZCBBbmltYXRpb25zIC0tPgogICAgPHNjcmlwdD4KICAgICAgICAvLyAtLS0gV2ViR0wgQmFja2dyb3VuZCBBbmltYXRpb24gKFdhcm0gUGFsZXR0ZSBSZW1peCkgLS0tCiAgICAgICAgY29uc3QgY2FudmFzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dlYmdsLWNhbnZhcycpOwogICAgICAgIGNvbnN0IHJlbmRlcmVyID0gbmV3IFRIUkVFLldlYkdMUmVuZGVyZXIoeyBjYW52YXMsIGFscGhhOiB0cnVlLCBhbnRpYWxpYXM6IHRydWUgfSk7CiAgICAgICAgY29uc3Qgc2NlbmUgPSBuZXcgVEhSRUUuU2NlbmUoKTsKICAgICAgICBjb25zdCBjYW1lcmEgPSBuZXcgVEhSRUUuT3J0aG9ncmFwaGljQ2FtZXJhKC0xLCAxLCAxLCAtMSwgMCwgMSk7CiAgICAgICAgY29uc3QgZ2VvbWV0cnkgPSBuZXcgVEhSRUUuUGxhbmVHZW9tZXRyeSgyLCAyKTsKCiAgICAgICAgY29uc3QgbWF0ZXJpYWwgPSBuZXcgVEhSRUUuU2hhZGVyTWF0ZXJpYWwoewogICAgICAgICAgICB1bmlmb3JtczogewogICAgICAgICAgICAgICAgdV90aW1lOiB7IHZhbHVlOiAwLjAgfSwKICAgICAgICAgICAgICAgIHVfcmVzb2x1dGlvbjogeyB2YWx1ZTogbmV3IFRIUkVFLlZlY3RvcjIoKSB9CiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHZlcnRleFNoYWRlcjogYAogICAgICAgICAgICAgICAgdm9pZCBtYWluKCkgewogICAgICAgICAgICAgICAgICAgIGdsX1Bvc2l0aW9uID0gdmVjNChwb3NpdGlvbiwgMS4wKTsKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgYCwKICAgICAgICAgICAgZnJhZ21lbnRTaGFkZXI6IGAKICAgICAgICAgICAgICAgIHVuaWZvcm0gZmxvYXQgdV90aW1lOwogICAgICAgICAgICAgICAgdW5pZm9ybSB2ZWMyIHVfcmVzb2x1dGlvbjsKCiAgICAgICAgICAgICAgICB2ZWMzIHBlcm11dGUodmVjMyB4KSB7IHJldHVybiBtb2QoKCh4KjM0LjApKzEuMCkqeCwgMjg5LjApOyB9CiAgICAgICAgICAgICAgICBmbG9hdCBzbm9pc2UodmVjMiB2KXsKICAgICAgICAgICAgICAgICAgICBjb25zdCB2ZWM0IEMgPSB2ZWM0KDAuMjExMzI0ODY1NDA1MTg3LCAwLjM2NjAyNTQwMzc4NDQzOSwgLTAuNTc3MzUwMjY5MTg5NjI2LCAwLjAyNDM5MDI0MzkwMjQzOSk7CiAgICAgICAgICAgICAgICAgICAgdmVjMiBpICA9IGZsb29yKHYgKyBkb3QodiwgQy55eSkgKTsKICAgICAgICAgICAgICAgICAgICB2ZWMyIHgwID0gdiAtICAgaSArIGRvdChpLCBDLnh4KTsKICAgICAgICAgICAgICAgICAgICB2ZWMyIGkxOyBpMSA9ICh4MC54ID4geDAueSkgPyB2ZWMyKDEuMCwgMC4wKSA6IHZlYzIoMC4wLCAxLjApOwogICAgICAgICAgICAgICAgICAgIHZlYzQgeDEyID0geDAueHl4eSArIEMueHh6ejsgeDEyLnh5IC09IGkxOwogICAgICAgICAgICAgICAgICAgIGkgPSBtb2QoaSwgMjg5LjApOwogICAgICAgICAgICAgICAgICAgIHZlYzMgcCA9IHBlcm11dGUoIHBlcm11dGUoIGkueSArIHZlYzMoMC4wLCBpMS55LCAxLjAgKSkgKyBpLnggKyB2ZWMzKDAuMCwgaTEueCwgMS4wICkpOwogICAgICAgICAgICAgICAgICAgIHZlYzMgbSA9IG1heCgwLjUgLSB2ZWMzKGRvdCh4MCx4MCksIGRvdCh4MTIueHkseDEyLnh5KSwgZG90KHgxMi56dyx4MTIuencpKSwgMC4wKTsKICAgICAgICAgICAgICAgICAgICBtID0gbSptIDsgbSA9IG0qbSA7CiAgICAgICAgICAgICAgICAgICAgdmVjMyB4ID0gMi4wICogZnJhY3QocCAqIEMud3d3KSAtIDEuMDsgdmVjMyBoID0gYWJzKHgpIC0gMC41OwogICAgICAgICAgICAgICAgICAgIHZlYzMgb3ggPSBmbG9vcih4ICsgMC41KTsgdmVjMyBhMCA9IHggLSBveDsKICAgICAgICAgICAgICAgICAgICBtICo9IDEuNzkyODQyOTE0MDAxNTkgLSAwLjg1MzczNDcyMDk1MzE0ICogKCBhMCphMCArIGgqaCApOwogICAgICAgICAgICAgICAgICAgIHZlYzMgZzsgZy54ICA9IGEwLnggICogeDAueCAgKyBoLnggICogeDAueTsKICAgICAgICAgICAgICAgICAgICBnLnl6ID0gYTAueXogKiB4MTIueHogKyBoLnl6ICogeDEyLnl3OwogICAgICAgICAgICAgICAgICAgIHJldHVybiAxMzAuMCAqIGRvdChtLCBnKTsKICAgICAgICAgICAgICAgIH0KCiAgICAgICAgICAgICAgICB2b2lkIG1haW4oKSB7CiAgICAgICAgICAgICAgICAgICAgdmVjMiB1diA9IGdsX0ZyYWdDb29yZC54eSAvIHVfcmVzb2x1dGlvbi54eTsKICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICBmbG9hdCBuID0gc25vaXNlKHV2ICogMi41ICsgdmVjMih1X3RpbWUgKiAwLjQsIHVfdGltZSAqIDAuNSkpOwogICAgICAgICAgICAgICAgICAgIGZsb2F0IG4yID0gc25vaXNlKHV2ICogMS41IC0gdmVjMih1X3RpbWUgKiAwLjMsIHVfdGltZSAqIDAuMikpOwogICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgIC8vIFdhcm0gUGFsZXR0ZSBDb2xvcnMKICAgICAgICAgICAgICAgICAgICB2ZWMzIGNvbG9yT3JhbmdlID0gdmVjMygwLjkxLCAwLjM0LCAwLjA0KTsgIC8vIEludGVuc2Ugb3JhbmdlCiAgICAgICAgICAgICAgICAgICAgdmVjMyBjb2xvclJvc2UgPSB2ZWMzKDAuODgsIDAuMTEsIDAuMjgpOyAgICAvLyBCcmlnaHQgcm9zZQogICAgICAgICAgICAgICAgICAgIHZlYzMgY29sb3JEZWVwID0gdmVjMygxLjAsIDAuODUsIDAuNjUpOyAgICAgLy8gRGVlcCBibGVuZGluZyB3YXJtIGJhc2UKCiAgICAgICAgICAgICAgICAgICAgZmxvYXQgbWl4VmFsID0gc21vb3Roc3RlcCgtMC42LCAwLjgsIG4pOwogICAgICAgICAgICAgICAgICAgIHZlYzMgZmluYWxDb2xvciA9IG1peChjb2xvckRlZXAsIGNvbG9yT3JhbmdlLCBtaXhWYWwpOwogICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgIGZsb2F0IG1peFZhbDIgPSBzbW9vdGhzdGVwKC0wLjQsIDAuOSwgbjIpOwogICAgICAgICAgICAgICAgICAgIGZpbmFsQ29sb3IgPSBtaXgoZmluYWxDb2xvciwgY29sb3JSb3NlLCBtaXhWYWwyICogMC44KTsKCiAgICAgICAgICAgICAgICAgICAgZmxvYXQgYWxwaGFGYWRlID0gc21vb3Roc3RlcCgtMC4yLCAwLjYsIHV2LngpOwogICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgIGdsX0ZyYWdDb2xvciA9IHZlYzQoZmluYWxDb2xvciwgYWxwaGFGYWRlKTsKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgYAogICAgICAgIH0pOwoKICAgICAgICBjb25zdCBtZXNoID0gbmV3IFRIUkVFLk1lc2goZ2VvbWV0cnksIG1hdGVyaWFsKTsKICAgICAgICBzY2VuZS5hZGQobWVzaCk7CgogICAgICAgIGZ1bmN0aW9uIHJlc2l6ZUNhbnZhcygpIHsKICAgICAgICAgICAgcmVuZGVyZXIuc2V0U2l6ZSh3aW5kb3cuaW5uZXJXaWR0aCwgd2luZG93LmlubmVySGVpZ2h0KTsKICAgICAgICAgICAgbWF0ZXJpYWwudW5pZm9ybXMudV9yZXNvbHV0aW9uLnZhbHVlLnNldCh3aW5kb3cuaW5uZXJXaWR0aCwgd2luZG93LmlubmVySGVpZ2h0KTsKICAgICAgICB9CiAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHJlc2l6ZUNhbnZhcyk7CiAgICAgICAgcmVzaXplQ2FudmFzKCk7CgogICAgICAgIGZ1bmN0aW9uIGFuaW1hdGVXZWJHTCh0aW1lKSB7CiAgICAgICAgICAgIG1hdGVyaWFsLnVuaWZvcm1zLnVfdGltZS52YWx1ZSA9IHRpbWUgKiAwLjAwMjsKICAgICAgICAgICAgcmVuZGVyZXIucmVuZGVyKHNjZW5lLCBjYW1lcmEpOwogICAgICAgICAgICByZXF1ZXN0QW5pbWF0aW9uRnJhbWUoYW5pbWF0ZVdlYkdMKTsKICAgICAgICB9CiAgICAgICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKGFuaW1hdGVXZWJHTCk7CgogICAgICAgIC8vIC0tLSBHU0FQIE1hc2tlZCBSZXZlYWwgJiBzdGFuZGFyZCBlbnRyYW5jZSBhbmltYXRpb25zIC0tLQogICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ0RPTUNvbnRlbnRMb2FkZWQnLCAoKSA9PiB7CiAgICAgICAgICAgIGdzYXAucmVnaXN0ZXJQbHVnaW4oU2Nyb2xsVHJpZ2dlcik7CgogICAgICAgICAgICAvLyBIZWFkbGluZSBNYXNrZWQgUmV2ZWFsCiAgICAgICAgICAgIGdzYXAudG8oJy5ncy1yZXZlYWwtd29yZCcsIHsKICAgICAgICAgICAgICAgIHk6ICcwJScsCiAgICAgICAgICAgICAgICBlYXNlOiAncG93ZXI0Lm91dCcsCiAgICAgICAgICAgICAgICBkdXJhdGlvbjogMS4yLAogICAgICAgICAgICAgICAgc3RhZ2dlcjogMC4xLAogICAgICAgICAgICAgICAgc2Nyb2xsVHJpZ2dlcjogewogICAgICAgICAgICAgICAgICAgIHRyaWdnZXI6ICcuZ3MtcmV2ZWFsLWNvbnRhaW5lcicsCiAgICAgICAgICAgICAgICAgICAgc3RhcnQ6ICd0b3AgODUlJywKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSk7CgogICAgICAgICAgICAvLyBTdGFuZGFyZCBvcGFjaXR5IGZhZGVzCiAgICAgICAgICAgIGNvbnN0IGVsZW1lbnRzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnLmFuaW0tZWxlbWVudCcpOwogICAgICAgICAgICBlbGVtZW50cy5mb3JFYWNoKChlbCwgaW5kZXgpID0+IHsKICAgICAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4gewogICAgICAgICAgICAgICAgICAgIGVsLnN0eWxlLm9wYWNpdHkgPSAnMSc7CiAgICAgICAgICAgICAgICAgICAgZWwuc3R5bGUudHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVkoMCknOwogICAgICAgICAgICAgICAgfSwgMTAwICsgKGluZGV4ICogODApKTsKICAgICAgICAgICAgfSk7CiAgICAgICAgfSk7CiAgICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+Cg==";
    const assetFiles = [];
    const runtimeFiles = ["../../../../assets/runtime/runtime-027051effa47-gsap-min.js","../../../../assets/runtime/runtime-163ebd087cfc-iconify-icon-min.js","../../../../assets/runtime/runtime-25023b521d77-three-min.js","../../../../assets/runtime/runtime-689ca8dda44c-scrolltrigger-min.js","../../../../assets/runtime/runtime-ccc8894b3418-runtime.js"];
    const frame = document.getElementById("neuform-demo");
    const decodeBytes = (value) => Uint8Array.from(atob(value), (character) => character.charCodeAt(0));
    const decode = (value) => new TextDecoder().decode(decodeBytes(value));
    const encodeBytes = (bytes) => {
      let binary = "";
      for (let index = 0; index < bytes.length; index += 32768) {
        binary += String.fromCharCode(...bytes.subarray(index, index + 32768));
      }
      return btoa(binary);
    };
    const mediaTypes = {
      avif: "image/avif",
      gif: "image/gif",
      jpg: "image/jpeg",
      jpeg: "image/jpeg",
      mp4: "video/mp4",
      png: "image/png",
      webm: "video/webm",
      webp: "image/webp"
    };
    const loadAsset = async (file) => {
      const response = await fetch(file, { cache: "no-store", credentials: "omit", redirect: "error" });
      if (!response.ok) throw new Error("Could not load local demo asset: " + file);
      const extension = file.split(".").pop().toLowerCase();
      const contentType = mediaTypes[extension] || "application/octet-stream";
      const bytes = new Uint8Array(await response.arrayBuffer());
      return { base64: encodeBytes(bytes), contentType, file, kind: "asset" };
    };
    Promise.allSettled(assetFiles.map(loadAsset)).then((results) => {
      const runtimeSources = runtimeFiles.map((file) => new URL(file, location.href).href).join(" ");
      const source = decode(encodedHtml).replace("__NEUFORM_RUNTIME_SOURCES__", runtimeSources);
      const mediaAssets = [];
      for (const result of results) {
        if (result.status !== "fulfilled") continue;
        mediaAssets.push(result.value);
      }
      frame.addEventListener("load", () => {
        frame.contentWindow.postMessage({ type: "neuform-assets-v1", assets: mediaAssets }, "*");
      }, { once: true });
      frame.srcdoc = source;
    }).catch((error) => {
      document.body.innerHTML = '<div class="error">Unable to load this sandboxed demo.</div>';
      console.error(error);
    });
  </script>
</body>
</html>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/corner-diagonals · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download corner-diagonals.zip