devendra-skill-package 1.0.2

package/.github/skills/figma-ui-mapper/references/script-usage.md

@@ -0,0 +1,46 @@
+# Script Usage
+
+## Primary Entrypoint
+Run:
+node ./scripts/generate-page-through-figma.js
+
+## Legacy Entrypoint (Backward Compatibility)
+Run:
+node ./scripts/generate-react-page-through-figma.js
+
+## Modes
+- Interactive mode: no URL flags provided.
+- Non-interactive mode: provide URL flags and all required paths.
+- Dry run mode: add --dryRun to preview without writing files.
+
+## Supported Inputs
+- --figmaUrl <url>
+- --pageName <PascalCase>
+- --pages <json-array>
+- --linksFile <path>
+
+## Required Paths (non-interactive)
+- --pagePath
+- --componentPath
+- --assetPath (optional, defaults to src/assets)
+- --reusableComponentsPath
+
+## Project Selection
+- --projectPath <path> selects target project in monorepos.
+- If omitted and multiple projects are detected, interactive prompt is shown.
+- Use --nonInteractive with --projectPath in CI.
+
+## Safety and Validation Flags
+- --nonInteractive
+- --dryRun
+- --allowOutsideProject (disabled by default)
+- --help
+
+## Outputs
+Script writes scaffold outputs under target project:
+- .figma-ui-mapper/reports/generation-report.md
+- .figma-ui-mapper/reports/<PageName>-component-map.md
+- .figma-ui-mapper/artifacts/figma-generated-pages.json
+
+## Rule
+Run script scaffolding before MCP-backed implementation, then execute workflow gates in references/workflow.md.

package/.github/skills/figma-ui-mapper/references/svelte.md

@@ -0,0 +1,18 @@
+# svelte Reference
+
+Load this file only when detected framework is svelte.
+
+## Adapter Responsibilities
+- component generation
+- styling approach
+- asset handling
+- navigation
+- responsive layout
+- accessibility checks
+- reusable component detection
+- folder conventions
+- naming conventions
+- testing conventions
+
+## Validation
+All workflow validation gates remain mandatory.

package/.github/skills/figma-ui-mapper/references/vue.md

@@ -0,0 +1,18 @@
+# vue Reference
+
+Load this file only when detected framework is vue.
+
+## Adapter Responsibilities
+- component generation
+- styling approach
+- asset handling
+- navigation
+- responsive layout
+- accessibility checks
+- reusable component detection
+- folder conventions
+- naming conventions
+- testing conventions
+
+## Validation
+All workflow validation gates remain mandatory.

package/.github/skills/figma-ui-mapper/references/workflow.md

@@ -0,0 +1,74 @@
+# Workflow
+
+This workflow is mandatory for every generation run.
+
+## 0. Pre-Run Detection Gates
+1. Detect target project root (single app or monorepo workspace app).
+2. Detect framework from repository signals.
+3. Validate matching adapter and platform reference exist.
+4. Load only one active framework rule file and one platform reference file.
+
+## 1. Script-First Scaffold
+1. Run scripts/generate-page-through-figma.js.
+2. Validate and resolve Figma URLs, file keys, node IDs, and page names.
+3. Create page, component, asset, report, and artifact scaffold paths.
+4. Generate page/style/token placeholder files for active adapter.
+
+## 2. MCP Tool Availability Check (Blocking)
+1. Confirm metadata, variable definitions, screenshot, and design-context MCP tools.
+2. Confirm Figma data extraction and image download MCP tools.
+3. If MCP requirements are not available, halt and report.
+
+## 3. Component-First Analysis (Blocking)
+1. Read Figma metadata and write component map file.
+2. Extract design tokens before implementation.
+3. Capture Figma reference screenshot.
+4. Generate reusable components in planned order.
+5. Update component map status per component.
+
+## 4. Node Inventory and Coverage Plan (Blocking)
+1. Build full node inventory from Figma response.
+2. Mark hidden, clipped, asset, and component-instance nodes.
+3. Build coverage map with one render plan row per non-skipped node.
+4. Verify coverage-map row count equals non-skipped inventory node count.
+
+## 5. Implementation
+1. Generate framework-native page/component files from active adapter.
+2. Apply token values for color, typography, spacing, radii, shadows, and opacity.
+3. Resolve assets from local path first, then download from Figma when missing.
+4. Reuse existing components only when visual and behavioral similarity is sufficient.
+
+## 6. Validation Gates (Blocking)
+### 6.1 Element-Level Validation
+Confirm hierarchy, spacing, typography, color, dimensions, and component mapping.
+
+### 6.2 Accessibility Validation
+Run framework-specific accessibility checks from active platform reference and framework rules.
+
+### 6.3 Responsive and Zoom Validation
+Validate desktop/tablet/mobile layouts, zoom behavior, and text scaling behavior.
+
+### 6.4 Screenshot Comparison Loop
+1. Capture generated UI screenshot.
+2. Compare against Figma reference screenshot.
+3. Log mismatch details and apply fixes.
+4. Repeat until all checks pass or hard-stop threshold is reached.
+
+### 6.5 Final QA Checklist
+Run final blocking QA checklist before output delivery.
+
+## 7. Reporting and Artifacts
+1. Render generation-report-template.md with run metadata and validation results.
+2. Persist component map report, generation report, and artifact JSON.
+3. Include framework detection reason, adapter used, generated/reused components, and warnings/errors.
+
+## 8. Failure Recovery
+Handle and report:
+- MCP unavailability
+- invalid Figma URL or node
+- permission failure
+- network/download failures
+- partial generation with resumable state
+
+## 9. Backward Compatibility Rule
+When framework is React, keep legacy script invocation support and preserve established output shape and file naming conventions.