@fprad0/skill-master-mcp 0.0.12 → 1.0.0

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

@@ -1,148 +1,148 @@
-/**
- * createComponentWithVariants
- *
- * Creates a component set by generating all combinations of `variantAxes`,
- * building one Figma component per combination, then calling
- * `figma.combineAsVariants` to produce the component set. After combining,
- * the variants are repositioned into a grid so they don't all stack at (0, 0).
- *
- * @param {{
- *   name: string,
- *   variantAxes: Record<string, string[]>,
- *   baseProps: {
- *     width: number,
- *     height: number,
- *     fills?: Paint[],
- *     padding?: {top?: number, bottom?: number, left?: number, right?: number},
- *     radius?: number,
- *     layoutMode?: 'HORIZONTAL' | 'VERTICAL' | 'NONE',
- *     itemSpacing?: number
- *   },
- *   page: PageNode
- * }} config
- *   - `name`: Component set name (e.g. "Button").
- *   - `variantAxes`: Each key is a variant property name; each value is an array of
- *     allowed values. All combinations are generated (Cartesian product).
- *     Example: { Size: ['Small', 'Medium', 'Large'], Style: ['Primary', 'Ghost'] }
- *     produces 6 variants.
- *   - `baseProps`: Visual properties applied to every variant.
- *   - `page`: The PageNode to create components on (must be set as current page by caller).
- * @param {string} [runId] - Optional dsb_run_id to tag every node.
- * @returns {Promise<{
- *   componentSet: ComponentSetNode,
- *   variants: ComponentNode[]
- * }>}
- */
-async function createComponentWithVariants(config, runId) {
-  const { name, variantAxes, baseProps, page } = config
-
-  // Ensure we are on the correct page
-  await figma.setCurrentPageAsync(page)
-
-  // Compute Cartesian product of variant axes
-  const axisNames = Object.keys(variantAxes)
-  const axisValues = axisNames.map((k) => variantAxes[k])
-  const combinations = cartesianProduct(axisValues)
-
-  // Build one component per combination
-  const components = []
-  for (const combo of combinations) {
-    const comp = figma.createComponent()
-
-    // Name: "Property=Value, Property=Value, ..."
-    comp.name = axisNames.map((ax, i) => `${ax}=${combo[i]}`).join(', ')
-
-    // Base geometry
-    comp.resize(baseProps.width, baseProps.height)
-
-    // Fills
-    if (baseProps.fills !== undefined) {
-      comp.fills = baseProps.fills
-    } else {
-      comp.fills = [{ type: 'SOLID', color: { r: 0.9, g: 0.9, b: 0.9 } }]
-    }
-
-    // Corner radius
-    if (baseProps.radius !== undefined) {
-      comp.cornerRadius = baseProps.radius
-    }
-
-    // Auto-layout
-    if (baseProps.layoutMode && baseProps.layoutMode !== 'NONE') {
-      comp.layoutMode = baseProps.layoutMode
-      comp.primaryAxisAlignItems = 'CENTER'
-      comp.counterAxisAlignItems = 'CENTER'
-      if (baseProps.itemSpacing !== undefined) {
-        comp.itemSpacing = baseProps.itemSpacing
-      }
-    }
-
-    // Padding
-    if (baseProps.padding) {
-      comp.paddingTop = baseProps.padding.top ?? 0
-      comp.paddingBottom = baseProps.padding.bottom ?? 0
-      comp.paddingLeft = baseProps.padding.left ?? 0
-      comp.paddingRight = baseProps.padding.right ?? 0
-    }
-
-    // Plugin data
-    const variantKey = axisNames.map((ax, i) => `${ax}:${combo[i]}`).join('|')
-    comp.setPluginData('dsb_key', `component/${name}/${variantKey}`)
-    if (runId) {
-      comp.setPluginData('dsb_run_id', runId)
-    }
-
-    page.appendChild(comp)
-    components.push(comp)
-  }
-
-  // Combine into a component set
-  const componentSet = figma.combineAsVariants(components, page)
-  componentSet.name = name
-  componentSet.setPluginData('dsb_key', `componentSet/${name}`)
-  if (runId) {
-    componentSet.setPluginData('dsb_run_id', runId)
-  }
-
-  // Grid layout — variants stack at (0, 0) after combineAsVariants; reposition them.
-  const GRID_GAP = 16
-  const cols = Math.max(1, axisValues[axisValues.length - 1]?.length ?? 1)
-  const variantWidth = baseProps.width
-  const variantHeight = baseProps.height
-
-  componentSet.children.forEach((variant, idx) => {
-    const col = idx % cols
-    const row = Math.floor(idx / cols)
-    variant.x = col * (variantWidth + GRID_GAP)
-    variant.y = row * (variantHeight + GRID_GAP)
-  })
-
-  // Resize component set to wrap its children with padding
-  const totalCols = Math.min(cols, combinations.length)
-  const totalRows = Math.ceil(combinations.length / cols)
-  const PADDING = 40
-  componentSet.resize(
-    totalCols * variantWidth + (totalCols - 1) * GRID_GAP + PADDING * 2,
-    totalRows * variantHeight + (totalRows - 1) * GRID_GAP + PADDING * 2,
-  )
-
-  // Position component set at a safe canvas location
-  componentSet.x = 480
-  componentSet.y = 80
-
-  return { componentSet, variants: componentSet.children }
-}
-
-/**
- * Computes the Cartesian product of multiple arrays.
- * cartesianProduct([[A, B], [1, 2]]) → [[A,1], [A,2], [B,1], [B,2]]
- *
- * @param {Array<string[]>} arrays
- * @returns {string[][]}
- */
-function cartesianProduct(arrays) {
-  return arrays.reduce(
-    (acc, curr) => acc.flatMap((combo) => curr.map((val) => [...combo, val])),
-    [[]],
-  )
-}
+/**
+ * createComponentWithVariants
+ *
+ * Creates a component set by generating all combinations of `variantAxes`,
+ * building one Figma component per combination, then calling
+ * `figma.combineAsVariants` to produce the component set. After combining,
+ * the variants are repositioned into a grid so they don't all stack at (0, 0).
+ *
+ * @param {{
+ *   name: string,
+ *   variantAxes: Record<string, string[]>,
+ *   baseProps: {
+ *     width: number,
+ *     height: number,
+ *     fills?: Paint[],
+ *     padding?: {top?: number, bottom?: number, left?: number, right?: number},
+ *     radius?: number,
+ *     layoutMode?: 'HORIZONTAL' | 'VERTICAL' | 'NONE',
+ *     itemSpacing?: number
+ *   },
+ *   page: PageNode
+ * }} config
+ *   - `name`: Component set name (e.g. "Button").
+ *   - `variantAxes`: Each key is a variant property name; each value is an array of
+ *     allowed values. All combinations are generated (Cartesian product).
+ *     Example: { Size: ['Small', 'Medium', 'Large'], Style: ['Primary', 'Ghost'] }
+ *     produces 6 variants.
+ *   - `baseProps`: Visual properties applied to every variant.
+ *   - `page`: The PageNode to create components on (must be set as current page by caller).
+ * @param {string} [runId] - Optional dsb_run_id to tag every node.
+ * @returns {Promise<{
+ *   componentSet: ComponentSetNode,
+ *   variants: ComponentNode[]
+ * }>}
+ */
+async function createComponentWithVariants(config, runId) {
+  const { name, variantAxes, baseProps, page } = config
+
+  // Ensure we are on the correct page
+  await figma.setCurrentPageAsync(page)
+
+  // Compute Cartesian product of variant axes
+  const axisNames = Object.keys(variantAxes)
+  const axisValues = axisNames.map((k) => variantAxes[k])
+  const combinations = cartesianProduct(axisValues)
+
+  // Build one component per combination
+  const components = []
+  for (const combo of combinations) {
+    const comp = figma.createComponent()
+
+    // Name: "Property=Value, Property=Value, ..."
+    comp.name = axisNames.map((ax, i) => `${ax}=${combo[i]}`).join(', ')
+
+    // Base geometry
+    comp.resize(baseProps.width, baseProps.height)
+
+    // Fills
+    if (baseProps.fills !== undefined) {
+      comp.fills = baseProps.fills
+    } else {
+      comp.fills = [{ type: 'SOLID', color: { r: 0.9, g: 0.9, b: 0.9 } }]
+    }
+
+    // Corner radius
+    if (baseProps.radius !== undefined) {
+      comp.cornerRadius = baseProps.radius
+    }
+
+    // Auto-layout
+    if (baseProps.layoutMode && baseProps.layoutMode !== 'NONE') {
+      comp.layoutMode = baseProps.layoutMode
+      comp.primaryAxisAlignItems = 'CENTER'
+      comp.counterAxisAlignItems = 'CENTER'
+      if (baseProps.itemSpacing !== undefined) {
+        comp.itemSpacing = baseProps.itemSpacing
+      }
+    }
+
+    // Padding
+    if (baseProps.padding) {
+      comp.paddingTop = baseProps.padding.top ?? 0
+      comp.paddingBottom = baseProps.padding.bottom ?? 0
+      comp.paddingLeft = baseProps.padding.left ?? 0
+      comp.paddingRight = baseProps.padding.right ?? 0
+    }
+
+    // Plugin data
+    const variantKey = axisNames.map((ax, i) => `${ax}:${combo[i]}`).join('|')
+    comp.setPluginData('dsb_key', `component/${name}/${variantKey}`)
+    if (runId) {
+      comp.setPluginData('dsb_run_id', runId)
+    }
+
+    page.appendChild(comp)
+    components.push(comp)
+  }
+
+  // Combine into a component set
+  const componentSet = figma.combineAsVariants(components, page)
+  componentSet.name = name
+  componentSet.setPluginData('dsb_key', `componentSet/${name}`)
+  if (runId) {
+    componentSet.setPluginData('dsb_run_id', runId)
+  }
+
+  // Grid layout — variants stack at (0, 0) after combineAsVariants; reposition them.
+  const GRID_GAP = 16
+  const cols = Math.max(1, axisValues[axisValues.length - 1]?.length ?? 1)
+  const variantWidth = baseProps.width
+  const variantHeight = baseProps.height
+
+  componentSet.children.forEach((variant, idx) => {
+    const col = idx % cols
+    const row = Math.floor(idx / cols)
+    variant.x = col * (variantWidth + GRID_GAP)
+    variant.y = row * (variantHeight + GRID_GAP)
+  })
+
+  // Resize component set to wrap its children with padding
+  const totalCols = Math.min(cols, combinations.length)
+  const totalRows = Math.ceil(combinations.length / cols)
+  const PADDING = 40
+  componentSet.resize(
+    totalCols * variantWidth + (totalCols - 1) * GRID_GAP + PADDING * 2,
+    totalRows * variantHeight + (totalRows - 1) * GRID_GAP + PADDING * 2,
+  )
+
+  // Position component set at a safe canvas location
+  componentSet.x = 480
+  componentSet.y = 80
+
+  return { componentSet, variants: componentSet.children }
+}
+
+/**
+ * Computes the Cartesian product of multiple arrays.
+ * cartesianProduct([[A, B], [1, 2]]) → [[A,1], [A,2], [B,1], [B,2]]
+ *
+ * @param {Array<string[]>} arrays
+ * @returns {string[][]}
+ */
+function cartesianProduct(arrays) {
+  return arrays.reduce(
+    (acc, curr) => acc.flatMap((combo) => curr.map((val) => [...combo, val])),
+    [[]],
+  )
+}

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

