@scaleflex/asset-picker 0.1.0 → 0.2.1

package/.claude/settings.local.json

@@ -0,0 +1,49 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(ls:*)",
+      "Bash(grep:*)",
+      "Bash(npm install:*)",
+      "Bash(npx tsc:*)",
+      "Bash(npx vite:*)",
+      "WebFetch(domain:localhost)",
+      "Bash(curl:*)",
+      "Bash(node:*)",
+      "WebSearch",
+      "Bash(npm run:*)",
+      "Bash(wc:*)",
+      "WebFetch(domain:unpkg.com)",
+      "Bash(git:*)",
+      "Bash(find /Users/dmitrystremous/scaleflex -maxdepth 3 -type d -name \"*admin*\" 2>/dev/null | grep -i filerobot)",
+      "Bash(gh run:*)",
+      "Bash(gh workflow:*)",
+      "Bash(find:*)",
+      "Bash(npx playwright:*)",
+      "Bash(npm ls:*)",
+      "Read(//Users/dmitrystremous/**)",
+      "Bash(npx:*)",
+      "Bash(rm:*)",
+      "Bash(tail:*)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "Bash(gh api:*)",
+      "WebFetch(domain:www.scaleflex.com)",
+      "WebFetch(domain:scaleflex.github.io)",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:portals.scaleflex.com)",
+      "Bash(for f:*)",
+      "Bash(do echo:*)",
+      "Read(//Users/dmitrystremous/scaleflex/asset-picker/**)",
+      "Bash(done)",
+      "Bash(cd:*)",
+      "Bash(chmod:*)",
+      "Bash(./scripts/publish-github.sh \"v0.1.0 — initial release\" 2>&1)",
+      "Bash(npm whoami:*)",
+      "Bash(npm publish:*)",
+      "Bash(gh repo:*)",
+      "Bash(./scripts/publish-github.sh \"Update README with demo and docs links\" 2>&1)",
+      "Bash(lsof:*)",
+      "Bash(kill:*)",
+      "Bash(npm view:*)"
+    ]
+  }
+}

package/.claude/skills/integrate-asset-picker/SKILL.md

