@fprad0/skill-master-mcp 0.0.11 → 1.0.0

package/docs/skill-candidates/v0.0.10/figma-generate-library/scripts/createSemanticTokens.js

@@ -1,108 +1,108 @@
-/**
- * createSemanticTokens
- *
- * Creates a batch of Figma variables in the given collection, one per entry in
- * `tokenMap`. Supports raw values, variable alias references, code syntax, and
- * scopes. Returns a map of token name → Variable for use in subsequent steps.
- *
- * @param {VariableCollection} collection - The target variable collection.
- * @param {Record<string, string>} modeIds - Map of {modeName: modeId} from createVariableCollection.
- * @param {Array<{
- *   name: string,
- *   type: 'COLOR' | 'FLOAT' | 'STRING' | 'BOOLEAN',
- *   values: Record<string, string | number | boolean | {type: 'VARIABLE_ALIAS', id: string}>,
- *   scopes?: VariableScope[],
- *   codeSyntax?: {WEB?: string, ANDROID?: string, iOS?: string}
- * }>} tokenMap - Ordered list of token definitions.
- *   - `name`: Variable name using slash hierarchy (e.g. "color/bg/primary").
- *   - `type`: Figma variable type.
- *   - `values`: Map of {modeName: value}. Values can be raw (hex string for COLOR,
- *     number for FLOAT) or alias objects {type: 'VARIABLE_ALIAS', id: variableId}.
- *     For COLOR, raw values are accepted as hex strings ("#rrggbb" or "#rrggbbaa")
- *     and converted to {r, g, b, a} automatically.
- *   - `scopes`: Array of VariableScope strings. Omit to use [] (hidden/primitive).
- *   - `codeSyntax`: Platform code syntax strings. Omit to skip.
- * @param {string} [runId] - Optional dsb_run_id to tag every variable.
- * @returns {Promise<{variables: Record<string, Variable>}>}
- *   `variables` maps each token name to its created Variable object.
- */
-async function createSemanticTokens(collection, modeIds, tokenMap, runId) {
-  const variables = {}
-
-  for (const token of tokenMap) {
-    // Create the variable
-    const variable = figma.variables.createVariable(token.name, collection, token.type)
-
-    // Tag for cleanup
-    variable.setPluginData('dsb_key', `variable/${token.name}`)
-    if (runId) {
-      variable.setPluginData('dsb_run_id', runId)
-    }
-
-    // Set values for each mode
-    for (const [modeName, rawValue] of Object.entries(token.values)) {
-      const modeId = modeIds[modeName]
-      if (!modeId) {
-        throw new Error(
-          `createSemanticTokens: mode "${modeName}" not found in modeIds for token "${token.name}". ` +
-            `Available modes: ${Object.keys(modeIds).join(', ')}`,
-        )
-      }
-
-      let value = rawValue
-
-      // Convert hex strings to Figma RGBA for COLOR type
-      if (token.type === 'COLOR' && typeof rawValue === 'string' && rawValue.startsWith('#')) {
-        value = hexToFigmaColor(rawValue)
-      }
-
-      variable.setValueForMode(modeId, value)
-    }
-
-    // Set scopes (default: empty array = hidden from property pickers / primitives)
-    variable.scopes = token.scopes || []
-
-    // Set code syntax per platform
-    if (token.codeSyntax) {
-      if (token.codeSyntax.WEB) {
-        variable.setVariableCodeSyntax('WEB', token.codeSyntax.WEB)
-      }
-      if (token.codeSyntax.ANDROID) {
-        variable.setVariableCodeSyntax('ANDROID', token.codeSyntax.ANDROID)
-      }
-      if (token.codeSyntax.iOS) {
-        variable.setVariableCodeSyntax('iOS', token.codeSyntax.iOS)
-      }
-    }
-
-    variables[token.name] = variable
-  }
-
-  return { variables }
-}
-
-/**
- * Converts a hex color string to a Figma RGBA object.
- * Supports "#rgb", "#rrggbb", and "#rrggbbaa".
- *
- * @param {string} hex
- * @returns {{ r: number, g: number, b: number, a: number }}
- */
-function hexToFigmaColor(hex) {
-  let h = hex.replace('#', '')
-
-  // Expand shorthand #rgb → #rrggbb
-  if (h.length === 3) {
-    h = h
-      .split('')
-      .map((c) => c + c)
-      .join('')
-  }
-
-  const r = parseInt(h.substring(0, 2), 16) / 255
-  const g = parseInt(h.substring(2, 4), 16) / 255
-  const b = parseInt(h.substring(4, 6), 16) / 255
-  const a = h.length === 8 ? parseInt(h.substring(6, 8), 16) / 255 : 1
-
-  return { r, g, b, a }
-}
+/**
+ * createSemanticTokens
+ *
+ * Creates a batch of Figma variables in the given collection, one per entry in
+ * `tokenMap`. Supports raw values, variable alias references, code syntax, and
+ * scopes. Returns a map of token name → Variable for use in subsequent steps.
+ *
+ * @param {VariableCollection} collection - The target variable collection.
+ * @param {Record<string, string>} modeIds - Map of {modeName: modeId} from createVariableCollection.
+ * @param {Array<{
+ *   name: string,
+ *   type: 'COLOR' | 'FLOAT' | 'STRING' | 'BOOLEAN',
+ *   values: Record<string, string | number | boolean | {type: 'VARIABLE_ALIAS', id: string}>,
+ *   scopes?: VariableScope[],
+ *   codeSyntax?: {WEB?: string, ANDROID?: string, iOS?: string}
+ * }>} tokenMap - Ordered list of token definitions.
+ *   - `name`: Variable name using slash hierarchy (e.g. "color/bg/primary").
+ *   - `type`: Figma variable type.
+ *   - `values`: Map of {modeName: value}. Values can be raw (hex string for COLOR,
+ *     number for FLOAT) or alias objects {type: 'VARIABLE_ALIAS', id: variableId}.
+ *     For COLOR, raw values are accepted as hex strings ("#rrggbb" or "#rrggbbaa")
+ *     and converted to {r, g, b, a} automatically.
+ *   - `scopes`: Array of VariableScope strings. Omit to use [] (hidden/primitive).
+ *   - `codeSyntax`: Platform code syntax strings. Omit to skip.
+ * @param {string} [runId] - Optional dsb_run_id to tag every variable.
+ * @returns {Promise<{variables: Record<string, Variable>}>}
+ *   `variables` maps each token name to its created Variable object.
+ */
+async function createSemanticTokens(collection, modeIds, tokenMap, runId) {
+  const variables = {}
+
+  for (const token of tokenMap) {
+    // Create the variable
+    const variable = figma.variables.createVariable(token.name, collection, token.type)
+
+    // Tag for cleanup
+    variable.setPluginData('dsb_key', `variable/${token.name}`)
+    if (runId) {
+      variable.setPluginData('dsb_run_id', runId)
+    }
+
+    // Set values for each mode
+    for (const [modeName, rawValue] of Object.entries(token.values)) {
+      const modeId = modeIds[modeName]
+      if (!modeId) {
+        throw new Error(
+          `createSemanticTokens: mode "${modeName}" not found in modeIds for token "${token.name}". ` +
+            `Available modes: ${Object.keys(modeIds).join(', ')}`,
+        )
+      }
+
+      let value = rawValue
+
+      // Convert hex strings to Figma RGBA for COLOR type
+      if (token.type === 'COLOR' && typeof rawValue === 'string' && rawValue.startsWith('#')) {
+        value = hexToFigmaColor(rawValue)
+      }
+
+      variable.setValueForMode(modeId, value)
+    }
+
+    // Set scopes (default: empty array = hidden from property pickers / primitives)
+    variable.scopes = token.scopes || []
+
+    // Set code syntax per platform
+    if (token.codeSyntax) {
+      if (token.codeSyntax.WEB) {
+        variable.setVariableCodeSyntax('WEB', token.codeSyntax.WEB)
+      }
+      if (token.codeSyntax.ANDROID) {
+        variable.setVariableCodeSyntax('ANDROID', token.codeSyntax.ANDROID)
+      }
+      if (token.codeSyntax.iOS) {
+        variable.setVariableCodeSyntax('iOS', token.codeSyntax.iOS)
+      }
+    }
+
+    variables[token.name] = variable
+  }
+
+  return { variables }
+}
+
+/**
+ * Converts a hex color string to a Figma RGBA object.
+ * Supports "#rgb", "#rrggbb", and "#rrggbbaa".
+ *
+ * @param {string} hex
+ * @returns {{ r: number, g: number, b: number, a: number }}
+ */
+function hexToFigmaColor(hex) {
+  let h = hex.replace('#', '')
+
+  // Expand shorthand #rgb → #rrggbb
+  if (h.length === 3) {
+    h = h
+      .split('')
+      .map((c) => c + c)
+      .join('')
+  }
+
+  const r = parseInt(h.substring(0, 2), 16) / 255
+  const g = parseInt(h.substring(2, 4), 16) / 255
+  const b = parseInt(h.substring(4, 6), 16) / 255
+  const a = h.length === 8 ? parseInt(h.substring(6, 8), 16) / 255 : 1
+
+  return { r, g, b, a }
+}

