Design taste your coding agent can use, and a check it can't skip.
Critly is a library of design-engineering concepts, skills that bring them into your agent's work, and a check that measures your running app against them. The three point at each other: a failing check links to the concept, and the skill tells the agent to run the check before it says it's done.
- Library87 concepts. Each is one idea with a rule, real numbers and a demo you can feel.
- SkillsYour agent builds, reviews and audits your interface with the concepts open.
- CheckLints the running app against 15 rules. Every finding names the fix and the concept behind it.
Start
Install the skills for every agent you use, then ask yours to set up the check.
npx skills add kausthubh-coder/critly -gnpx @kausthubh/critly check http://localhost:3000Critly is open source. To contribute, here's the repo:
kausthubh-coder/critlyLibrary
Short ideas and tricks rather than an exhaustive resource. Concepts marked Checked have a rule the check measures.
Craft
Performance Is Design
How fast it feels is a design choice.
How to Get References
Great work starts with great inputs.
Novelty Budget
Save delight for the rare moments.
Taste Is Trained
Taste is a skill, and it takes reps.
Timelessness
Surface ages fast. Structure doesn't.
Product Feel
Decide the feel before the numbers.
Design Tokens
CheckedName the role, not the value.
Typography
Letter Spacing
CheckedTighten big text, loosen small text.
Text Wrapping
Balanced headings, no lonely last words.
Tabular Numbers
CheckedSteady digits for values that change.
Optical Alignment
Center for the eye, not the math.
Icons
CheckedOne set, one weight, sized to the text.
Font Smoothing
Light text on dark renders heavier.
Visual Hierarchy
Quiet the rest so one thing leads.
Line Length
CheckedLines short enough to find the next one.
Type Scale
CheckedA few sizes, each with a job.
Color
OKLCH
Lightness values that look equal.
Noise
Grain hides banding and adds texture.
Shadows, Not Borders
Layered shadows give edge and depth.
Image Outlines
A faint inner edge that frames images.
Color Roles
CheckedGray does the work, color has a job.
Dark Mode
A second design, not an inverted one.
Liquid Glass
A lens for controls, never for content.
Layout
Nested Border Radius
Inner radius is outer minus padding.
Hit Areas
CheckedMake the target bigger than the icon.
HTML Background
CheckedPaint the canvas behind your page.
Clip-Path
Reveal by clipping, not resizing.
Scroll Fades
Fade the edge that has more to scroll.
Squircles
Corners that ease into the edge.
Whitespace
Space is how things group.
Spacing Scale
A few spaces, used everywhere.
Alignment
Fewer edges, less to read.
Density
Fit the space to how often it's used.
Layout Shift
Hold the space for what arrives late.
Responsive
CheckedFit the space you're given.
Interaction
Interaction States
Every control has more than one face.
Focus Rings
Show keyboard users where they are.
Input Details
CheckedSmall attributes that make typing easy.
Empty States
Say why it's empty and what to do next.
Command Menu
One shortcut to reach everything.
Overlays
Keep scroll and focus inside the layer.
Toasts
News from somewhere else.
Destructive Actions
Undo instead of asking.
Content
Motion
Icon Morph
Blur, scale and fade between icons.
Button Press
Scale down on press so it feels real.
Easings
Ease-out for anything the user triggers.
Springs
Tune motion by feel, then convert it.
Stagger
Turn one block into a sequence.
Interruptibility
Animation that can change its mind.
Momentum
Finish the throw people started.
Hover Restraint
Frequent interactions should be instant.
Shared Layout
One element moving beats two swapping.
Liquid Motion
One surface that changes shape.
Exit Animations
Leave faster and quieter than you came.
Scale Entrances
Grow from the trigger, not from zero.
Reduced Motion
Reduce motion, keep meaning.
Performance
Measuring Performance
Measure the wait people feel, more than once.
Responsiveness
Answer every input on the next frame.
Instant Navigation
Start loading before the click lands.
Image Loading
CheckedHold the space, then fade in.
Font Loading
Text first, in a fallback that fits.
Video and Embeds
Load the player when someone wants it.
JavaScript Cost
Ship less script, load the rest on intent.
Long Lists
Render what's on screen, not everything.
Smooth Animation
CheckedAnimate what the compositor can run.
Effect Cost
CheckedBudget effects by how many, not how they look.
Sound
Data
Mobile
Native Feel
Follow the platform people already know.
Thumb Reach
Put frequent actions where the thumb rests.
Touch Feedback
Answer the finger on touch-down.
Gestures
Every gesture needs a visible twin.
Swipe Actions
Reveal on a short swipe, commit on a long one.
Long Press
Show the hold, then open the menu.
Bottom Sheets
Detents, a grabber, and a swipe down.
Back Navigation
Back follows the finger and can change its mind.
Haptics
Feel the moments the eye confirms.
Safe Areas
Paint to the edges, keep content inside.
Soft Keyboard
Keep the field and its button above the keys.
Text Size
Let text grow and layouts reflow.
UI Thread
Run gestures where the frames are drawn.
App Launch
Open on the content, not a logo.
Native Lists
Recycle rows, keep the scroll at full rate.