@@ -0,0 +1,391 @@
+---
+name: integrate-asset-picker
+description: Integrate @scaleflex/asset-picker into any project — install, configure auth,
+  wire events, theme, and add filters. Works with vanilla JS, React, Vue, Angular, Svelte.
+user_invocable: true
+metadata:
+  category: integration
+  tags:
+  - scaleflex
+  - dam
+  - asset-picker
+  - web-component
+  status: ready
+  version: 1
+---
+
+# Scaleflex Asset Picker Integration Skill
+
+## When to Use
+
+- User says "add asset picker", "integrate asset picker", "DAM picker", "file picker from Scaleflex"
+- User wants to let users browse/select assets from Scaleflex VXP DAM
+- User asks how to use `@scaleflex/asset-picker` in their project
+
+## Step 1 — Detect the Target Framework
+
+Read the project's `package.json` to determine:
+- **React** (18+): use the React wrapper (`@scaleflex/asset-picker/react`)
+- **Vue / Angular / Svelte / vanilla JS**: use the Web Component (`@scaleflex/asset-picker/define`)
+
+## Step 2 — Install
+
+```bash
+npm install @scaleflex/asset-picker
+```
+
+`lit` is bundled — no extra peer deps for vanilla JS / Vue / Angular / Svelte.
+For React, `react` and `react-dom` (v18+) must already be installed (they're optional peer deps).
+
+### Optional: Uploader integration
+
+If the user wants upload functionality inside the picker:
+
+```bash
+npm install @scaleflex/uploader
+```
+
+## Step 3 — Add the Picker
+
+### Vanilla JS / Web Component
+
+```js
+import '@scaleflex/asset-picker/define';
+
+const picker = document.querySelector('sfx-asset-picker')
+  || document.createElement('sfx-asset-picker');
+document.body.appendChild(picker);
+
+picker.config = {
+  auth: {
+    mode: 'securityTemplate',
+    securityTemplateKey: 'YOUR_SECURITY_TEMPLATE_KEY',
+    projectToken: 'YOUR_PROJECT_TOKEN',
+  },
+};
+
+picker.addEventListener('ap-select', (e) => {
+  const assets = e.detail.assets;
+  console.log('Selected:', assets);
+});
+
+picker.addEventListener('ap-cancel', () => {
+  console.log('Cancelled');
+});
+
+picker.open();
+```
+
+### React
+
+```tsx
+import { useRef, useState } from 'react';
+import { AssetPicker, type AssetPickerRef } from '@scaleflex/asset-picker/react';
+import type { Asset } from '@scaleflex/asset-picker';
+
+function MyComponent() {
+  const pickerRef = useRef<AssetPickerRef>(null);
+
+  const config = {
+    auth: {
+      mode: 'securityTemplate' as const,
+      securityTemplateKey: 'YOUR_SECURITY_TEMPLATE_KEY',
+      projectToken: 'YOUR_PROJECT_TOKEN',
+    },
+  };
+
+  const handleSelect = (assets: Asset[]) => {
+    console.log('Selected:', assets);
+  };
+
+  return (
+    <>
+      <button onClick={() => pickerRef.current?.open()}>Pick assets</button>
+      <AssetPicker
+        ref={pickerRef}
+        config={config}
+        onSelect={handleSelect}
+        onCancel={() => console.log('Cancelled')}
+      />
+    </>
+  );
+}
+```
+
+**React controlled mode** (open state managed by parent):
+
+```tsx
+const [isOpen, setIsOpen] = useState(false);
+
+<AssetPicker
+  config={config}
+  open={isOpen}
+  onSelect={(assets) => { handleSelect(assets); setIsOpen(false); }}
+  onCancel={() => setIsOpen(false)}
+/>
+```
+
+### Vue
+
+```vue
+<template>
+  <sfx-asset-picker ref="picker"></sfx-asset-picker>
+  <button @click="openPicker">Pick assets</button>
+</template>
+
+<script setup>
+import '@scaleflex/asset-picker/define';
+import { ref, onMounted } from 'vue';
+
+const picker = ref(null);
+
+onMounted(() => {
+  const el = picker.value;
+  el.config = {
+    auth: {
+      mode: 'securityTemplate',
+      securityTemplateKey: 'YOUR_SECURITY_TEMPLATE_KEY',
+      projectToken: 'YOUR_PROJECT_TOKEN',
+    },
+  };
+
+  el.addEventListener('ap-select', (e) => {
+    console.log('Selected:', e.detail.assets);
+  });
+});
+
+function openPicker() {
+  picker.value?.open();
+}
+</script>
+```
+
+## Step 4 — Authentication
+
+Ask the user which auth mode they need:
+
+### Security template (external / public apps)
+
+The picker auto-exchanges the key for a SASS key on init. Safer for client-side code.
+
+```ts
+auth: {
+  mode: 'securityTemplate',
+  securityTemplateKey: string,  // From Scaleflex dashboard
+  projectToken: string,
+}
+```
+
+### SASS key (internal / Scaleflex apps)
+
+Use when the application already has a SASS key — e.g. inside the Scaleflex Hub where the host app manages SASS key generation and renewal.
+
+```ts
+auth: {
+  mode: 'sassKey',
+  sassKey: string,         // X-Filerobot-Key
+  projectToken: string,
+}
+```
+
+## Step 5 — Configure (Optional)
+
+All options beyond `auth` are optional. Add only what the user needs:
+
+```ts
+picker.config = {
+  auth: { /* ... */ },
+
+  // Display
+  displayMode: 'modal',              // 'modal' (default) or 'inline'
+  defaultViewMode: 'grid',           // 'grid' (default) or 'list'
+  brandColor: '#6366f1',             // Hex color for accent theme
+
+  // Selection
+  multiSelect: true,                 // default: true
+  maxSelections: 5,                  // limit selections
+
+  // Navigation
+  rootFolderPath: '/marketing/',     // start in a specific folder
+  tabs: ['assets', 'folders'],       // default: both. Use ['assets'] to hide folders tab
+  rememberLastFolder: true,          // persist last folder in localStorage
+  rememberLastView: true,            // persist grid/list preference
+
+  // Sorting
+  defaultSortBy: 'created_at',      // 'name' | 'created_at' | 'modified_at' | 'size' | 'type' | etc.
+  defaultSortDirection: 'desc',     // 'asc' | 'desc'
+
+  // Filters
+  enabledFilters: ['type', 'tags', 'date'],  // restrict visible filters
+  defaultFilters: {                           // pre-applied, user can remove
+    type: { type: 'string', values: ['image'] },
+  },
+  forcedFilters: {                            // locked, user cannot remove
+    tags: { type: 'string', values: ['approved'] },
+  },
+
+  // Metadata
+  showMetadata: true,                // show metadata in preview panel
+
+  // Uploader (requires @scaleflex/uploader installed)
+  uploader: {
+    autoProceed: false,
+    restrictions: {
+      maxFileSize: 10_000_000,       // 10 MB
+      allowedFileTypes: ['image/*', 'video/*'],
+    },
+  },
+};
+```
+
+## Events Reference
+
+All events bubble and cross Shadow DOM (`composed: true`):
+
+| Event | Detail | When |
+|---|---|---|
+| `ap-select` | `{ assets: Asset[] }` | User confirms selection |
+| `ap-cancel` | `{ reason: 'backdrop' \| 'escape' \| 'button' \| 'close-button' }` | Picker closed without selecting |
+| `ap-open` | `{ timestamp: number }` | Picker opened successfully |
+| `ap-error` | `{ error: Error, context: string }` | Initialization or runtime error |
+
+## Public Methods
+
+| Method | Returns | Description |
+|---|---|---|
+| `open()` | `Promise<void>` | Open the picker, init API if needed |
+| `close()` | `void` | Close and clear selection |
+
+## Asset Object Shape
+
+The `Asset` returned in `ap-select`:
+
+```ts
+interface Asset {
+  uuid: string;
+  name: string;
+  extension: string;
+  type: string;              // 'image', 'video', 'audio', 'document', ...
+  mime?: string;
+  size: { bytes: number; pretty: string };
+  url?: {
+    public: string;          // Public URL
+    cdn: string;             // CDN-optimised URL
+    path: string;            // Relative path
+    permalink?: string;
+  };
+  created_at: string;
+  modified_at: string;
+  tags: Record<string, any>;
+  labels: string[];
+  meta: { title?: string; description?: string; alt?: string; [key: string]: unknown };
+  info: {
+    img_w?: number; img_h?: number;
+    duration?: number;
+    video_w?: number; video_h?: number;
+    thumbnail?: string;
+    main_colors_hex?: string[];
+    dominant_color_hex?: string;
+    [key: string]: unknown;
+  };
+  folder?: { uuid: string; name: string };
+  owner?: { uuid: string; name: string; email: string };
+}
+```
+
+## Theming
+
+### Quick: brandColor config
+
+```ts
+picker.config = { auth: { /* ... */ }, brandColor: '#6366f1' };
+```
+
+### Advanced: CSS custom properties
+
+Override on the element or any ancestor. All use `--ap-` prefix:
+
+```css
+sfx-asset-picker {
+  --ap-primary: #6366f1;
+  --ap-primary-foreground: #fff;
+  --ap-background: #ffffff;
+  --ap-foreground: #09090b;
+  --ap-border: #e4e4e7;
+  --ap-muted: #f4f4f5;
+  --ap-muted-foreground: #71717a;
+  --ap-radius: 8px;
+  --ap-font-family: 'Inter', system-ui, sans-serif;
+  --ap-modal-max-width: 1400px;
+  --ap-modal-max-height: 90vh;
+}
+```
+
+## Filter Data Structures
+
+For `defaultFilters` and `forcedFilters`:
+
+```ts
+// String filter (type, mimetype, tags, labels, size, etc.)
+{ type: 'string', values: ['image'], operator?: ':', logic?: 'OR' }
+
+// Date filter
+{
+  type: 'date',
+  field: 'created' | 'updated',
+  kind: 'preset' | 'after' | 'before' | 'between' | 'specific' | null,
+  preset: 'today' | 'last_week' | 'last_month' | 'last_year' | null,
+  from: string | null,  // ISO date
+  to: string | null,    // ISO date
+}
+```
+
+**Filter keys:** `type`, `mimetype`, `date`, `size`, `tags`, `labels`, `color`, `image`, `approval`, `metadata`, `product_ref`, `asset_expiration`, `folders`, `resolution`, `orientation`, `faces`, `products`
+
+## Common Patterns
+
+### Single image picker
+
+```ts
+config = {
+  auth: { /* ... */ },
+  multiSelect: false,
+  forcedFilters: { type: { type: 'string', values: ['image'] } },
+  tabs: ['assets'],
+};
+```
+
+### Inline mode (embedded in page, not modal)
+
+```ts
+config = {
+  auth: { /* ... */ },
+  displayMode: 'inline',
+};
+```
+
+Style the container height:
+```css
+sfx-asset-picker { --ap-inline-height: 500px; }
+```
+
+### With uploader drop zone
+
+```ts
+config = {
+  auth: { /* ... */ },
+  uploader: {
+    autoProceed: true,
+    restrictions: { maxFileSize: 50_000_000 },
+  },
+};
+```
+
+Requires `@scaleflex/uploader` installed as peer dependency.
+
+## Troubleshooting
+
+- **"customElements is not defined"** — SSR environment. The React wrapper handles this automatically. For vanilla JS, guard the import: `if (typeof customElements !== 'undefined') import('@scaleflex/asset-picker/define');`
+- **Styles not showing** — The component uses Shadow DOM; external CSS won't penetrate. Use `--ap-*` CSS custom properties for theming.
+- **Auth errors** — Check that the security template key or SASS key is valid and the project token matches.
+- **`open()` does nothing** — `config` must be set before calling `open()`. Ensure `auth` is provided.

package/CHANGELOG.md

@@ -7,24 +7,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0] - 2026-03-22
+
 ### Added
 
