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

ATTRIBUTION.md

Attribution

This folder is an unmodified copy of the Agent Skill "corner-diagonals", distributed by AutoGineer (https://autogineer.com/agent-skills).

The skill's own files are unmodified copies. AutoGineer is not affiliated with or endorsed by the author or the publisher.

Files added by AutoGineer

  • ATTRIBUTION.md: this file, written by AutoGineer

  • LICENSE: copied from LICENSE

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