@brianli/kimaki 0.4.72-brianli.1

package/skills/jitter/utils/traverse.ts

@@ -0,0 +1,246 @@
+// Tree traversal utilities for Jitter project structure
+
+import type { JitterNode, JitterConf, LayerType } from './types'
+
+function getConf(): JitterConf {
+  return window.app.props.observableImmutableConf.lastImmutableConf
+}
+
+/**
+ * Find a node by its ID anywhere in the project tree
+ */
+export function findNodeById(nodeId: string): JitterNode | null {
+  const conf = getConf()
+
+  const search = (node: JitterNode): JitterNode | null => {
+    if (node.id === nodeId) {
+      return node
+    }
+    if (node.children) {
+      for (const child of node.children) {
+        const found = search(child)
+        if (found) {
+          return found
+        }
+      }
+    }
+    return null
+  }
+
+  for (const root of conf.roots || []) {
+    const found = search(root)
+    if (found) {
+      return found
+    }
+  }
+  return null
+}
+
+export interface MediaNodeInfo {
+  id: string
+  name: string | undefined
+  type: 'svg' | 'image' | 'video' | 'gif'
+  url: string
+  width: number | undefined
+  height: number | undefined
+}
+
+/**
+ * Find all media nodes (images, SVGs, videos, GIFs) in the project
+ */
+export function findAllMediaNodes(): MediaNodeInfo[] {
+  const conf = getConf()
+  const mediaNodes: MediaNodeInfo[] = []
+  const mediaTypes = new Set(['svg', 'image', 'video', 'gif'])
+
+  const search = (node: JitterNode): void => {
+    if (node.item && mediaTypes.has(node.item.type)) {
+      const item = node.item as {
+        type: 'svg' | 'image' | 'video' | 'gif'
+        url: string
+        name?: string
+        width?: number
+        height?: number
+      }
+      mediaNodes.push({
+        id: node.id,
+        name: item.name,
+        type: item.type,
+        url: item.url,
+        width: item.width,
+        height: item.height,
+      })
+    }
+    if (node.children) {
+      node.children.forEach(search)
+    }
+  }
+
+  ;(conf.roots || []).forEach(search)
+  return mediaNodes
+}
+
+export interface TextNodeInfo {
+  id: string
+  name: string | undefined
+  text: string
+  fontSize: number | undefined
+  fontFamily: string | undefined
+}
+
+/**
+ * Find all text nodes in the project
+ */
+export function findAllTextNodes(): TextNodeInfo[] {
+  const conf = getConf()
+  const textNodes: TextNodeInfo[] = []
+
+  const search = (node: JitterNode): void => {
+    if (node.item?.type === 'text') {
+      const item = node.item as {
+        type: 'text'
+        text: string
+        name?: string
+        fontSize?: number
+        font?: { name: string }
+      }
+      textNodes.push({
+        id: node.id,
+        name: item.name,
+        text: item.text,
+        fontSize: item.fontSize,
+        fontFamily: item.font?.name,
+      })
+    }
+    if (node.children) {
+      node.children.forEach(search)
+    }
+  }
+
+  ;(conf.roots || []).forEach(search)
+  return textNodes
+}
+
+export interface ArtboardInfo {
+  id: string
+  name: string | undefined
+  width: number
+  height: number
+  duration: number | undefined
+}
+
+/**
+ * Get all artboards in the project
+ */
+export function getArtboards(): ArtboardInfo[] {
+  const conf = getConf()
+  return conf.roots
+    .filter((r) => r.item?.type === 'artboard')
+    .map((r) => {
+      const item = r.item as {
+        type: 'artboard'
+        name?: string
+        width: number
+        height: number
+        duration?: number
+      }
+      return {
+        id: r.id,
+        name: item.name,
+        width: item.width,
+        height: item.height,
+        duration: item.duration,
+      }
+    })
+}
+
+/**
+ * Find all nodes of a specific type
+ */
+export function findNodesByType(type: LayerType): JitterNode[] {
+  const conf = getConf()
+  const nodes: JitterNode[] = []
+
+  const search = (node: JitterNode): void => {
+    if (node.item?.type === type) {
+      nodes.push(node)
+    }
+    if (node.children) {
+      node.children.forEach(search)
+    }
+  }
+
+  ;(conf.roots || []).forEach(search)
+  return nodes
+}
+
+/**
+ * Find nodes by name (partial match, case-insensitive)
+ */
+export function findNodesByName(name: string): JitterNode[] {
+  const conf = getConf()
+  const nodes: JitterNode[] = []
+  const lowerName = name.toLowerCase()
+
+  const search = (node: JitterNode): void => {
+    const nodeName = (node.item as { name?: string })?.name
+    if (nodeName && nodeName.toLowerCase().includes(lowerName)) {
+      nodes.push(node)
+    }
+    if (node.children) {
+      node.children.forEach(search)
+    }
+  }
+
+  ;(conf.roots || []).forEach(search)
+  return nodes
+}
+
+/**
+ * Get the parent node of a given node
+ */
+export function getParentNode(nodeId: string): JitterNode | null {
+  const node = findNodeById(nodeId)
+  if (!node?.position?.parentId) {
+    return null
+  }
+  return findNodeById(node.position.parentId)
+}
+
+/**
+ * Get all ancestor nodes from a node up to the root
+ */
+export function getAncestors(nodeId: string): JitterNode[] {
+  const ancestors: JitterNode[] = []
+  let current = findNodeById(nodeId)
+
+  while (current?.position?.parentId) {
+    const parent = findNodeById(current.position.parentId)
+    if (parent) {
+      ancestors.push(parent)
+      current = parent
+    } else {
+      break
+    }
+  }
+
+  return ancestors
+}
+
+/**
+ * Flatten the entire node tree into a single array
+ */
+export function flattenTree(): JitterNode[] {
+  const conf = getConf()
+  const nodes: JitterNode[] = []
+
+  const collect = (node: JitterNode): void => {
+    nodes.push(node)
+    if (node.children) {
+      node.children.forEach(collect)
+    }
+  }
+
+  ;(conf.roots || []).forEach(collect)
+  return nodes
+}