+- `@scaleflex/uploader` integration with drop zone and upload panel
+- Uploader uses built-in header with back button; close (X) button in modal mode
 - Select-all functionality for asset selection
 - Stats endpoint integration
 - Tags filter with suggested and other tags from API
-- GitHub Pages demo
+- Resolution info on asset cards
+- Custom theming example
+- GitHub Pages demo with centered layout and auth UX
 
 ### Changed
 
+- Adopted Scaleflex design system with oklch color tokens across all components
+- Polished header: search sizing, close button, box-shadow replaced with border-bottom
+- Styled filter system: rounded pinned chips, accent backgrounds, icon colors, Clear filters button
+- Styled selection bar: primary background, outline Confirm button
+- Styled dropdowns: metadata field selector, regional settings, filter options
+- Styled list view: checkbox borders, header labels, type column color
+- Increased asset checkbox size to 22x22px in grid and list views
+- Used Lucide icons for checkboxes, calendar, grid view, and select button
 - Improved filter UX: temporary chips, search focus, "Clear all" placement, and outside click handling
-- Improved sort system
-- Filter validation and debounced filter application
-- SVG preview rendering
+- Improved sort system, filter validation, and debounced filter application
+- SVG preview rendering improvements
 
 ### Fixed
 
 - Filter popover overflowing right edge of widget
 - Filter popover not closing on filters-bar empty area click