@@ -1,139 +1,139 @@
-/**
- * createDocumentationPage
- *
- * Creates a new Figma page with a standardized documentation layout: a page
- * title, optional description, and an ordered list of sections each built by
- * a caller-supplied `contentFn`. The content function receives the section
- * frame and may append any nodes to it.
- *
- * This function is used for standalone documentation pages (e.g. a Foundations
- * page, a Getting Started page, or a component page with documentation).
- * It does not handle component sets — those live on separate pages created by
- * createComponentWithVariants.
- *
- * @param {string} pageName - The Figma page name (e.g. "Foundations", "Getting Started").
- * @param {{
- *   title: string,
- *   description?: string,
- *   sections: Array<{
- *     name: string,
- *     contentFn: (sectionFrame: FrameNode) => Promise<void>
- *   }>
- * }} config
- *   - `title`: Large heading displayed at the top of the page.
- *   - `description`: Optional subtitle displayed below the heading.
- *   - `sections`: Ordered list of sections. Each section gets its own frame
- *     with a heading and is passed to `contentFn` for population.
- * @param {string} [runId] - Optional dsb_run_id to tag every created node.
- * @returns {Promise<{
- *   page: PageNode,
- *   titleNode: TextNode,
- *   frameIds: string[]
- * }>}
- *   `frameIds` is an ordered list of IDs for the root frame and each section frame.
- */
-async function createDocumentationPage(pageName, config, runId) {
-  await figma.loadFontAsync({ family: 'Inter', style: 'Bold' })
-  await figma.loadFontAsync({ family: 'Inter', style: 'Regular' })
-  await figma.loadFontAsync({ family: 'Inter', style: 'Medium' })
-
-  // Create and activate the page
-  const page = figma.createPage()
-  page.name = pageName
-  await figma.setCurrentPageAsync(page)
-
-  if (runId) {
-    page.setPluginData('dsb_run_id', runId)
-    page.setPluginData('dsb_key', `page/${pageName}`)
-  }
-
-  const frameIds = []
-
-  // Root scroll container — 1440px wide, auto-height
-  const root = figma.createFrame()
-  root.name = pageName
-  root.layoutMode = 'VERTICAL'
-  root.primaryAxisAlignItems = 'MIN'
-  root.counterAxisAlignItems = 'MIN'
-  root.itemSpacing = 80
-  root.paddingTop = 80
-  root.paddingBottom = 120
-  root.paddingLeft = 80
-  root.paddingRight = 80
-  root.layoutSizingHorizontal = 'FIXED'
-  root.layoutSizingVertical = 'HUG'
-  root.resize(1440, 1)
-  root.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }]
-  root.x = 0
-  root.y = 0
-  page.appendChild(root)
-
-  if (runId) {
-    root.setPluginData('dsb_run_id', runId)
-    root.setPluginData('dsb_key', `frame/root/${pageName}`)
-  }
-
-  frameIds.push(root.id)
-
-  // Page header: title + optional description
-  const header = figma.createFrame()
-  header.name = 'Header'
-  header.layoutMode = 'VERTICAL'
-  header.itemSpacing = 12
-  header.layoutSizingHorizontal = 'FILL'
-  header.layoutSizingVertical = 'HUG'
-  header.fills = []
-  root.appendChild(header)
-
-  const titleNode = figma.createText()
-  titleNode.fontName = { family: 'Inter', style: 'Bold' }
-  titleNode.characters = config.title
-  titleNode.fontSize = 40
-  titleNode.fills = [{ type: 'SOLID', color: { r: 0.07, g: 0.07, b: 0.07 } }]
-  titleNode.layoutSizingHorizontal = 'FILL'
-  header.appendChild(titleNode)
-
-  if (config.description) {
-    const descNode = figma.createText()
-    descNode.fontName = { family: 'Inter', style: 'Regular' }
-    descNode.characters = config.description
-    descNode.fontSize = 16
-    descNode.lineHeight = { value: 24, unit: 'PIXELS' }
-    descNode.fills = [{ type: 'SOLID', color: { r: 0.4, g: 0.4, b: 0.4 } }]
-    descNode.layoutSizingHorizontal = 'FILL'
-    header.appendChild(descNode)
-  }
-
-  // Sections
-  for (const section of config.sections) {
-    const sectionFrame = figma.createFrame()
-    sectionFrame.name = `Section/${section.name}`
-    sectionFrame.layoutMode = 'VERTICAL'
-    sectionFrame.itemSpacing = 20
-    sectionFrame.layoutSizingHorizontal = 'FILL'
-    sectionFrame.layoutSizingVertical = 'HUG'
-    sectionFrame.fills = []
-    root.appendChild(sectionFrame)
-
-    if (runId) {
-      sectionFrame.setPluginData('dsb_run_id', runId)
-      sectionFrame.setPluginData('dsb_key', `frame/section/${pageName}/${section.name}`)
-    }
-
-    // Section heading
-    const sectionHeading = figma.createText()
-    sectionHeading.fontName = { family: 'Inter', style: 'Bold' }
-    sectionHeading.characters = section.name
-    sectionHeading.fontSize = 24
-    sectionHeading.fills = [{ type: 'SOLID', color: { r: 0.07, g: 0.07, b: 0.07 } }]
-    sectionHeading.layoutSizingHorizontal = 'FILL'
-    sectionFrame.appendChild(sectionHeading)
-
-    // Invoke the caller's content function to populate the section
-    await section.contentFn(sectionFrame)
-
-    frameIds.push(sectionFrame.id)
-  }
-
-  return { page, titleNode, frameIds }
-}
+/**
+ * createDocumentationPage
+ *
+ * Creates a new Figma page with a standardized documentation layout: a page
+ * title, optional description, and an ordered list of sections each built by
+ * a caller-supplied `contentFn`. The content function receives the section
+ * frame and may append any nodes to it.
+ *
+ * This function is used for standalone documentation pages (e.g. a Foundations
+ * page, a Getting Started page, or a component page with documentation).
+ * It does not handle component sets — those live on separate pages created by
+ * createComponentWithVariants.
+ *
+ * @param {string} pageName - The Figma page name (e.g. "Foundations", "Getting Started").
+ * @param {{
+ *   title: string,
+ *   description?: string,
+ *   sections: Array<{
+ *     name: string,
+ *     contentFn: (sectionFrame: FrameNode) => Promise<void>
+ *   }>
+ * }} config
+ *   - `title`: Large heading displayed at the top of the page.
+ *   - `description`: Optional subtitle displayed below the heading.
+ *   - `sections`: Ordered list of sections. Each section gets its own frame
+ *     with a heading and is passed to `contentFn` for population.
+ * @param {string} [runId] - Optional dsb_run_id to tag every created node.
+ * @returns {Promise<{
+ *   page: PageNode,
+ *   titleNode: TextNode,
+ *   frameIds: string[]
+ * }>}
+ *   `frameIds` is an ordered list of IDs for the root frame and each section frame.
+ */
+async function createDocumentationPage(pageName, config, runId) {
+  await figma.loadFontAsync({ family: 'Inter', style: 'Bold' })
+  await figma.loadFontAsync({ family: 'Inter', style: 'Regular' })
+  await figma.loadFontAsync({ family: 'Inter', style: 'Medium' })
+
+  // Create and activate the page
+  const page = figma.createPage()
+  page.name = pageName
+  await figma.setCurrentPageAsync(page)
+
+  if (runId) {
+    page.setPluginData('dsb_run_id', runId)
+    page.setPluginData('dsb_key', `page/${pageName}`)
+  }
+
+  const frameIds = []
+
+  // Root scroll container — 1440px wide, auto-height
+  const root = figma.createFrame()
+  root.name = pageName
+  root.layoutMode = 'VERTICAL'
+  root.primaryAxisAlignItems = 'MIN'
+  root.counterAxisAlignItems = 'MIN'
+  root.itemSpacing = 80
+  root.paddingTop = 80
+  root.paddingBottom = 120
+  root.paddingLeft = 80
+  root.paddingRight = 80
+  root.layoutSizingHorizontal = 'FIXED'
+  root.layoutSizingVertical = 'HUG'
+  root.resize(1440, 1)
+  root.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }]
+  root.x = 0
+  root.y = 0
+  page.appendChild(root)
+
+  if (runId) {
+    root.setPluginData('dsb_run_id', runId)
+    root.setPluginData('dsb_key', `frame/root/${pageName}`)
+  }
+
+  frameIds.push(root.id)
+
+  // Page header: title + optional description
+  const header = figma.createFrame()
+  header.name = 'Header'
+  header.layoutMode = 'VERTICAL'
+  header.itemSpacing = 12
+  header.layoutSizingHorizontal = 'FILL'
+  header.layoutSizingVertical = 'HUG'
+  header.fills = []
+  root.appendChild(header)
+
+  const titleNode = figma.createText()
+  titleNode.fontName = { family: 'Inter', style: 'Bold' }
+  titleNode.characters = config.title
+  titleNode.fontSize = 40
+  titleNode.fills = [{ type: 'SOLID', color: { r: 0.07, g: 0.07, b: 0.07 } }]
+  titleNode.layoutSizingHorizontal = 'FILL'
+  header.appendChild(titleNode)
+
+  if (config.description) {
+    const descNode = figma.createText()
+    descNode.fontName = { family: 'Inter', style: 'Regular' }
+    descNode.characters = config.description
+    descNode.fontSize = 16
+    descNode.lineHeight = { value: 24, unit: 'PIXELS' }
+    descNode.fills = [{ type: 'SOLID', color: { r: 0.4, g: 0.4, b: 0.4 } }]
+    descNode.layoutSizingHorizontal = 'FILL'
+    header.appendChild(descNode)
+  }
+
+  // Sections
+  for (const section of config.sections) {
+    const sectionFrame = figma.createFrame()
+    sectionFrame.name = `Section/${section.name}`
+    sectionFrame.layoutMode = 'VERTICAL'
+    sectionFrame.itemSpacing = 20
+    sectionFrame.layoutSizingHorizontal = 'FILL'
+    sectionFrame.layoutSizingVertical = 'HUG'
+    sectionFrame.fills = []
+    root.appendChild(sectionFrame)
+
+    if (runId) {
+      sectionFrame.setPluginData('dsb_run_id', runId)
+      sectionFrame.setPluginData('dsb_key', `frame/section/${pageName}/${section.name}`)
+    }
+
+    // Section heading
+    const sectionHeading = figma.createText()
+    sectionHeading.fontName = { family: 'Inter', style: 'Bold' }
+    sectionHeading.characters = section.name
+    sectionHeading.fontSize = 24
+    sectionHeading.fills = [{ type: 'SOLID', color: { r: 0.07, g: 0.07, b: 0.07 } }]
+    sectionHeading.layoutSizingHorizontal = 'FILL'
+    sectionFrame.appendChild(sectionHeading)
+
+    // Invoke the caller's content function to populate the section
+    await section.contentFn(sectionFrame)
+
+    frameIds.push(sectionFrame.id)
+  }
+
+  return { page, titleNode, frameIds }
+}