Skip to content
Get packs

Corner Diagonals

Gives UI buttons, cards and panels sharp diagonal-cut corners and chamfered edges.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent knows how to style web interface elements such as buttons, cards, panels and containers with angled, clipped corners instead of rounded or plain rectangular corners. It supplies a consistent set of CSS sizing tokens, shape patterns, and checks (for example keeping buttons at least 44px tall and keeping focus outlines visible) so the result looks like a deliberate design system. It is a styling guide for the agent to write front-end code, not a tool that runs on its own.

Great for

  • Front-end developers building sci-fi, gaming or technical-looking interfaces
  • Designers who want angular, engineered-looking UI components in a web project
  • Teams that want one consistent corner-cut style across buttons and cards

Skip it if

  • Projects that need rounded, soft or standard rectangular design, since the skill steers toward angular shapes
  • Simple sites where clipped corners would add visual complexity without benefit
  • Situations where accessibility is critical and the clipped shapes have not been tested, since the skill warns that aggressive clipping can hurt readability and that clip-path can cut off borders and focus rings if misapplied

Try asking

  • “Make the buttons on my landing page have chamfered corners that match a sci-fi look”
  • “Style this pricing card with a diagonal cut on the top-left and bottom-right corners”
  • “Create a bordered panel component with a clipped-corner outline using CSS clip-path”
Step-by-step guide: how to use Corner DiagonalsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    corner-diagonals.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip corner-diagonals.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip corner-diagonals.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the component type (button, card, panel) and the corner pattern you want, such as mirrored top-left and bottom-right, so the agent picks the right shape.
  • Ask the agent to run the quick checks at the end, especially hit-area and focus-state visibility, before you ship.
  • Review the demo page in the repository to see the intended look before requesting changes.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.