+- Size filter inputs overlapping
+- List view checkboxes rendering at exact 22x22px with border-box sizing
+- Metadata field selector dropdown being clipped at the top
 - Approval filter and filter constants
 - Date presets and serialization
 - Filter component UX issues
@@ -35,7 +51,7 @@ Initial release.
 
 ### Added
 
-- `<asset-picker>` web component built with Lit 3 and Shadow DOM
+- `<sfx-asset-picker>` web component built with Lit 3 and Shadow DOM
 - Reactive store-based state management with `StoreController`
 - Asset browsing with grid and list view modes
 - Folder navigation with breadcrumb trail

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://www.scaleflex.com">
-    <img src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/logo_scaleflex_on_white_bg.jpg?vh=91b12d&w=700" alt="Scaleflex" width="350">
+    <img src="https://scaleflex.cloudimg.io/v7/plugins/scaleflex/logo.png?vh=b0a502&radius=25&w=700" alt="Scaleflex" width="350">
   </a>
 </p>
 
@@ -14,9 +14,18 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@scaleflex/asset-picker"><img src="https://img.shields.io/npm/v/@scaleflex/asset-picker.svg?style=flat-square" alt="npm version"></a>
   <a href="https://www.npmjs.com/package/@scaleflex/asset-picker"><img src="https://img.shields.io/npm/dm/@scaleflex/asset-picker.svg?style=flat-square" alt="npm downloads"></a>
+  <a href="https://bundlephobia.com/package/@scaleflex/asset-picker"><img src="https://img.shields.io/bundlephobia/minzip/@scaleflex/asset-picker?style=flat-square" alt="bundle size"></a>
   <img src="https://img.shields.io/badge/license-proprietary-red?style=flat-square" alt="license">
 </p>
 
