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/source.json

{
  "version": 1,
  "provider": "Neuform",
  "synced_at": "2026-07-18T06:40:41.493Z",
  "skill": {
    "id": "corner-diagonals",
    "label": "Corner Diagonals",
    "usage_count": 337,
    "url": "https://neuform.ai/skill/corner-diagonals"
  },
  "ranking": {
    "position": 1,
    "order": [
      "view_count desc",
      "community_favorite_count desc",
      "relation_created_at desc"
    ],
    "visible_design_count": 1
  },
  "design": {
    "id": "7812748c-5b49-4ad8-ad76-880860406fb0",
    "slug": "auralis-neural-audio-engine",
    "title": "Auralis - Neural Audio Engine",
    "url": "https://neuform.ai/pages/auralis-neural-audio-engine/index.html",
    "view_count": 1953,
    "favorite_count": 80,
    "remix_count": 39
  },
  "html": {
    "original_sha256": "20b3fb411ebda39d7673aecba46b12fd262861676915aedfaa07587e2a55fec6",
    "bundled_sha256": "96274ba60b97a959342b066c95074b4ddac96ff588ffec3a1db6579af3597cf4",
    "runtime_dependencies": [
      "https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"
    ],
    "hardened_sha256": "6ebabd464b9168e47d8523e415f7a6dc1a58755e2b2ea68f9ed2b5fd2997a7fe",
    "sandboxed_sha256": "21f51f52256cc0c08deb82e954ba0418fa8319ed9a36277902c005842b105b96",
    "security_profile": "sandboxed-srcdoc-v1"
  },
  "assets": {
    "preview": "assets/source-preview.jpg",
    "bundled": [
      {
        "bytes": 407279,
        "file": "../../../../assets/runtime/runtime-ccc8894b3418-runtime.js",
        "original_url": "https://cdn.tailwindcss.com/",
        "kind": "runtime-script",
        "sha256": "176e894661aa9cdc9a5cba6c720044cbbf7b8bd80d1c9a142a7c24b1b6c50d15"
      },
      {
        "bytes": 42667,
        "file": "../../../../assets/runtime/runtime-689ca8dda44c-scrolltrigger-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js",
        "kind": "runtime-script",
        "sha256": "65f6c13748b0c8d8f9eabd0373a130ac293b3f16bf34aaa946d953980372b932"
      },
      {
        "bytes": 71520,
        "file": "../../../../assets/runtime/runtime-027051effa47-gsap-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js",
        "kind": "runtime-script",
        "sha256": "efc85c7eb141819717cda0033484a84b1c890d13b02e355a2fec79d424b20e7a"
      },
      {
        "bytes": 603445,
        "file": "../../../../assets/runtime/runtime-25023b521d77-three-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js",
        "kind": "runtime-script",
        "sha256": "9274bbcec8d96168626c732b5d31c775aa8cfb7eaa0599bec0c175908a2c1ce2"
      },
      {
        "bytes": 22003,
        "file": "../../../../assets/runtime/runtime-163ebd087cfc-iconify-icon-min.js",
        "original_url": "https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js",
        "kind": "runtime-script",
        "sha256": "851bed7af266f96a0be3edf9918daab48d8da4ce17c46040511bae450caf3dd6"
      }
    ],
    "skipped": []
  }
}

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