jakubkrehel

13 skills

make-interfaces-feel-betterjakubkrehel59KDesign engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows, better-uijakubkrehel28KPolishes and improves the UI in your project. Covers concentric border radius, optical alignment, surface depth, contextual icons, hit areas and more.better-typographyjakubkrehel25KFocuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.better-colorsjakubkrehel24KHelps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.better-layoutjakubkrehel22KHelps with grouping, alignment, reading order, progressive disclosure and other details that make a good layout.better-interfacejakubkrehel22KCombines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.better-accessibilityjakubkrehel21KHelps your project comply with accessibility standards and best practices.better-writingjakubkrehel21KFocuses on improving product copy in your project.interface-reviewjakubkrehel12KReviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.variantjakubkrehel8.7KBuilds multiple variants of a component you're working on and helps you iterate and pick one.explain-interfacejakubkrehel8.5KHelps you figure out how something was built on the web.breakjakubkrehel8KRenders a component you choose in every state and scenario on a temporary page and stress tests it.oklch-skilljakubkrehel3.9KOKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.