corner-diagonals

What problem does it solve?

This Skill helps you apply precise diagonal-cut corners and chamfered edges consistently in UI components so designs don’t look accidental or visually inconsistent.

Core Features & Use Cases

• Diagonal silhouette with clip-path: Creates true geometric corner cuts for a sharp, engineered look instead of a rounded-pill style.
• Reusable cut tokens + scalable sizes: Standardizes corner sizes (sm/md/lg) and border/line treatments so the motif stays coherent across components.
• Shell + inner layering for bordered surfaces: Preserves a matching clipped border and an inner content surface using the same polygon geometry.
• Button-ready patterns with accessibility checks: Includes primary/secondary button recipes while maintaining usable hit targets and visible focus rings.

Use it for sci-fi or technical UI surfaces, card/panel framing, chamfered container shells, and clipped-corner controls across a component library.

Quick Start

Apply the provided clip-path polygon and cut token size from corner-diagonals to your button, card, panel, or container shell, then reuse the same cut logic consistently across the set.