Layout and gridsLocal editorial record

Corner diagonals

Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells.

Catalog record

Installable source artifact

This page explains the direction locally, then links to the exact upstream artifact and its verified install command.

What this gives you

A clearer brief for the agent.

Provides a repeatable structure for spacing, columns, alignment, and responsive change.

Expected result

Layouts that stay coherent as content and viewport size change.

Use it when

The page feels loose, crowded, or inconsistent across breakpoints.

Source repository stars

4.9K

Source repository · verified 2026-08-17

Install status

Installable source artifact

corner-diagonals · Skills CLI

Install this skill with one command.

This exact source artifact can be installed in your project with the Skills CLI.

$npx skills add https://github.com/MengTo/Skills --skill corner-diagonals

Skill name: corner-diagonals · installs into the agent directory selected by the CLI.

Open source SKILL.md Read install guidance

Related directions

Continue inside DesignMD.

Beautiful shadowsApply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation.Container linesAdd vertical container-size guide lines with mini corner squares for precise, structured web layouts.Dither backgroundCreate a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering.Framed grid layoutCreate minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment.