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://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

SKILL.md

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.

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 or Meng To.

Download ZIP

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