Profile My skills Saved Collections Edit profile Submit a skill

← all publishers

snapcndev

@snapcndev source repo

7 published skills

  1. ▌
    Emil Design Eng · snapcndev
    Emil Kowalski's design-engineering philosophy on UI polish, component design, and the invisible details that make software feel great. Use when deciding whether an interaction needs motion, choosing duration and easing, designing a component's states (hover, focus, loading, empty, error), or judging why an interface feels cheap when nothing is technically wrong. Triggers - "make this feel better", "is this animation good", "design polish", "micro-interaction", "easing", "duration", "component states", "attention to detail".
    0
    installs
  2. ▌
    Review Animations · snapcndev bundle
    Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy — duration, easing, interruptibility, reduced-motion, and whether the motion earns its place at all. Default to flagging; approval is earned. Use when reviewing a diff that adds or changes animation, or when asked whether a transition, spring or keyframe is good enough to ship. For auditing a whole codebase's motion instead of one diff, use improve-animations.
    0
    installs
  3. ▌
    Snapcn · snapcndev bundle
    Build Remotion videos with snapcn — a shadcn registry of copy-paste animation components and timeline-driven UI primitives. Use when composing video scenes, adding text animations, transitions, backgrounds, UI blocks, brand/social cards, or full compositions in a Remotion project. Triggers include "snapcn", "video component", "add animation", "text reveal", "product demo video", "remotion component", "terminal simulator", "device frame", "phone mockup", "burned-in captions", "karaoke captions", "logo animation", "launch video", "changelog video", and the UI-primitive tier: "video input", "typing caret". Even if the user doesn't mention snapcn, activate when they need polished video primitives for Remotion.
    0
    installs
  4. ▌
    UX UI Maxpro · snapcndev
    Replicate a reference UI pixel-for-pixel and build polished, token-driven site chrome. Use when the task is to match a screenshot or live site exactly, redesign a page to look like a design reference, or build a masonry/gallery/grid layout that must feel like the source. Triggers include "pixel perfect", "exact replica", "not a single change", "match this design", "like this screenshot", "masonry grid", "design gallery", "redesign the overview", "same spacing", "same design fashion", "clone this layout", and any request that pairs a UI target image with "make it exactly like that". Also activate when measuring spacing/typography off a reference before writing CSS.
    0
    installs
  5. ▌
    Design System · snapcndev
    How a snapcn component is allowed to look. READ THIS BEFORE you write a colour, a border, a shadow, a radius or a font stack into a registry component. snapcn ships a shadcn design system (SnapCnTheme) and a tier of shadcn UI primitives (snap-cn-ui) — components compose them, they do not re-invent them. Explains which tokens exist, how to resolve them, how to reuse a primitive's own surface instead of hand-rolling one, and why var(--token) does not survive a Remotion render. Triggers - color, colour, hex, rgba, box-shadow, drop shadow, border, hairline, radius, surface, background, theme, dark mode, styling a component, "looks wrong on white", "the shadow is bad", shadcn, Input, Button, Card.
    0
    installs
  6. ▌
    Motion Quality · snapcndev
    Hard-won, measured rules for animating text and shipping registry components in snapcn. READ THIS BEFORE you animate a scale or transform on text, pick an easing curve, add will-change, set a transformOrigin, split a word into per-letter spans, or touch a component that has a rendered demo. Explains why scaled text looks "stuck" and "shaky" in a browser (glyph pixel snapping, font hinting), which fixes are real and which are cargo cult, why aggressive ease-out curves freeze on a frame clock, and how to verify an animation by measuring rendered frames instead of eyeballing it. Triggers - scale animation, zoom text, transform, transformOrigin, easing, cubic-bezier, ease-out, will-change, jitter, judder, stutter, wobble, blurry text, text not smooth, letters stuck, Remotion component, registry component, preview looks wrong.
    0
    installs
  7. ▌
    Interactivity Best Practices · snapcndev
    Best practices for writing Remotion animations that stay intuitive for coding agents and remain editable in Remotion Studio Visual Mode — keeping values literal and inline where the Studio can find them, rather than hidden behind indirection. Use when writing or refactoring a Remotion composition, or when an animation is correct in code but not editable in the Studio. Triggers - Remotion Studio, Visual Mode, editable animation, interpolate, spring, composition props.
    0
    installs