Individual skill

corner-diagonals

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.

agent-skills/web-design/corner-diagonals/SKILL.md

Read pinned source

Source commit 5ea1661a0e05d82b054553daaa6baf6d0233c33c

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 7,356
Repository last updated: Nov 8, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

design Derived category
devops Derived category
design-interface Derived category
devops-containers Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 5,546 bytes
demo/PROMPT.mddoc · 3,252 bytes
demo/assets/source-preview.jpgasset · 96,070 bytes
demo/index.htmlasset · 27,386 bytes
demo/preview.jpgasset · 55,801 bytes
demo/source.jsonasset · 3,050 bytes

Read excerpt


# 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.