package/skills/jitter/utils/types.ts

@@ -0,0 +1,279 @@
+// Jitter type definitions extracted from the editor API
+
+export type LayerType =
+  | 'artboard'
+  | 'text'
+  | 'image'
+  | 'svg'
+  | 'video'
+  | 'gif'
+  | 'rect'
+  | 'ellipse'
+  | 'star'
+  | 'layerGrp'
+
+export type ExportProfile =
+  | 'lottie'
+  | 'mp4'
+  | 'gif'
+  | 'webm'
+  | 'prores4444'
+  | 'pngs'
+
+export interface JitterFont {
+  name: string
+  type: 'googlefont' | 'system' | 'custom'
+  weight: number
+}
+
+export interface GradientStop {
+  id: string
+  position: number
+  color: string
+}
+
+export interface GradientTransform {
+  angle?: number
+  sx: number
+  tx: number
+  ty: number
+}
+
+export interface Gradient {
+  type: 'GRADIENT_LINEAR' | 'GRADIENT_RADIAL'
+  stops: GradientStop[]
+  transform: GradientTransform
+}
+
+export type FillColor = string | Gradient
+
+export interface BaseLayerProperties {
+  name?: string
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  angle?: number
+  scale?: number
+  opacity?: number
+  shadowEnabled?: boolean
+  strokeEnabled?: boolean
+}
+
+export interface ArtboardProperties extends BaseLayerProperties {
+  type: 'artboard'
+  background?: boolean
+  fillColor?: FillColor
+  duration?: number
+}
+
+export interface TextProperties extends BaseLayerProperties {
+  type: 'text'
+  text: string
+  font?: JitterFont
+  fontSize?: number
+  fillColor?: FillColor
+  textAlign?: 'left' | 'center' | 'right'
+  verticalAlign?: 'top' | 'middle' | 'bottom'
+  lineHeight?: number
+  letterSpacing?: number
+  kerning?: boolean
+  ligatures?: boolean
+  case?: 'normal' | 'upper' | 'lower'
+  dir?: 'ltr' | 'rtl'
+  autoResize?: 'none' | 'height' | 'width'
+}
+
+export interface ImageProperties extends BaseLayerProperties {
+  type: 'image'
+  url: string
+  mediaName?: string
+  cornerRadius?: number
+}
+
+export interface SvgProperties extends BaseLayerProperties {
+  type: 'svg'
+  url: string
+  mediaName?: string
+  cornerRadius?: number
+}
+
+export interface VideoProperties extends BaseLayerProperties {
+  type: 'video'
+  url: string
+  mediaName?: string
+  audioUrl?: string | null
+  cornerRadius?: number
+}
+
+export interface GifProperties extends BaseLayerProperties {
+  type: 'gif'
+  url: string
+  mediaName?: string
+  cornerRadius?: number
+}
+
+export interface RectProperties extends BaseLayerProperties {
+  type: 'rect'
+  fillColor?: FillColor
+  cornerRadius?: number
+  strokeColor?: string
+  strokeWidth?: number
+}
+
+export interface EllipseProperties extends BaseLayerProperties {
+  type: 'ellipse'
+  fillColor?: FillColor
+}
+
+export interface StarProperties extends BaseLayerProperties {
+  type: 'star'
+  fillColor?: FillColor
+  points?: number
+  innerRadius?: number
+}
+
+export interface LayerGrpProperties extends BaseLayerProperties {
+  type: 'layerGrp'
+  clipsContent?: boolean
+  background?: boolean
+  cornerRadius?: number
+}
+
+export type LayerProperties =
+  | ArtboardProperties
+  | TextProperties
+  | ImageProperties
+  | SvgProperties
+  | VideoProperties
+  | GifProperties
+  | RectProperties
+  | EllipseProperties
+  | StarProperties
+  | LayerGrpProperties
+
+export interface JitterNode {
+  id: string
+  item: LayerProperties
+  position?: {
+    parentId: string
+    index: string
+  }
+  children?: JitterNode[]
+}
+
+export interface JitterConf {
+  roots: JitterNode[]
+}
+
+export interface FileMeta {
+  id: string
+  name: string
+  bucket: string
+  teamId?: string
+}
+
+export interface EasingConfig {
+  name: string
+  schema: string
+  config: Record<string, number>
+}
+
+export interface AnimationOperation {
+  type: string
+  targetId: string
+  startTime: number
+  endTime: number
+  fromValue?: number | { x: number; y: number }
+  toValue?: number | { x: number; y: number }
+  easing?: EasingConfig
+}
+
+// Action types for dispatchAction
+export interface UpdateAction {
+  type: 'updateObjWithUndo'
+  objId: string
+  data: Partial<LayerProperties> & { url?: string; text?: string }
+}
+
+export interface AddAction {
+  type: 'addObjWithUndo'
+  parentId: string
+  objData: {
+    id: string
+    item: LayerProperties
+  }
+  index?: string
+}
+
+export interface RemoveAction {
+  type: 'removeObjWithUndo'
+  objIds: string[]
+}
+
+export interface SetSelectionAction {
+  type: 'setSelection'
+  selection: {
+    nodesIds: string[]
+  }
+  saveInCmdHistory?: boolean
+}
+
+export type JitterAction =
+  | UpdateAction
+  | AddAction
+  | RemoveAction
+  | SetSelectionAction
+  | { type: 'undo' }
+  | { type: 'redo' }
+  | { type: 'saveSelectionForUndo' }
+  | { type: 'emptySelection' }
+  | { type: 'deleteCurrentSelection' }
+
+// Jitter app interface (available as window.app)
+export interface JitterApp {
+  props: {
+    fileMeta: FileMeta
+    observableImmutableConf: {
+      lastImmutableConf: JitterConf
+      subscribe: (callback: () => void) => () => void
+    }
+    observableEditorState: {
+      getSnapshot: () => {
+        selection: { nodesIds: string[] }
+        base: { artboardTimes: Record<string, number> }
+        toolbox: { currentMode: { mode: { name: string } } }
+      }
+    }
+    rendererRuntime: {
+      getAssetStore: () => Map<string, unknown>
+    }
+    fileActions: {
+      duplicateFile: (fileId: string) => Promise<string>
+      deleteFile: (fileId: string) => Promise<void>
+      renameFile: (name: string) => Promise<void>
+      saveFile: () => Promise<void>
+    }
+  }
+  dispatchAction: (action: JitterAction | Record<string, unknown>) => void
+  addArtboard: () => void
+  addText: (source: 'toolbar' | 'keyboard') => void
+  addRectShape: (source: string) => void
+  addEllipseShape: (source: string) => void
+  addMedia: (source: string) => void
+  play: () => void
+  stopPlayback: () => void
+  moveCursor: (timeInMs: number) => void
+  renameFile: (name: string) => void
+  deleteFile: () => void
+  downloadProject: () => void
+  scheduleSave: () => void
+  getState: () => unknown
+  isReadOnly: () => boolean
+}
+
+declare global {
+  interface Window {
+    app: JitterApp
+  }
+}