package/docs/skill-candidates/v0.0.10/figma-generate-library/scripts/createVariableCollection.js

@@ -1,49 +1,49 @@
-/**
- * createVariableCollection
- *
- * Creates a new Figma variable collection with the specified name and modes.
- * If `modeNames` has more than one entry, the first mode is renamed from
- * Figma's default "Mode 1" to the first name, and additional modes are added.
- *
- * Every created collection is tagged with `dsb_key` plugin data so it can be
- * found and cleaned up idempotently by `cleanupOrphans`.
- *
- * @param {string} name - The display name of the collection (e.g. "Color", "Spacing").
- * @param {string[]} modeNames - Ordered list of mode names (e.g. ["Light", "Dark"] or ["Value"]).
- * @param {string} [runId] - Optional dsb_run_id to tag for cleanup.
- * @returns {Promise<{
- *   collection: VariableCollection,
- *   modeIds: Record<string, string>
- * }>}
- *   `modeIds` maps each mode name to its modeId string.
- */
-async function createVariableCollection(name, modeNames, runId) {
-  if (!modeNames || modeNames.length === 0) {
-    throw new Error('createVariableCollection: modeNames must have at least one entry.')
-  }
-
-  // Create the collection — Figma always creates it with one mode named "Mode 1".
-  const collection = figma.variables.createVariableCollection(name)
-
-  // Tag for idempotent cleanup
-  collection.setPluginData('dsb_key', `collection/${name}`)
-  if (runId) {
-    collection.setPluginData('dsb_run_id', runId)
-  }
-
-  // modeIds accumulator
-  const modeIds = {}
-
-  // Rename the default first mode
-  const defaultMode = collection.modes[0]
-  collection.renameMode(defaultMode.modeId, modeNames[0])
-  modeIds[modeNames[0]] = defaultMode.modeId
-
-  // Add additional modes
-  for (let i = 1; i < modeNames.length; i++) {
-    const newModeId = collection.addMode(modeNames[i])
-    modeIds[modeNames[i]] = newModeId
-  }
-
-  return { collection, modeIds }
-}
+/**
+ * createVariableCollection
+ *
+ * Creates a new Figma variable collection with the specified name and modes.
+ * If `modeNames` has more than one entry, the first mode is renamed from
+ * Figma's default "Mode 1" to the first name, and additional modes are added.
+ *
+ * Every created collection is tagged with `dsb_key` plugin data so it can be
+ * found and cleaned up idempotently by `cleanupOrphans`.
+ *
+ * @param {string} name - The display name of the collection (e.g. "Color", "Spacing").
+ * @param {string[]} modeNames - Ordered list of mode names (e.g. ["Light", "Dark"] or ["Value"]).
+ * @param {string} [runId] - Optional dsb_run_id to tag for cleanup.
+ * @returns {Promise<{
+ *   collection: VariableCollection,
+ *   modeIds: Record<string, string>
+ * }>}
+ *   `modeIds` maps each mode name to its modeId string.
+ */
+async function createVariableCollection(name, modeNames, runId) {
+  if (!modeNames || modeNames.length === 0) {
+    throw new Error('createVariableCollection: modeNames must have at least one entry.')
+  }
+
+  // Create the collection — Figma always creates it with one mode named "Mode 1".
+  const collection = figma.variables.createVariableCollection(name)
+
+  // Tag for idempotent cleanup
+  collection.setPluginData('dsb_key', `collection/${name}`)
+  if (runId) {
+    collection.setPluginData('dsb_run_id', runId)
+  }
+
+  // modeIds accumulator
+  const modeIds = {}
+
+  // Rename the default first mode
+  const defaultMode = collection.modes[0]
+  collection.renameMode(defaultMode.modeId, modeNames[0])
+  modeIds[modeNames[0]] = defaultMode.modeId
+
+  // Add additional modes
+  for (let i = 1; i < modeNames.length; i++) {
+    const newModeId = collection.addMode(modeNames[i])
+    modeIds[modeNames[i]] = newModeId
+  }
+
+  return { collection, modeIds }
+}

