Guide · Agent skill
How to use the Corner Diagonals agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Corner Diagonals is an agent skill that teaches an AI coding agent to style web interface elements with diagonal-cut corners and chamfered edges instead of rounded or plain rectangular corners. It is aimed at front-end developers and designers building sci-fi, gaming or technical-looking interfaces. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what to check in the result.
Corner DiagonalsMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the corner-diagonals ZIP from the skill's page on this directory.
- 2Unzip into the skills folder. Unzip it into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
- 4Ask for clipped corners. Name the components and style, for example using $corner-diagonals on your card and button components.
- 5Review the code. Check that borders, backgrounds and hit areas share the same diagonal shape and that buttons are at least 44px tall.
- 6Test focus and readability. Tab through the interface and confirm focus outlines remain visible around the clipped shapes.
What the Corner Diagonals skill makes the agent do
An agent skill is a folder of instructions that an AI agent loads when a task matches it. This one covers buttons, cards, panels and container shells. When it is active, the agent styles these surfaces with angled, clipped corners, using CSS clip-path polygons for true diagonal silhouettes.
The skill supplies a consistent set of CSS sizing tokens, such as --corner-cut-sm, --corner-cut-md and --corner-cut-lg, plus shape patterns for primary buttons, secondary buttons, cards and nested panels. It also includes checks, for example keeping buttons at least 44px tall and keeping focus outlines visible around the clipped shape.
It is a styling guide for the agent while it writes front-end code. It does not run on its own and does not execute scripts.
Install the Corner Diagonals skill
Download the ZIP from the skill's page on our directory, then choose one of the two routes below.
For Claude Code, unzip the download into your user skills folder at ~/.claude/skills/ so the skill is available across your projects. To limit it to one project, unzip it into that project's .claude/skills/ folder instead. The skill folder should contain SKILL.md, which is the file the agent reads.
In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills instead.
- Personal use: ~/.claude/skills/
- Single project: .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills
How to trigger the skill with natural requests
You can name the skill directly, as the demo prompts do, by writing $corner-diagonals at the start of a request. You can also describe the look you want and let the agent match the skill from its description, which mentions buttons, cards, panels, clipped-corner controls and sharp containers.
Be specific about the surface and the mood. Name the component types, say whether you want a single cut or mirrored corners, and state the overall style, such as sci-fi or technical.
- Use $corner-diagonals to style the primary and secondary buttons in this login form with clipped corners.
- Give the pricing cards one diagonal corner each, top-left and bottom-right, with a thin frame.
- Recreate this hero panel as a responsive HTML page with angled inner blocks inside a straight outer frame.
Examples of what the skill produces
The skill's demo folder includes a prompt that asks the agent to recreate a standalone responsive HTML design, using demo/index.html as the visual and interaction reference. The demo prompt describes an authentication-style section with content anchors and an animated feel.
The patterns in SKILL.md show what to expect: a .cut-button class with a 44px minimum height and a clipped polygon, a .cut-button-secondary with a dark fill and gradient outline, and a .cut-shell wrapper that uses an outer clipped element and an inner surface with the same polygon.
.cut-button {
--cut: var(--corner-cut-sm);
min-height: 44px;
clip-path: polygon(
var(--cut) 0,
100% 0,
100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,
0 100%,
0 var(--cut)
);
}What the skill needs and how it runs
The skill lists no requirements. It does not run scripts and does not use the network. Its files are SKILL.md, demo/index.html, demo/PROMPT.md and demo/source.json.
Because it only supplies instructions and CSS patterns, the work happens in the code the agent writes for your project. You still need a front-end project or a way to view the HTML the agent produces.
Safety notes and when to avoid the skill
Clipping can hide things. The skill warns that clip-path can cut off borders and focus rings if misapplied, so the agent is told to clip the border and hit area along with the background. Check this in the result.
The skill also warns that aggressive clipping can hurt readability. If accessibility is critical and the clipped shapes have not been tested, review the output carefully or choose a different approach. Do not use it where rounded, soft or standard rectangular design is required.
- Confirm focus outlines are visible on keyboard focus.
- Confirm text keeps comfortable horizontal padding after the cut.
- Test the clipped shapes with your own accessibility checks before shipping.
Tips for better results
Keep one cut size per component family. The skill recommends 6px to 10px for small controls, 12px to 18px for cards and 20px to 32px for large panels, and it advises against random cut sizes across similar components.
Reserve the accent colour for primary controls, hover borders or focal states, and keep the shape stable during motion. Ask the agent to review its output against the Quick Checks section of SKILL.md.
- Use one or two diagonal corners per card rather than all four.
- Pair chamfered shapes with straight outer frames for hierarchy.
- Do not mix rounded pills and chamfered geometry on the same screen without a clear reason.
What people use it for
- Styling a sci-fi or game menu with clipped-corner buttons and angled panels.
- Building a technical dashboard where cards share one consistent corner-cut style.
- Creating a login or access screen with chamfered controls, based on the demo prompt.
- Adding angular framing to a landing page hero while keeping a straight outer frame.
Frequently asked questions
How do I install the corner-diagonals skill?
Download the ZIP from this directory's page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
Does the corner-diagonals skill require anything else?
The skill lists no requirements. It does not run scripts and does not use the network, so it is a set of instructions and CSS patterns that the agent applies while writing front-end code.
Is the corner-diagonals skill free to use?
The skill is published under the MIT licence, as stated on its page. Check the licence file in the download for the full terms.
Can I use this skill for rounded or soft designs?
No. The skill steers toward angular shapes, so it is not suited to projects that need rounded, soft or standard rectangular design. Choose a different approach for those projects.
Why are my clipped borders or focus rings disappearing?
The skill warns that clip-path can cut off borders and focus rings if it is applied only to the background. Ask the agent to apply the same polygon to the border wrapper and inner surface, and confirm the focus-visible outline is visible.
What does the skill do that a normal prompt would not?
It gives the agent a consistent set of CSS cut tokens, reusable polygon shapes, and quick checks such as the 44px minimum button height. This helps repeated components look like one deliberate system instead of ad hoc corners.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use Corner Diagonals if you are building sci-fi, gaming or technical-looking web interfaces and want a consistent angled corner style across buttons, cards and panels. Pick something else if your project needs rounded, soft or standard rectangular design, or if accessibility is critical and you have not tested clipped shapes.
Download the skill