consistent-border-radius
Consistent Border Radius
This skill audits a frontend file (CSS, HTML, JSX, TSX, Vue, Svelte, or plain JS) and rewrites all border-radius values so every UI element — buttons, inputs, cards, modals, badges, tooltips, dropdowns — uses the same curvature token.
When to Use
Trigger on any of these signals:
- User mentions mismatched, inconsistent, or ugly rounded corners
- User wants a "design consistency pass" or "visual polish"
- User says elements "don't match", "look off", or "feel inconsistent"
- File has scattered
border-radiusvalues (4pxhere,8pxthere,0.5remsomewhere else) - User is cleaning up a design system or component library
Step 1 — Audit the File
More from blunotech-dev/agents
anti-purple-ui
Enforce a strict monochrome UI with a single high-contrast accent color, removing generic tech gradients and “AI-style” palettes. Use when the user wants minimal, anti-AI, or non-generic aesthetics, or says the UI looks too techy or generic.
9harmonize-whitespace
Align all spacing (padding, margins, gaps) to a consistent 4pt/8pt grid. Use when spacing feels off, inconsistent, cramped, or unbalanced, or when the user asks for a spacing scale or alignment fix.
9typographic-hierarchy
Improve typography by adjusting font sizes, weights, spacing, and contrast to create clear visual hierarchy and readability. Use when text feels flat, unstructured, or when the user asks to refine headings, type scale, or overall readability.
7micro-interaction-adder
Add polished CSS micro-interactions like hover effects, transitions, and feedback states to improve UI feel. Use when the user asks for animations, better UX, or when the interface feels static, plain, or unresponsive.
4component-split
Analyze a component and determine when and how to split it based on size, responsibility, and reuse signals, producing a refactored structure with clear boundaries. Use when users share large, mixed-concern, or hard-to-test components, or ask about splitting, refactoring, or improving component architecture.
3any-type-elimination
Find and replace `any` types in TypeScript with precise types, generics, or `unknown` plus narrowing. Use when improving type safety, fixing implicit `any`, removing `any`, or migrating code to strict TypeScript.
3