System instructions

Add the "System instructions" animated icon (id: system-instructions) from Generative Icons by LottieFiles to this project.

1. Look at the project first: framework, package manager, and where static assets are served. In a monorepo, target the app that needs the icon.
2. Install the runtime: `npm install @lottiefiles/generative-icons-runtime`. For React or Next.js, also install `@lottiefiles/generative-icons-react`. Use the project's package manager.
3. Run `npx generative-icons init`, then `npx generative-icons add system-instructions`. Follow the agent skill that init writes to `.agents/skills/generative-icons/` (and `.claude/skills/generative-icons/`). Commit `generative-icons.json`, the copied files and `.generative-icons/lock.json`.
4. Render the icon with these settings: color #ffffff, style outline, weight 2, motion light, theme dark. In React, use `<AnimatedIcon icon={icon} src={src} size={24} color="#ffffff" variant="outline" weight={2} motion="light" theme="dark" />` inside a `'use client'` component. Otherwise use `createIcon(canvas, { icon, src, ... })` from `@lottiefiles/generative-icons-runtime` and call `destroy()` when the element is removed.
5. Play it on the interaction it belongs to (the state change). The icon is decorative, so the parent control needs an accessible label. Reduced motion is handled by the runtime.
6. This is a two-state icon (prepared → result). Keep it in sync with app state through the React `state` prop or `handle.setState()`, and use `play('reverse')` to go back.
7. If this is a native iOS or Android app instead, download https://generativeicons.com/assets/system-instructions.lottie and play it with the dotLottie player for that platform.

Guide: https://generativeicons.com/docs-md/using-packages.md
Library overview for agents: https://generativeicons.com/llms.txt

npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add system-instructions

import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/system-instructions.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();

// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/system-instructions.mjs';

export function SystemInstructionsIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}

// Swift Package: github.com/LottieFiles/dotlottie-ios
// Add system-instructions.lottie (Download .lottie) to your app target.
import SwiftUI
import DotLottie

struct SystemInstructionsIcon: View {
  @State private var icon = makeIcon("system-instructions", animation: "system-instructions")
  @State private var on = false

  var body: some View {
    icon.view()
      .frame(width: 32, height: 32)
      .onTapGesture {
        on.toggle()
        try? icon.loadAnimationById(on ? "system-instructions" : "system-instructions-reset")
        icon.play()
      }
  }
}

func makeIcon(_ file: String, animation: String) -> DotLottieAnimation {
  var config = AnimationConfig()
  config.animationId = animation
  let icon = DotLottieAnimation(fileName: file, config: config)
  icon.subscribe(observer: IconPaint(icon))
  return icon
}

// Applies color and style once per load (loading an animation resets slots).
// Set slots here rather than through a theme, and create a new icon to change
// them later: the current core can crash when a set slot is changed again.
final class IconPaint: Observer {
  weak var icon: DotLottieAnimation?
  init(_ icon: DotLottieAnimation) { self.icon = icon }

  func onLoad() {
    icon?.setColorSlot(slotId: "color.primary", r: 1, g: 1, b: 1)
  }
  func onLoadError() {}
  func onPlay() {}
  func onPause() {}
  func onStop() {}
  func onFrame(frameNo: Float) {}
  func onRender(frameNo: Float) {}
  func onLoop(loopCount: UInt32) {}
  func onComplete() {}
}

// build.gradle.kts: implementation("com.lottiefiles:dotlottie-android:0.16.0")
// Put system-instructions.lottie (Download .lottie) in src/main/assets/.
import android.graphics.Color
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.lottiefiles.dotlottie.core.compose.runtime.DotLottieController
import com.lottiefiles.dotlottie.core.compose.ui.DotLottieAnimation
import com.lottiefiles.dotlottie.core.util.DotLottieEventListener
import com.lottiefiles.dotlottie.core.util.DotLottieSource

@Composable
fun SystemInstructionsIcon() {
  val controller = remember { DotLottieController() }
  var on by remember { mutableStateOf(false) }
  DotLottieAnimation(
    modifier = Modifier.size(32.dp).clickable {
      on = !on
      controller.loadAnimation(if (on) "system-instructions" else "system-instructions-reset")
      controller.play()
    },
    source = DotLottieSource.Asset("system-instructions.lottie"),
    controller = controller,
    // Color and style are set once per load, not through a theme: the current
    // core can crash when a slot that is already set is changed again.
    eventListeners = listOf(object : DotLottieEventListener {
      override fun onLoad() {
        // The file opens on Strong; loading Light fires onLoad again.
        if (controller.activeAnimationId == "system-instructions-strong") {
          controller.loadAnimation("system-instructions")
          return
        }
        controller.setColorSlot("color.primary", Color.parseColor("#ffffff"))
      }
    })
  )
}