package/skills/jitter/utils/wait.ts

@@ -0,0 +1,133 @@
+// Waiting utilities for Jitter app initialization and sync
+
+import type { JitterApp } from './types'
+
+/**
+ * Wait for the Jitter app to be fully loaded and ready
+ * Call this after navigating to a project URL
+ */
+export function waitForApp(timeoutMs = 30000): Promise<JitterApp> {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now()
+
+    const check = (): void => {
+      if (Date.now() - startTime > timeoutMs) {
+        reject(new Error('Timeout waiting for Jitter app to load'))
+        return
+      }
+
+      const app = window.app
+      if (app?.props?.observableImmutableConf?.lastImmutableConf) {
+        resolve(app)
+      } else {
+        setTimeout(check, 100)
+      }
+    }
+
+    check()
+  })
+}
+
+/**
+ * Wait for changes to sync to the server
+ * Call this after making modifications before exporting
+ */
+export function waitForSync(delayMs = 2000): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delayMs)
+  })
+}
+
+/**
+ * Wait for a specific condition to be true
+ */
+export function waitFor(
+  condition: () => boolean,
+  options: { timeout?: number; interval?: number } = {},
+): Promise<void> {
+  const { timeout = 30000, interval = 100 } = options
+
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now()
+
+    const check = (): void => {
+      if (Date.now() - startTime > timeout) {
+        reject(new Error('Timeout waiting for condition'))
+        return
+      }
+
+      if (condition()) {
+        resolve()
+      } else {
+        setTimeout(check, interval)
+      }
+    }
+
+    check()
+  })
+}
+
+/**
+ * Wait for a specific node to exist in the project
+ */
+export function waitForNode(nodeId: string, timeoutMs = 10000): Promise<void> {
+  return waitFor(
+    () => {
+      const conf = window.app?.props?.observableImmutableConf?.lastImmutableConf
+      if (!conf) {
+        return false
+      }
+
+      const search = (node: { id: string; children?: unknown[] }): boolean => {
+        if (node.id === nodeId) {
+          return true
+        }
+        if (node.children) {
+          return (node.children as (typeof node)[]).some(search)
+        }
+        return false
+      }
+
+      return (conf.roots || []).some(search)
+    },
+    { timeout: timeoutMs },
+  )
+}
+
+/**
+ * Wait for the project configuration to change
+ * Useful after making updates to detect when they've been applied
+ */
+export function waitForConfigChange(timeoutMs = 5000): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      unsubscribe()
+      reject(new Error('Timeout waiting for config change'))
+    }, timeoutMs)
+
+    const unsubscribe = window.app.props.observableImmutableConf.subscribe(
+      () => {
+        clearTimeout(timeout)
+        unsubscribe()
+        resolve()
+      },
+    )
+  })
+}
+
+/**
+ * Check if the app is currently in read-only mode
+ */
+export function isReadOnly(): boolean {
+  return window.app?.isReadOnly?.() ?? false
+}
+
+/**
+ * Check if the app is ready for interaction
+ */
+export function isAppReady(): boolean {
+  return !!(
+    window.app?.props?.observableImmutableConf?.lastImmutableConf &&
+    window.app?.props?.fileMeta?.id
+  )
+}

package/skills/playwriter/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: playwriter
+description: Control the user own Chrome browser via Playwriter extension with Playwright code snippets in a stateful local js sandbox via playwriter cli. Use this over other Playwright MCPs to automate the browser — it connects to the user's existing Chrome instead of launching a new one. Use this for JS-heavy websites (Instagram, Twitter, cookie/login walls, lazy-loaded UIs) instead of webfetch/curl. Run `playwriter skill` command to read the complete up to date skill
+---
+
+## REQUIRED: Read Full Documentation First
+
+**Before using playwriter, you MUST run this command:**
+
+```bash
+playwriter skill
+```
+
+This outputs the complete documentation including:
+
+- Session management and timeout configuration
+- Selector strategies (and which ones to AVOID)
+- Rules to prevent timeouts and failures
+- Best practices for slow pages and SPAs
+- Context variables, utility functions, and more
+
+**Do NOT skip this step.** The quick examples below will fail without understanding timeouts, selector rules, and common pitfalls from the full docs.
+
+## Minimal Example (after reading full docs)
+
+```bash
+playwriter session new
+playwriter -s 1 -e "await page.goto('https://example.com')"
+```
+
+If `playwriter` is not found, use `npx playwriter@latest` or `bunx playwriter@latest`.