design-eng

Plugin design-eng from marketplace md-skills in META-DREAMER/md-skills. Commands read from the repo's manifest — 3 days ago.

Skills (14)

• animate

  Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something,

• apple-design

  Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking,

• drop-artifact

  Generate a shareable HTML artifact (roadmap, one-pager, design memo, status update, mockup, or a small interactive app) and publish it to a short shareable URL via the `drop` Cloudflare Worker. Use when asked to make a shareable visual/HTML page, turn a doc or plan into a link, or "drop" something f

• emil-design-eng

  This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

• favicon

  Generate a complete set of favicons from a source image and update HTML. Use when setting up favicons for a web project.

• find-animation-opportunities

  Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animat

• improve-animations

  Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "imp

• mobile-native

  Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content unde

• pick-ui-library

  Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.

• prototype

  Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.

• rams

  Run accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.

• review-animations

  Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

• shadcn

  Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a

• vercel-composition-patterns

  React composition patterns that scale. Use when refactoring components with

Similar plugins