package/docs/skill-candidates/v0.0.10/figma-generate-library/scripts/inspectFileStructure.js

@@ -1,121 +1,121 @@
-/**
- * inspectFileStructure
- *
- * Reads the current Figma file and returns a structural inventory:
- * all pages (with child counts), all local variable collections (with mode
- * names and variable counts), all component sets, all local text styles,
- * and all local effect styles.
- *
- * This is a read-only discovery function — it never creates or mutates nodes.
- * Run it at the start of Phase 0 to understand what already exists before
- * planning any creation work.
- *
- * @returns {Promise<{
- *   pages: Array<{id: string, name: string, childCount: number}>,
- *   variableCollections: Array<{
- *     id: string,
- *     name: string,
- *     modes: Array<{modeId: string, name: string}>,
- *     variableCount: number,
- *     variableNames: string[]
- *   }>,
- *   componentSets: Array<{id: string, name: string, variantCount: number, pageId: string, pageName: string}>,
- *   textStyles: Array<{id: string, name: string, fontFamily: string, fontStyle: string, fontSize: number}>,
- *   effectStyles: Array<{id: string, name: string, effectCount: number}>
- * }>}
- */
-async function inspectFileStructure() {
-  const result = {
-    pages: [],
-    variableCollections: [],
-    componentSets: [],
-    textStyles: [],
-    effectStyles: [],
-  }
-
-  // --- Pages ---
-  for (const page of figma.root.children) {
-    result.pages.push({
-      id: page.id,
-      name: page.name,
-      childCount: page.children.length,
-    })
-  }
-
-  // --- Variable collections ---
-  const collections = figma.variables.getLocalVariableCollections()
-  for (const coll of collections) {
-    const variableNames = coll.variableIds
-      .map((id) => figma.variables.getVariableById(id))
-      .filter(Boolean)
-      .map((v) => v.name)
-
-    result.variableCollections.push({
-      id: coll.id,
-      name: coll.name,
-      modes: coll.modes.map((m) => ({ modeId: m.modeId, name: m.name })),
-      variableCount: coll.variableIds.length,
-      variableNames,
-    })
-  }
-
-  // --- Component sets (and standalone components) ---
-  // We need to load all pages to inspect components across the whole file.
-  const originalPage = figma.currentPage
-
-  for (const page of figma.root.children) {
-    await figma.setCurrentPageAsync(page)
-
-    const componentSetsOnPage = page.findAllWithCriteria({ types: ['COMPONENT_SET'] })
-    for (const cs of componentSetsOnPage) {
-      result.componentSets.push({
-        id: cs.id,
-        name: cs.name,
-        variantCount: cs.children.length,
-        pageId: page.id,
-        pageName: page.name,
-      })
-    }
-
-    // Also capture standalone components (not inside a component set)
-    const standaloneComponents = page
-      .findAllWithCriteria({ types: ['COMPONENT'] })
-      .filter((c) => c.parent && c.parent.type !== 'COMPONENT_SET')
-    for (const comp of standaloneComponents) {
-      result.componentSets.push({
-        id: comp.id,
-        name: comp.name,
-        variantCount: 1,
-        pageId: page.id,
-        pageName: page.name,
-      })
-    }
-  }
-
-  // Restore original page
-  await figma.setCurrentPageAsync(originalPage)
-
-  // --- Text styles ---
-  const textStyles = figma.getLocalTextStyles()
-  for (const ts of textStyles) {
-    result.textStyles.push({
-      id: ts.id,
-      name: ts.name,
-      fontFamily: ts.fontName.family,
-      fontStyle: ts.fontName.style,
-      fontSize: ts.fontSize,
-    })
-  }
-
-  // --- Effect styles ---
-  const effectStyles = figma.getLocalEffectStyles()
-  for (const es of effectStyles) {
-    result.effectStyles.push({
-      id: es.id,
-      name: es.name,
-      effectCount: es.effects.length,
-    })
-  }
-
-  return result
-}
+/**
+ * inspectFileStructure
+ *
+ * Reads the current Figma file and returns a structural inventory:
+ * all pages (with child counts), all local variable collections (with mode
+ * names and variable counts), all component sets, all local text styles,
+ * and all local effect styles.
+ *
+ * This is a read-only discovery function — it never creates or mutates nodes.
+ * Run it at the start of Phase 0 to understand what already exists before
+ * planning any creation work.
+ *
+ * @returns {Promise<{
+ *   pages: Array<{id: string, name: string, childCount: number}>,
+ *   variableCollections: Array<{
+ *     id: string,
+ *     name: string,
+ *     modes: Array<{modeId: string, name: string}>,
+ *     variableCount: number,
+ *     variableNames: string[]
+ *   }>,
+ *   componentSets: Array<{id: string, name: string, variantCount: number, pageId: string, pageName: string}>,
+ *   textStyles: Array<{id: string, name: string, fontFamily: string, fontStyle: string, fontSize: number}>,
+ *   effectStyles: Array<{id: string, name: string, effectCount: number}>
+ * }>}
+ */
+async function inspectFileStructure() {
+  const result = {
+    pages: [],
+    variableCollections: [],
+    componentSets: [],
+    textStyles: [],
+    effectStyles: [],
+  }
+
+  // --- Pages ---
+  for (const page of figma.root.children) {
+    result.pages.push({
+      id: page.id,
+      name: page.name,
+      childCount: page.children.length,
+    })
+  }
+
+  // --- Variable collections ---
+  const collections = figma.variables.getLocalVariableCollections()
+  for (const coll of collections) {
+    const variableNames = coll.variableIds
+      .map((id) => figma.variables.getVariableById(id))
+      .filter(Boolean)
+      .map((v) => v.name)
+
+    result.variableCollections.push({
+      id: coll.id,
+      name: coll.name,
+      modes: coll.modes.map((m) => ({ modeId: m.modeId, name: m.name })),
+      variableCount: coll.variableIds.length,
+      variableNames,
+    })
+  }
+
+  // --- Component sets (and standalone components) ---
+  // We need to load all pages to inspect components across the whole file.
+  const originalPage = figma.currentPage
+
+  for (const page of figma.root.children) {
+    await figma.setCurrentPageAsync(page)
+
+    const componentSetsOnPage = page.findAllWithCriteria({ types: ['COMPONENT_SET'] })
+    for (const cs of componentSetsOnPage) {
+      result.componentSets.push({
+        id: cs.id,
+        name: cs.name,
+        variantCount: cs.children.length,
+        pageId: page.id,
+        pageName: page.name,
+      })
+    }
+
+    // Also capture standalone components (not inside a component set)
+    const standaloneComponents = page
+      .findAllWithCriteria({ types: ['COMPONENT'] })
+      .filter((c) => c.parent && c.parent.type !== 'COMPONENT_SET')
+    for (const comp of standaloneComponents) {
+      result.componentSets.push({
+        id: comp.id,
+        name: comp.name,
+        variantCount: 1,
+        pageId: page.id,
+        pageName: page.name,
+      })
+    }
+  }
+
+  // Restore original page
+  await figma.setCurrentPageAsync(originalPage)
+
+  // --- Text styles ---
+  const textStyles = figma.getLocalTextStyles()
+  for (const ts of textStyles) {
+    result.textStyles.push({
+      id: ts.id,
+      name: ts.name,
+      fontFamily: ts.fontName.family,
+      fontStyle: ts.fontName.style,
+      fontSize: ts.fontSize,
+    })
+  }
+
+  // --- Effect styles ---
+  const effectStyles = figma.getLocalEffectStyles()
+  for (const es of effectStyles) {
+    result.effectStyles.push({
+      id: es.id,
+      name: es.name,
+      effectCount: es.effects.length,
+    })
+  }
+
+  return result
+}