mobile-ai-agents 1.0.37 → 1.0.39

package/AGENTS.md

@@ -105,6 +105,10 @@ Use the agent at agents/android/code-reviewer/agent.md to review this file:
 
 ---
 
+## Website API to Mobile Parity
+
+Use `skills/cross-platform/web-network-to-mobile.md` when a deployed website is the reference for mobile API integration. Trace requests and responses per interaction, implement using the existing mobile stack (including Android, iOS, Flutter, React Native, and KMP), and verify actual mobile network and UI behavior. Browser observations alone do not prove mobile parity. This requires suitable browser capture and mobile verification tools; the skill does not bundle them.
+
 ## Mobile MCP QA
 
 Use `skills/cross-platform/mobile-mcp-qa.md` and `workflows/mobile-mcp-qa.md` when a user wants device, emulator, or simulator QA through Mobile MCP. This belongs after implementation, during APPFORGE UI match review, full QA, launch readiness, or screenshot validation.
@@ -230,3 +234,9 @@ Short version:
 ## Questions / Discussion
 
 Open a GitHub Discussion or Issue. PRs are always welcome.
+
+## Figma Design Handoff
+
+Use `skills/cross-platform/figma-mcp-setup.md` for connection setup, `skills/cross-platform/figma-spec-harvest.md` for source-traced specs, and `skills/cross-platform/figma-to-implementation.md` for native integration. Follow `workflows/figma-to-code.md` for the full pipeline. Setup examples are in `docs/figma-mcp.md`. Preserve the existing platform and never claim live design fidelity without captured evidence.
+
+Portable Figma helpers: `npx mobile-ai-agents figma tools init`. Read `tools/figma-spec/README.md`, run fresh crosschecks and strict source validation, then verify native implementation evidence separately.

package/CLAUDE.md

@@ -234,3 +234,7 @@ See `CONTRIBUTING.md` for the full guide.
 ## Release Process
 
 For npm releases, follow `docs/release-process.md`. Do not run `npm publish` manually. Update `package.json`, commit, create a local `vX.Y.Z` tag, push `main`, then push the tag so GitHub Actions publishes npm.
+
+## Figma specs and implementation
+
+Use `/figma-mcp-setup` to connect official Figma MCP, `/figma-spec-harvest` to extract source-traced specs, and `/figma-to-implementation` to build in the existing native platform. FIGMA handles both specs and implementation modes; `/figma-to-code` is the complete workflow. Install portable helpers with `npx mobile-ai-agents figma tools init`, then follow `tools/figma-spec/README.md`. Run fresh crosschecks and strict source validation; verify native builds, behavior and runtime screenshots separately. See `docs/figma-mcp.md`.

package/README.md

@@ -2,7 +2,7 @@
 
 **The complete AI dev team for mobile engineers.**
 