+<p align="center">
+  <a href="https://scaleflex.github.io/asset-picker/">Live Demo</a> |
+  <a href="https://scaleflex.github.io/asset-picker/#/docs/getting-started">Documentation</a> |
+  <a href="https://scaleflex.github.io/asset-picker/#/examples/basic">Examples</a> |
+  <a href="https://www.npmjs.com/package/@scaleflex/asset-picker">npm</a> |
+  <a href="https://www.scaleflex.com/page/digital-asset-management">Scaleflex DAM</a>
+</p>
+
 ---
 
 ## Table of Contents
@@ -45,6 +54,7 @@
   - [Asset](#asset)
   - [Folder](#folder)
 - [Browser Support](#browser-support)
+- [Claude Code Integration](#claude-code-integration)
 - [License](#license)
 
 ---
@@ -57,9 +67,9 @@ The npm package contains **only pre-built, minified production files** (`dist/`)
 
 ## Features
 
-- **Framework-agnostic** — standard `<asset-picker>` custom element, works in any stack
+- **Framework-agnostic** — standard `<sfx-asset-picker>` custom element, works in any stack
 - **First-class React wrapper** — `forwardRef` component with controlled `open` prop and imperative ref
-- **Two auth modes** — session tokens or security templates
+- **Two auth modes** — security templates or direct SASS key
 - **Grid & list views** — switchable with persistent user preference
 - **Full-text search** — real-time search across your DAM
 - **14+ filter types** — type, date, size, tags, labels, color, approval status, metadata, and more
@@ -79,7 +89,7 @@ The npm package contains **only pre-built, minified production files** (`dist/`)
 ## Requirements
 
 - A [Scaleflex](https://www.scaleflex.com) VXP DAM account with a project token
-- Either **session credentials** or a **security template key** for authentication
+- Either a **security template key** or a **SASS key** for authentication
 - Modern browser with Custom Elements v1 support (see [Browser Support](#browser-support))
 
 ## Installation
@@ -104,7 +114,7 @@ pnpm add @scaleflex/asset-picker
 |---|---|
 | `@scaleflex/asset-picker` | `AssetPicker` class + all TypeScript types |
 | `@scaleflex/asset-picker/react` | React wrapper component |
-| `@scaleflex/asset-picker/define` | Side-effect import — registers `<asset-picker>` custom element |
+| `@scaleflex/asset-picker/define` | Side-effect import — registers `<sfx-asset-picker>` custom element |
 
 Both ESM (`import`) and CJS (`require`) builds are provided.
 
@@ -115,14 +125,14 @@ Both ESM (`import`) and CJS (`require`) builds are provided.
 ### Vanilla JS / Web Component
 
 ```html
-<asset-picker></asset-picker>
+<sfx-asset-picker></sfx-asset-picker>
 
 <script type="module">
   // 1. Register the custom element (once)
   import '@scaleflex/asset-picker/define';
 
   // 2. Grab the element
-  const picker = document.querySelector('asset-picker');
+  const picker = document.querySelector('sfx-asset-picker');
 
   // 3. Configure
   picker.config = {
@@ -189,7 +199,7 @@ The picker supports two authentication modes:
 
 #### Security template (external / public apps)
 
-Use for client-side integrations where you don't want to expose session tokens. The picker automatically exchanges the key for a SASS key on init.
+Use for client-side integrations. The picker automatically exchanges the security template key for a SASS key on init.
 
 ```ts
 {
@@ -201,17 +211,16 @@ Use for client-side integrations where you don't want to expose session tokens.
 }
 ```
 
-#### Session (internal / Scaleflex apps)
+#### SASS key (internal / Scaleflex apps)
 
-Use when your backend already manages Scaleflex sessions.
+Use when your application already has a SASS key — e.g. inside the Scaleflex Hub where the host app manages SASS key generation and renewal.
 
 ```ts
 {
   auth: {
-    mode: 'session',
-    sessionToken: string,   // X-Session-Token
-    companyToken: string,    // X-Company-Token
-    projectToken: string,    // X-Project-Token
+    mode: 'sassKey',
+    sassKey: string,         // X-Filerobot-Key
+    projectToken: string,
   }
 }
 ```
@@ -228,14 +237,15 @@ Use when your backend already manages Scaleflex sessions.
 | `defaultViewMode` | `'grid' \| 'list'` | `'grid'` | Initial view mode |
 | `defaultSortBy` | `SortBy` | `'created_at'` | Initial sort field (see table below) |
 | `defaultSortDirection` | `'asc' \| 'desc'` | `'desc'` | Initial sort direction |
-| `hiddenTabs` | `TabKey[]` | `[]` | Tabs to hide: `'assets'`, `'folders'` |
+| `tabs` | `TabKey[]` | `['assets', 'folders']` | Tabs to show. If only one, the dropdown is hidden |
 | `enabledFilters` | `FilterKey[]` | all | Restrict which filters appear in the toolbar |
-| `allowedFileTypes` | `string[]` | `undefined` | Restrict selectable file types (e.g. `['image', 'video']`) |
-| `rootFolderUuid` | `string` | `undefined` | Start browsing from a specific folder UUID |
+| `rootFolderPath` | `string` | `'/'` | Start browsing from a specific folder path (e.g. `'/marketing/banners/'`) |
 | `showMetadata` | `boolean` | `true` | Show metadata sections in the preview panel |
 | `brandColor` | `string` | from API | Brand accent colour as hex (e.g. `'#3b82f6'`). Overrides the API-fetched value |
-| `defaultFilters` | `Filters` | `undefined` | Filters pre-applied on open. User can modify/remove |
-| `forcedFilters` | `Filters` | `undefined` | Filters always active. Shown as locked chips the user cannot remove |
+| `rememberLastFolder` | `boolean` | `false` | Persist the last browsed folder and restore on next open |
+| `rememberLastView` | `boolean` | `false` | Persist the last used view mode (grid/list) and restore on next open |
+| `defaultFilters` | `FiltersInput` | `undefined` | Filters pre-applied on open. User can modify/remove |
+| `forcedFilters` | `FiltersInput` | `undefined` | Filters always active. Shown as locked chips the user cannot remove |
 | `onSelect` | `(assets: Asset[]) => void` | `undefined` | Callback when assets are selected |
 | `onCancel` | `() => void` | `undefined` | Callback when the picker is cancelled |
 
@@ -399,7 +409,7 @@ If not set, the picker uses the brand colour configured in your Scaleflex projec
 
 ### CSS Custom Properties
 
-For fine-grained control, override these CSS custom properties on the `<asset-picker>` element or any ancestor. All variables use the `--ap-` prefix.
+For fine-grained control, override these CSS custom properties on the `<sfx-asset-picker>` element or any ancestor. All variables use the `--ap-` prefix.
 
 #### Colours
 
@@ -573,8 +583,8 @@ All types are exported from the main entry point:
 import type {
   AssetPickerConfig,
   AuthConfig,
-  SessionAuth,
   SecurityTemplateAuth,
+  SassKeyAuth,
   Asset,
   Folder,
   FilterKey,
@@ -681,6 +691,38 @@ Requires native support for Custom Elements v1, Shadow DOM, and ES2020+. Interne
 
 ---
 
+## Claude Code Integration
+
+If you use [Claude Code](https://docs.anthropic.com/en/docs/claude-code), this package ships with a ready-made skill that helps Claude add the asset picker to your project — detecting your framework, wiring auth, events, theming, and filters automatically.
+
+### Option 1: Project-level (recommended)
+
+Copy the skill into your project so every team member who uses Claude Code gets it:
+
+```bash
+mkdir -p .claude/skills/integrate-asset-picker
+cp node_modules/@scaleflex/asset-picker/.claude/skills/integrate-asset-picker/SKILL.md \
+   .claude/skills/integrate-asset-picker/SKILL.md
+```
+
+Commit the `.claude/skills/` directory to version control. The skill is now available to everyone on the team.
+
+### Option 2: Global (personal)
+
+Install it once for all your projects:
+
+```bash
+mkdir -p ~/.claude/skills/integrate-asset-picker
+cp node_modules/@scaleflex/asset-picker/.claude/skills/integrate-asset-picker/SKILL.md \
+   ~/.claude/skills/integrate-asset-picker/SKILL.md
+```
+
+### Usage
+
+Type `/integrate-asset-picker` in Claude Code and it will walk you through the full integration — install, config, events, and theming — tailored to your stack (React, Vue, vanilla JS, etc.).
+
+---
+
 ## License
 
 **PROPRIETARY** &mdash; All Rights Reserved.