-19 personality-driven agents · 53 composable skills · 16 end-to-end workflows
+19 personality-driven agents · 57 composable skills · 17 end-to-end workflows
 Android · iOS · Flutter · React Native · Kotlin Multiplatform · Unity · Unreal
 
 [![npm](https://img.shields.io/npm/v/mobile-ai-agents?color=CB3837&label=npm)](https://www.npmjs.com/package/mobile-ai-agents)
@@ -100,6 +100,43 @@ For focused work, use a specialist directly:
 
 ---
 
+## Website API Discovery → Mobile Integration
+
+**The website works. Which API calls does your mobile app need?**
+
+Capture HTTP requests and response shapes for each website interaction: load a list, open a detail, validate a form, submit test data. Get a touchpoint report for your Android, iOS, Flutter, React Native or Kotlin Multiplatform coding agent.
+
+```text
+Website flow → browser network capture → observed API shapes → mobile integration handoff
+```
+
+Try the runnable demo from a checkout with optional Playwright browser tooling:
+
+```bash
+# Install browser tooling in your project first; see the guide below.
+node cli/fixtures/network-demo.js /tmp/mobile-api-flow.json
+
+# In another terminal: this writes only to the owned local test server.
+node cli/index.js network capture \
+  --url http://127.0.0.1:4173 \
+  --flow /tmp/mobile-api-flow.json \
+  --out /tmp/mobile-api-demo \
+  --allow-writes
+```
+
+- Correlates zero, one or multiple requests with each interaction window.
+- Records request/response schemas, status codes, failures and redirect links.
+- Omits body values and redacts query/header values in exported JSON and Markdown.
+- Blocks unlisted origins and write methods by default; keeps partial evidence when checks fail.
+
+This delivers browser API evidence. Mobile code generation and verified app/API parity require the [web-network-to-mobile skill](skills/cross-platform/web-network-to-mobile.md), your target app and device/network tooling. It does not prove a native app works from a website capture alone.
+
+[Website API discovery guide: setup, demo, privacy and mobile handoff](docs/website-api-discovery.md) · [Implementation issue #69](https://github.com/salmanashraf/mobile-ai-agents/issues/69)
+
+Available in `mobile-ai-agents@1.0.39` and newer. Use `npx mobile-ai-agents@latest network capture --url URL --out NEW_DIRECTORY` for your own authorized site, with optional Playwright installed. Use a new output directory for every run.
+
+---
+
 ## Who It Helps
 
 | Role | How Mobile AI Agents Helps |
@@ -217,11 +254,11 @@ Not sure where to begin? Pick your situation:
 |---|---|---|
 | Platform knowledge | Generic | Android · iOS · Flutter · React Native · Unity · Unreal |
 | Agent personalities | None | 19 named specialists with opinions |
-| Real workflows | No | 16 end-to-end processes |
+| Real workflows | No | 17 end-to-end processes |
 | Real examples | Toy pseudocode | Production code input/output pairs |
 | Installable | Copy-paste | `npx mobile-ai-agents install` |
 | Severity levels | None | CRITICAL · WARNING · INFO |
-| Slash commands | No | 53 composable skills |
+| Slash commands | No | 57 composable skills |
 
 ---
 
@@ -260,7 +297,7 @@ Not sure where to begin? Pick your situation:
 
 ## Skills Library
 
-36 focused prompt modules — use inline or compose with agents.
+57 focused prompt modules — use inline or compose with agents.
 
 ### Android
 | Skill | What It Does |
@@ -308,6 +345,10 @@ Not sure where to begin? Pick your situation:
 ### Cross-Platform
 | Skill | What It Does |
 |---|---|
+| `/web-network-to-mobile` | Website API touchpoints → observed contracts, mobile integration handoff and parity checks |
+| `/figma-mcp-setup` | Connect official Figma MCP and verify frame access |
+| `/figma-spec-harvest` | Figma → traceable requirements, tokens, component specs and references |
+| `/figma-to-implementation` | Design contract → integrated UI in your existing platform |
 | `/grill-mobile` | 20 questions before any mobile code is written |
 | `/mobile-app-design` | Lovable/Stitch-style mobile UI generation, redesigns, and full app reskins |
 | `/crash-triage` | Paste stacktrace → root cause → fix |
@@ -330,13 +371,14 @@ Not sure where to begin? Pick your situation:
 
 ## Workflows
 
-16 end-to-end processes that chain agents and skills together.
+17 end-to-end processes that chain agents and skills together.
 
 | Workflow | What It Covers |
 |---|---|
 | `feature-ship` | Ticket → /grill-mobile → /feature-slice → implement → review → test → PR |
 | `crash-to-fix` | Crash alert → CRASHER → fix → regression test → deploy |
 | `app-launch` | Release build → SENTINEL → PERF → LAUNCHPAD → SCRIBE → /release-prep → store |
+| `figma-to-code` | Figma MCP setup → spec harvest → native implementation → visual and behavior verification |
 | `new-screen` | Figma spec → FIGMA → implement → review → performance check |
 | `ci-setup` | PIPELINE → generate config → secrets → test → document |
 | `release-cycle` | Feature freeze → CRASHER → SENTINEL → SCRIBE → /release-prep → staged rollout |
@@ -703,3 +745,7 @@ If Mobile AI Agents saved you time, a star helps others find it.
 ---
 
 *Built for mobile engineers who ship real apps.*
+
+## Figma MCP: from design to implementation
+
+Start with the [Figma setup and usage guide](docs/figma-mcp.md). Install the toolkit, connect your assistant to Figma, then use `/figma-spec-harvest` for specs or `/figma-to-code` for the complete workflow. Works with Android, iOS, Flutter, React Native, KMP, Unity, Unreal, and other explicitly selected repository stacks. Build and screenshot verification require the corresponding local tools. Install portable harvest/crosscheck/image helpers in your project with `npx mobile-ai-agents figma tools init`; existing files are preserved.

package/agents/cross-platform/appforge/agent.md

@@ -90,6 +90,8 @@ Create `PRD.md` with product overview, target audience, personas, core features,
 
 Create a low-cost design plan using Pencil Project, Figma free plan, Penpot, Excalidraw, Canva free, or hand-drawn wireframes.
 
+When Figma is supplied, use `/figma-spec-harvest` before design planning. Carry source node IDs, AC IDs, open questions, token/component gaps and reference screenshots into DESIGN.md. Connect MCP with `/figma-mcp-setup` if needed; record disconnected reads as unverified. Preserve existing stage approval rules.
+
 Output includes screen list, wireframe descriptions, design system, colors, typography, component list, states, and screenshot plan.
 
 Before creating the design plan, confirm or infer the design direction:
@@ -114,7 +116,7 @@ Create:
 - `DEPENDENCIES.md`
 - `ROADMAP.md`
 
-Each task includes title, goal, dependencies, likely files, acceptance criteria, QA checklist, complexity, and implementation notes.
+Each task includes title, goal, dependencies, likely files, acceptance criteria, QA checklist, complexity, and implementation notes. For harvested Figma scope, include component spec paths, node/AC IDs and verification methods. Do not treat proposed criteria as approved or lose unresolved questions during task breakdown.
 
 ### Stage 5 — Implementation Loop
 
@@ -138,7 +140,7 @@ For every subtask:
 
 After each feature implementation, compare UI against design for layout, spacing, typography, colors, components, responsiveness, empty states, loading states, error states, and accessibility.
 
-Output match percentage, differences, fixes, and priority list.
+Output differences, fixes, priority and captured evidence. If reporting a numerical match, include method, threshold/tolerance and matched viewport/state/theme; an unmeasured percentage remains unverified.
 
 ### Stage 7 — Full QA
 

package/agents/cross-platform/figma/agent.md

@@ -1,23 +1,27 @@
 # FIGMA — Design-to-Code Translator
 
-**Platform:** Cross-Platform (Compose / SwiftUI / Flutter / React Native)
-**Personality:** Pixel-perfect or it didn't happen. Every 1dp matters.
+**Platform:** Cross-Platform (Android / iOS / Flutter / React Native / KMP / Unity / Unreal / other selected stacks)
+**Personality:** Precise about design evidence, honest about verification.
 **Category:** UI / Design Handoff
 
 ---
 
 ## Purpose
 
-Translates Figma design specifications into production-ready UI code for Android (Jetpack Compose), iOS (SwiftUI), Flutter, or React Native. Takes a design description, component spec, or Figma JSON and outputs complete, styled, accessible component code.
+Extracts source-traced Figma specifications and translates them into native UI in the target repository. Supports connected MCP reads and supplied descriptions/exports, with explicit coverage and verification limits.
 
 ---
 
 ## Input Format
 
 ```
-PLATFORM: <Android-Compose | iOS-SwiftUI | Flutter | React Native>
+MODE: <specs | implementation; default implementation>
+PLATFORM: <repository stack or explicit target>
+FIGMA_URL: <optional frame link including node-id>
+SPEC_PATH: <optional harvested contract folder>
+SCOPE: <optional page/node scope; default linked subtree>
 DESIGN_DESCRIPTION:
-<Describe the design in detail:>
+<Supply this when no accessible URL or harvested contract is available:>
 - Component name and purpose
 - Layout: dimensions, padding, spacing (in dp/pt)
 - Typography: font, weight, size, color (hex or design token)
@@ -35,12 +39,29 @@ EXISTING_COMPONENTS: <optional: list reusable components already in your codebas
 
 ## Output Format
 
+For `MODE: specs` return this schema (use zero counts and explicit unverified checks when disconnected):
+
+```text
+FIGMA SPECS
+===========
+Source: <URL or supplied input>
+Scope: <requested; inspected; skipped; unreadable>
+Contract: <folder or inline supplied spec>
+Counts: pages=<n>; components=<n>; criteria=<n>; references=<n>
+Verification: <crosscheck pass|fail|unverified; evidence>
+Questions: <blocking questions or none>
+Tasks: <node/component; AC IDs; target; reference>
+Verdict: <READY|PARTIAL|BLOCKED>
+```
+
+For `MODE: implementation` use the format below:
+
 ```
 FIGMA TRANSLATION
 =================
 Component: <name>
 Platform: <platform>
-Accessibility: <WCAG compliance level — A | AA | AAA>
+Accessibility: <target A | AA | AAA; verified or unverified>
 
 COMPONENT CODE
 --------------
@@ -64,11 +85,11 @@ ACCESSIBILITY CHECKLIST
 ☑/☐ Touch target ≥ 44×44pt / 48×48dp
 ☑/☐ Color contrast ≥ 4.5:1 (AA)
 ☑/☐ Focus order correct
-☑/☐ Screen reader tested (simulated)
+☑/☐ Screen reader tested (actual evidence or unverified)
 
 NOTES
 -----
-<Any deviations from spec or platform limitations>
+<Deviations, node/AC-to-file mapping, actual checks/evidence, open gaps; verdict VERIFIED|IMPLEMENTED_UNVERIFIED|BLOCKED>
 ```
 
 ---
@@ -76,42 +97,36 @@ NOTES
 ## System Prompt
 
 ```
-You are FIGMA — a UI engineer who has built design systems for apps with 10 million users.
-You believe that pixel-perfect implementation is not perfectionism — it's respect for the
-designer's work and the user's experience. You know every dp of the Compose spacing system,
-every SwiftUI modifier, every Flutter decoration, and you will not let a 4dp padding error
-ship to production.
-
-Translate the provided design description into production-ready component code:
-
-For Android (Jetpack Compose):
-- Use MaterialTheme tokens for colors and typography (not hardcoded hex values).
-- Use Modifier with correct semantics for accessibility (.semantics { contentDescription = ... }).
-- Touch targets: min 48×48dp (Modifier.sizeIn(minWidth = 48.dp, minHeight = 48.dp)).
-- Animations: use animate*AsState for state transitions, spring() for physics-based.
-- Spacing: use dp extensions, not raw pixels.
-
-For iOS (SwiftUI):
-- Use environment color scheme and dynamic type for accessibility.
-- Apply .accessibilityLabel(), .accessibilityHint(), .accessibilityAddTraits().
-- Touch targets: min 44×44pt (.frame(minWidth: 44, minHeight: 44)).
-- Use @Environment(\.colorScheme) for dark mode.
-- Animations: withAnimation { } + spring() easing for interactive elements.
-
-For Flutter:
-- Use ThemeData tokens, not hardcoded colors.
-- Add semanticsLabel to all visual-only widgets.
-- Minimum touch target: 48×48dp via SizedBox or GestureDetector with padding.
-- Use const where possible for rebuild optimization.
-
-For React Native:
-- Use StyleSheet.create for style definitions.
-- Add accessibilityLabel and accessibilityRole to interactive elements.
-- Touch targets: minHeight: 44, minWidth: 44 (iOS) / 48, 48 (Android).
-- Use Animated.Value or Reanimated 2 for interactions.
-
-Always implement ALL states described. Flag any design property that is not achievable on
-the target platform and suggest the closest native equivalent.
+You are FIGMA, a design handoff and native UI engineer. Detect the repository's
+framework, architecture, tokens, components and state management. Never switch
+platforms because MCP returns React/Tailwind code.
+
+Discover Figma tools and load vendor prerequisites. Read the linked subtree or
+explicit scope in bounded batches: variants, nested requirements/copy, variables
+and screenshots. Keep Figma read-only. Record unknown values and unreadable scope.
+Separate observed values, derived criteria and proposed behavior; retain source
+node IDs/text. Screenshots cannot establish hidden behavior or exact tokens.
+
+In specs mode follow figma-spec-harvest guidance when available. Save a contract,
+cross-check against fresh reads, and report coverage, questions and tasks using
+the SPECS format. Supplied descriptions remain supplied evidence, not live reads.
+
+In implementation mode follow figma-to-implementation guidance when available.
+Reuse native components and semantic tokens; trace nodes/criteria to changed files.
+Preserve API contracts and resolve blockers before dependent edits. Translate Auto
+Layout into responsive native constraints and logical units. Preserve safe areas,
+text scaling, keyboard/focus behavior, accessibility, variants and actions.
+Android/iOS use existing Compose/XML or SwiftUI/UIKit. Flutter requires bounded
+flex/scroll/Stack layouts. React Native preserves navigation and virtualization.
+KMP respects shared/native ownership. Unity/Unreal preserve UI systems, anchors,
+DPI scaling and controller focus. Other targets follow their actual stack.
+Record unavailable fonts/assets and necessary deviations without silent substitution.
+
+Run relevant checks and compare captured runtime UI with design references at
+matched viewport, theme and state. Report commands, actual evidence and gaps.
+Never claim build, contrast, visual or screen-reader checks passed without evidence;
+unrun checks remain unverified. Accessibility is a target, not certification.
+Use the selected mode's exact output; code may be returned or linked to edited files.
 
 Output MUST follow the exact format specified. Do not add extra sections or omit any section.
 ```
@@ -228,14 +243,16 @@ ACCESSIBILITY CHECKLIST
 ☑ Touch target ≥ 48×48dp (height is 56dp, fills width)
 ☑ Color contrast ≥ 4.5:1 (white on #1A73E8 = 4.62:1 — passes AA)
 ☑ Focus order correct (default focus traversal)
-☑ Screen reader: button role provided by Button composable
+☐ Screen reader: unverified; native Button semantics alone do not prove runtime testing
 
 NOTES
 -----
 - The #1557B0 pressed state is delivered via Material3's built-in ripple indication on
   top of the base color. If you need the exact hex, override indication with a custom
   PressedColor in ButtonDefaults.
-- Animated color state transitions are included for smooth enabled/disabled switching.
+- Source is a supplied description; no live Figma node/AC mapping is available.
+- Build, visual match and runtime accessibility checks: unverified.
+- Verdict: IMPLEMENTED_UNVERIFIED.
 ```
 
 ---
@@ -244,4 +261,5 @@ NOTES
 
 - The more precise your design description (exact px/dp, font weights, hex values), the more accurate the output.
 - For design system integration, provide your existing token names — FIGMA will use them instead of raw values.
-- Tested with: Claude Sonnet 4.6.
+- Original component prompt tested with: Claude Sonnet 4.6. Revised MCP/specs workflow reviewed in Codex; live Figma and platform runtime checks not performed.
+- Full setup and pipeline: [Figma MCP guide](../../../docs/figma-mcp.md), [Figma to code workflow](../../../workflows/figma-to-code.md).

package/agents/cross-platform/mobile-harness/agent.md

@@ -299,7 +299,7 @@ For high or regulated risk, define rollback before implementation: trigger, owne
 - Use the platform reviewer after code changes: AXIOM, SWIFT, DART, or BRIDGE.
 - Run the configured build, lint/static-analysis, and test checks after every task. If commands are missing, discover safe platform defaults; mark unavailable checks explicitly instead of silently skipping them.
 - Run `/prd-verification` to verify behavior against `PRD.md`, `DESIGN.md`, `TASKS.md`, tests, screenshots, and QA reports.
-- Verify UI against the design artifact, not memory.
+- Verify UI against the design artifact, not memory. For Figma, use `/figma-spec-harvest` before implementation and carry contract paths/node/AC IDs into tasks and `/prd-verification`. Require complete scoped source checks and native runtime evidence separately; partial or missing component results remain pending.
 - Use Mobile MCP for device, emulator, or simulator evidence when available.
 - Capture screenshots, element lists, and failures in the report.
 - Record evidence by artifact ID in `evidence.json`; narrative statements alone are not proof.

package/cli/commands/figma.js

@@ -0,0 +1,42 @@
+'use strict';
+const fs = require('node:fs');
+const path = require('node:path');
+const { parseOptions } = require('../lib/options');
+const SOURCE = path.resolve(__dirname, '../../tools/figma-spec');
+const FILES = ['README.md', 'requirements.txt', 'page_index.js', 'text_dump.js', 'node_dump.js',
+  'yaml_io.py', 'dump_to_yaml.py', 'crosscheck.py', 'compare_screens.py', 'validate_spec.py'];
+
+function initFigmaTools(cwd = process.cwd()) {
+  const realRoot = fs.realpathSync(cwd);
+  const destination = path.join(realRoot, 'tools/figma-spec');
+  // Check existing ancestors before creating anything; never follow redirected paths.
+  for (const relative of ['tools', 'tools/figma-spec']) {
+    const candidate = path.join(realRoot, relative);
+    if (fs.existsSync(candidate) || (() => { try { return fs.lstatSync(candidate).isSymbolicLink(); } catch { return false; } })()) {
+      if (fs.lstatSync(candidate).isSymbolicLink()) throw new Error('Tools directory must be inside the project without symlink redirects');
+      if (!fs.statSync(candidate).isDirectory()) throw new Error(`Expected directory: ${candidate}`);
+    }
+  }
+  fs.mkdirSync(destination, { recursive: true });
+  return FILES.map(name => {
+    const target = path.join(destination, name);
+    try {
+      fs.copyFileSync(path.join(SOURCE, name), target, fs.constants.COPYFILE_EXCL);
+      return { name, status: 'created' };
+    } catch (error) {
+      if (error.code === 'EEXIST') return { name, status: 'preserved' };
+      throw error;
+    }
+  });
+}
+
+function cmdFigma(args) {
+  const options = parseOptions(args);
+  if (options._.join(' ') !== 'tools init' || Object.keys(options).some(key => key !== '_')) {
+    throw new Error('Usage: mobile-ai-agents figma tools init (run in the target project)');
+  }
+  const results = initFigmaTools();
+  for (const { name, status } of results) console.log(`${status}: tools/figma-spec/${name}`);
+  console.log('Helpers installed. Connect/authenticate Figma separately; see tools/figma-spec/README.md.');
+}
+module.exports = { initFigmaTools, cmdFigma };

package/cli/commands/network.js

@@ -0,0 +1,19 @@
+'use strict';
+const fs = require('node:fs');
+const path = require('node:path');
+const { parseOptions } = require('../lib/options');
+const { capture } = require('../lib/network-capture');
+
+async function cmdNetwork(args) {
+  const opts = parseOptions(args);
+  if (opts._.join(' ') !== 'capture' || !opts.url || !opts.out || Object.keys(opts).some(key => !['_', 'url', 'out', 'flow', 'allow-origin', 'allow-writes', 'headed', 'channel'].includes(key))) {
+    throw new Error('Usage: mobile-ai-agents network capture --url URL --out NEW_DIRECTORY [--flow flow.json] [--allow-origin ORIGIN,ORIGIN] [--allow-writes] [--headed] [--channel chrome]');
+  }
+  for (const name of ['url', 'out', 'flow', 'allow-origin', 'channel']) if (opts[name] !== undefined && typeof opts[name] !== 'string') throw new Error(`--${name} needs a value.`);
+  for (const name of ['allow-writes', 'headed']) if (opts[name] !== undefined && opts[name] !== true) throw new Error(`--${name} is a flag without a value.`);
+  const report = await capture({ url: opts.url, output: path.resolve(opts.out), flow: opts.flow ? JSON.parse(fs.readFileSync(opts.flow, 'utf8')) : [], allowedOrigins: opts['allow-origin']?.split(',') || [], allowWrites: !!opts['allow-writes'], headless: !opts.headed, channel: opts.channel });
+  console.log(`${report.status}: ${report.touchpoints.length} touchpoints, ${report.requests.length} requests. ${path.resolve(opts.out)}`);
+  console.log('API shapes observed; mobile parity is unverified. Review capture.json and report.md.');
+  if (report.status !== 'captured') process.exitCode = 1;
+}
+module.exports = { cmdNetwork };

package/cli/commands/router.js

@@ -3,6 +3,8 @@
 const { cmdDoctor } = require('./doctor');
 const { cmdHarness } = require('./harness');
 const { cmdMcp } = require('./mcp');
+const { cmdFigma } = require('./figma');
+const { cmdNetwork } = require('./network');
 
 function createCommandRouter(legacyHandlers) {
   const routes = new Map([
@@ -14,6 +16,8 @@ function createCommandRouter(legacyHandlers) {
     ['doctor', cmdDoctor],
     ['harness', cmdHarness],
     ['mcp', cmdMcp],
+    ['figma', cmdFigma],
+    ['network', cmdNetwork],
     ['help', legacyHandlers.help],
     ['--help', legacyHandlers.help],
     ['-h', legacyHandlers.help],

package/cli/fixtures/network-demo.js

@@ -0,0 +1,52 @@
+'use strict';
+const http = require('node:http');
+
+const flow = [
+  { action: 'click', selector: '#load' },
+  { action: 'click', selector: '#detail' },
+  { action: 'click', selector: '#validate' },
+  { action: 'fill', selector: '#title', value: 'Test listing' },
+  { action: 'click', selector: '#save' },
+];
+
+function createDemo() {
+  const server = http.createServer(async (req, res) => {
+    const send = (status, data) => { res.writeHead(status, { 'content-type': 'application/json', 'x-test-secret': 'demo-secret' }); res.end(JSON.stringify(data)); };
+    if (req.url === '/api/items') return send(200, { items: [{ id: 1, title: 'Test listing', email: 'private@example.test' }] });
+    if (req.url === '/api/detail') return send(200, { id: 1, title: 'Test listing' });
+    if (req.url === '/api/options') return send(200, { categories: ['Books', 'Other'] });
+    if (req.url === '/api/save') {
+      let raw = ''; for await (const chunk of req) raw += chunk;
+      return send(201, { id: 2, saved: !!JSON.parse(raw).title });
+    }
+    if (req.url === '/api/error') return send(422, { errors: { title: 'Required' } });
+    if (req.url === '/api/fail') return req.socket.destroy();
+    if (req.url === '/favicon.ico') { res.writeHead(204); return res.end(); }
+    res.writeHead(200, { 'content-type': 'text/html' });
+    res.end(`<!doctype html><html lang="en"><meta charset="utf-8"><title>Website API discovery demo</title>
+      <h1>List → detail → form</h1><button id="load">Load listings</button><button id="detail">Open detail</button>
+      <label>Title <input id="title" required></label><button id="validate">Validate locally</button><button id="save">Save test listing</button>
+      <button id="error">Server error</button><button id="fail">Network failure</button><button id="external">External request</button>
+      <p id="state" role="status">Ready</p><script>
+      const show = text => document.querySelector('#state').textContent = text;
+      document.querySelector('#load').onclick = async () => { await fetch('/api/items'); show('Listings loaded'); };
+      document.querySelector('#detail').onclick = async () => { await Promise.all([fetch('/api/detail'),fetch('/api/options')]); show('Detail loaded'); };
+      document.querySelector('#validate').onclick = () => show(document.querySelector('#title').value ? 'Valid' : 'Title required');
+      document.querySelector('#save').onclick = async () => { await fetch('/api/save',{method:'POST',headers:{'Content-Type':'application/json','Authorization':'Bearer demo-secret'},body:JSON.stringify({title:document.querySelector('#title').value,password:'private-password'})}); show('Saved'); };
+      document.querySelector('#error').onclick = () => fetch('/api/error');
+      document.querySelector('#fail').onclick = () => fetch('/api/fail').catch(() => show('Failed'));
+      document.querySelector('#external').onclick = () => fetch('http://127.0.0.1:1/private?token=secret').catch(() => show('Blocked'));
+      </script></html>`);
+  });
+  return server;
+}
+
+if (require.main === module) {
+  const fs = require('node:fs');
+  const path = require('node:path');
+  const directory = process.argv[2];
+  if (!directory) throw new Error('Usage: node cli/fixtures/network-demo.js NEW_FLOW_FILE');
+  fs.writeFileSync(path.resolve(directory), JSON.stringify(flow, null, 2), { flag: 'wx' });
+  createDemo().listen(4173, '127.0.0.1', () => console.log('Owned test site: http://127.0.0.1:4173. Stop with Ctrl+C.'));
+}
+module.exports = { createDemo, flow };

package/cli/index.js

@@ -65,6 +65,10 @@ const AGENTS = {
 };
 
 const SKILLS = {
+  'web-network-to-mobile': { file: 'skills/cross-platform/web-network-to-mobile.md', platform: 'cross' },
+  'figma-mcp-setup': { file: 'skills/cross-platform/figma-mcp-setup.md', platform: 'cross' },
+  'figma-spec-harvest': { file: 'skills/cross-platform/figma-spec-harvest.md', platform: 'cross' },
+  'figma-to-implementation': { file: 'skills/cross-platform/figma-to-implementation.md', platform: 'cross' },
   // Android
   'anr-investigation':  { file: 'skills/android/anr-investigation.md',         platform: 'android' },
   'android-tdd':        { file: 'skills/android/android-tdd.md',               platform: 'android' },
@@ -128,6 +132,7 @@ const SKILLS = {
 };
 
 const WORKFLOWS = {
+  'figma-to-code': { file: 'workflows/figma-to-code.md' },
   'feature-ship':      { file: 'workflows/feature-ship.md'      },
   'release-cycle':     { file: 'workflows/release-cycle.md'     },
   'game-level':        { file: 'workflows/game-level.md'        },
@@ -194,8 +199,12 @@ const PLATFORM_AGENTS = {
   ],
 };
 
+const FIGMA_SKILLS = ['figma-mcp-setup', 'figma-spec-harvest', 'figma-to-implementation'];
+
 const PLATFORM_SKILLS = {
   android: [
+    ...FIGMA_SKILLS,
+    'web-network-to-mobile',
     'anr-investigation', 'android-tdd', 'code-review', 'compose-migration', 'compose-review',
     'kotlin-modernize', 'memory-leak-investigation', 'proguard-rules',
     // cross-platform bundled for android
@@ -205,6 +214,8 @@ const PLATFORM_SKILLS = {
     'release-prep', 'security-audit', 'security-scan', 'store-listing',
   ],
   ios: [
+    ...FIGMA_SKILLS,
+    'web-network-to-mobile',
     'data-persistence', 'ios-tdd', 'networking', 'ios-performance',
     'swift-concurrency', 'swift-review', 'swiftui-review', 'swiftui-state',
     'unit-testing', 'xcode-warnings',
@@ -215,6 +226,8 @@ const PLATFORM_SKILLS = {
     'release-prep', 'security-audit', 'security-scan', 'store-listing',
   ],
   flutter: [
+    ...FIGMA_SKILLS,
+    'web-network-to-mobile',
     'dart-modernize', 'flutter-review', 'flutter-tdd', 'widget-extract', 'widget-gen',
     // cross-platform bundled for flutter
     'accessibility-audit', 'api-versioning', 'clean-code-audit', 'crash-analysis', 'crash-triage',
@@ -223,6 +236,8 @@ const PLATFORM_SKILLS = {
     'release-prep', 'security-audit', 'security-scan', 'store-listing',
   ],
   rn: [
+    ...FIGMA_SKILLS,
+    'web-network-to-mobile',
     'bridge-audit', 'expo-optimize', 'new-arch-migrate', 'rn-performance',
     'rn-review', 'rn-tdd',
     // cross-platform bundled for rn
@@ -232,11 +247,15 @@ const PLATFORM_SKILLS = {
     'release-prep', 'security-audit', 'security-scan', 'store-listing',
   ],
   gaming: [
+    ...FIGMA_SKILLS,
+    'web-network-to-mobile',
     'blueprint-to-cpp', 'clean-code-audit', 'game-perf', 'mobile-app-design', 'mobile-mcp-qa',
     'mobile-memory-graph', 'mobile-memory-search', 'mobile-memory-save', 'prd-verification', 'security-audit', 'shader-gen',
     'unity-tdd', 'shader-review',
   ],
   cross: [
+    ...FIGMA_SKILLS,
+    'web-network-to-mobile',
     'accessibility-audit', 'api-versioning', 'clean-code-audit', 'crash-analysis', 'crash-triage',
     'deeplink-debug', 'feature-slice', 'grill-mobile', 'mobile-app-design', 'mobile-mcp-qa',
     'mobile-memory-graph', 'mobile-memory-search', 'mobile-memory-save', 'perf-audit', 'prd-verification',
@@ -1208,6 +1227,7 @@ function cmdMemory(args) {
     console.log('    --files   Comma-separated related files');
     console.log('');
     console.log('  Examples:');
+  console.log(dim('    npx mobile-ai-agents figma tools init'));
     console.log(dim('    npx mobile-ai-agents memory init'));
     console.log(dim('    npx mobile-ai-agents memory capture --type decision --title "Use Room" --text "Persist habits locally with Room."'));
     console.log(dim('    git diff | npx mobile-ai-agents memory capture --type code-state --title "Current diff"'));
@@ -1397,6 +1417,7 @@ function cmdHelp() {
   console.log(`    ${bold('start')}                           Guided setup that creates PRD/design/tasks/roadmap`);
   console.log(`    ${bold('install')}                         Install agents, skills, and workflows`);
   console.log(`    ${bold('add')} agent|skill|workflow <name>  Install a single item`);
+  console.log(`    ${bold('network capture')} --url URL --out DIR  Capture website API touchpoints (optional Playwright)`);
   console.log(`    ${bold('memory')} init|capture|search|...    Local Mobile Memory store`);
   console.log(`    ${bold('doctor')} --platform android          Check SDK, adb, emulator, MCP, and project config`);
   console.log(`    ${bold('harness')} policy init|validate       Configure governed Mobile Harness runs`);
@@ -1424,6 +1445,7 @@ function cmdHelp() {
   console.log('    codex     All agents/skills/workflows → AGENTS.md');
   console.log('');
   console.log('  Examples:');
+  console.log(dim('    npx mobile-ai-agents figma tools init'));
   console.log(dim('    npx mobile-ai-agents start'));
   console.log(dim('    npx mobile-ai-agents start --platform flutter --idea "Habit tracker"'));
   console.log(dim('    npx mobile-ai-agents install'));