Project Skills Registry & System Design

01

Active Skills — Installed & Assigned

All 8 skills read in full before assignment. Each skill's SKILL.md was loaded and cross-referenced against the project brief. Every assignment has a specific role — no skill is listed without a concrete use within the build sequence.

Figma & Design Layer

🖊

figma-use

Plugin API — Core Engine

17 critical rules for writing Plugin API code in Figma. Mandatory prerequisite before every single use_figma call. Covers font loading, page switching (async only), return patterns, Fill/stroke cloning, FILL sizing order, error recovery protocol.

/mnt/skills/user/figma-use/SKILL.md

Mandatory gate use_figma Plugin API Annotations

🎨

frontend-design

Visual Identity System

Drives all colour, typography, and layout decisions for the HTML prep dashboard. Mandates a brainstorm-then-critique two-pass process. Anti-AI-slop guardrail: no cream backgrounds, no Inter defaults, no purple gradients. One bold signature element.

/mnt/skills/public/frontend-design/SKILL.md

Colour tokens Typography Layout

🖼

ui-ux-interface-builder

Aesthetic Quality Gate

BEAUTIFUL → RIGHT → SATISFYING → PEAK four-stage framework. Iterates until aesthetic score ≥ 7/10. Defines micro-interaction timing: 150ms hover, 200ms reveals, 300ms transitions, ease-out entry. Used to quality-gate the HTML dashboard before walkthrough.

/mnt/skills/user/ui-ux-interface-builder/SKILL.md

≥ 7/10 gate Micro-interactions WCAG

Presentation Layer

📊

web-artifacts-builder

HTML Dashboard Builder

React 18 + TypeScript + Vite + Tailwind CSS 3.4 + 40+ shadcn/ui components. Bundles to a single self-contained HTML file. This is the primary build tool for Output B — the interactive scenario-tracer dashboard. init-artifact.sh → develop → bundle-artifact.sh.

/mnt/skills/examples/web-artifacts-builder/SKILL.md

React 18 Tailwind shadcn/ui Single HTML

▶

frontend-slides

Viewport-Locked Slides

Zero-dependency HTML. Every slide: height:100vh, overflow:hidden, no internal scroll. Keyboard + swipe + wheel navigation. clamp() scaling for all screen sizes. Tested at 1920×1080, 1280×720, 768×1024, 375×667. Used for walk-through slide context panels.

/mnt/skills/user/frontend-slides/SKILL.md

100vh lock Keyboard nav Zero deps

Intelligence & Quality Layer

⚡

api-creator

Claude API Integration

Anthropic Messages API — streaming, tool use, vision, prompt caching (up to 90% cost reduction on repeated context), batches API. Powers the live AI-assisted scenario tracer inside the HTML dashboard. Model: claude-sonnet-4-6. Always use streaming for real-time UX.

/mnt/skills/user/api-creator/SKILL.md

Streaming Tool use Sonnet 4.6 Prompt cache

✍

article-writing

Annotation Rationale Writing

Writes sharp, concrete "because" rationale for every node on the FigJam board. Lead with the concrete thing. No "Moreover", no "game-changer", no vague claims. Operator-style voice: direct, practical, zero hype. Activated before writing any board annotation.

/mnt/skills/user/article-writing/SKILL.md

Rationale No filler Concrete

🔬

advanced-evaluation

Pre-Walkthrough Quality Gate

LLM-as-judge with position-swap bias mitigation. Scores every annotation on 1–5 rubric: specificity, evidence, decision quality, completeness. Flags any annotation scoring below 4/5. Chain-of-thought requirement: justify before scoring (+15-25% reliability). Run before walkthrough call.

/mnt/skills/user/advanced-evaluation/SKILL.md

LLM judge Bias mitigation ≥ 4/5 gate

02

Excluded Skills — Read & Ruled Out

Every exclusion was verified by reading the full SKILL.md. No skill was excluded by name alone.

✕ accessibility VS Code–specific: IAccessibleViewImplementation,
AccessibleViewRegistry — not applicable here

✕ mcp-builder Builds new MCP servers. We use existing connections
(Figma, Notion) — not constructing new servers

✕ academic-researcher / academic-paper-review Literature review skills. Output is a system map,
not an academic paper

✕ autoresearch Iterative code-experiment loop requiring git + terminal.
Not applicable to design/presentation output

✕ pptx / docx / xlsx / pdf Office format skills. All outputs are HTML + FigJam.
No Office deliverable required by the brief

✕ figma-code-connect Maps Figma components to a codebase via .figma.js templates.
No codebase exists in this project

03

Skill Trigger Rules — When to Load

These rules are saved to Project memory and apply for the duration of this project. No skill is loaded speculatively — each has a specific trigger condition.

figma-use Before EVERY use_figma call — no exceptions. Even for single-line inspection scripts. This is a hard gate, not a guideline.
frontend-design Before defining any colour palette, typeface, or layout token for the HTML dashboard. Run the two-pass: brainstorm → critique before writing CSS.
ui-ux-interface-builder After initial dashboard build. Run BEAUTIFUL → RIGHT → SATISFYING → PEAK evaluation. Block merge if aesthetic score is below 7/10.
web-artifacts-builder Before initialising the React artifact project. Run init-artifact.sh first. Do not write React code without the bundling pipeline in place.
frontend-slides Only if a separate slide-based walkthrough component is needed. May be superseded by the single-dashboard approach — confirm before loading.
api-creator When wiring the Claude API fetch call inside the dashboard artifact. Load to confirm correct streaming pattern, headers, and error handling.
article-writing Before writing any annotation or "because" rationale for the FigJam board. Enforce: concrete first, explain after. No filler openers.
advanced-evaluation After all board annotations are written, before the walkthrough call. Score each annotation. Flag any below 4/5 and rewrite before proceeding.

04

Figma MCP — Official Tool Reference

Source: developers.figma.com/docs/figma-mcp-server/tools-and-prompts — fetched and verified. All 18 tools listed. "Remote only" tools require the remote MCP server (mcp.figma.com), which is our active connection.

Write Tools — Modify the Canvas

Tool	Type	Use in This Project	Active
generate_diagram	WRITE	PRIMARY BUILD TOOL — converts Mermaid syntax or natural language into a FigJam diagram. Used to build the system map board. No use_figma needed.	YES
use_figma	WRITE	General-purpose canvas write. Used after generate_diagram to add annotation overlays, colour-coding, and styled label frames. Always load figma-use SKILL.md first.	YES
create_new_file	WRITE	Creates the FigJam board file. Calls whoami first to get planKey. File type: figjam.	YES
upload_assets	WRITE	If any PNG/JPG assets (e.g. reference screenshots) need to be embedded in the board.	MAYBE
generate_figma_design	WRITE	Captures web UI as design layers. Not needed — no web UI to capture for this exercise.	NO
add_code_connect_map / send_code_connect_mappings	WRITE	Code-to-Figma mapping tools. No codebase in this project.	NO

Read Tools — Inspect & Query

Tool	Type	Use in This Project	Active
get_screenshot	READ	Validate each board section after building. Called after every use_figma write to verify visual output. Essential for catching clipped text and layout errors.	YES
get_metadata	READ	Inspect file structure: page list, layer IDs, node types, positions. Called before any write to understand existing canvas state.	YES
get_figjam	READ	Converts FigJam diagrams to XML. Used to verify the generated diagram structure is correct after generate_diagram runs.	YES
whoami	READ	Required first step for create_new_file — retrieves planKey from authenticated user's plans array.	YES
get_variable_defs	READ	If design system variables are discovered and need to be bound to annotation frames.	MAYBE
get_design_context / get_libraries / search_design_system	READ	Design system discovery tools. Not needed — we are building a system map, not building with a design system library.	NO
get_code_connect_* tools	READ	Code Connect mapping tools. No codebase in this project.	NO

05

Figma Official Agent Skills

Source: developers.figma.com/docs/figma-mcp-server/ — Agent Skills section. These are Figma's own published skills, available at github.com/figma/mcp-server-guide. Three are relevant; one is excluded.

🔑

figma-use (official)

Mandatory Plugin API Gate

Figma's own published version of the use_figma prerequisite skill. Covers the same 17 rules as our installed version. Must be loaded before every single use_figma call. Skill invoke: /figma-use

Active Already installed locally

🏗

figma-generate-design

Screen Builder from Design System

Builds/updates full Figma screens from design system components. Key workflow: search_design_system first → bind variables (not hardcode) → build section-by-section → validate with get_screenshot after each. For FigJam: use figma-use-figjam variant. Invoke: /figma-generate-design

Active (FigJam variant) Section-by-section

📄

figma-create-new-file

New File Workflow

Two-step workflow: (1) whoami → get planKey from plans array. (2) create_new_file with planKey + fileName + editorType. File types: "design" or "figjam". For this project: editorType="figjam", fileName="One Platform Three Portals — System Map". Invoke: /figma-create-new-file figjam "..."

Active — run first whoami → create

🔗

figma-code-connect

Code Connect Templates

Creates parserless .figma.js files mapping Figma components to code. Requires: published components, Organisation/Enterprise plan, codebase to map to. None of these conditions apply to this project. EXCLUDED.

Excluded — no codebase

06

Output Architecture — Two Deliverables

OUTPUT A — SUBMISSION

FigJam System Map Board

Built with generate_diagram (Mermaid → FigJam)
Annotated with use_figma (overlays + labels)
Every node has a written "because" rationale
Colour-coded by portal: Cyan=Customer, Green=Store, Violet=Platform
Shared as view link — THIS is the the hiring team submission
15-min walkthrough structured around this board

OUTPUT B — PREP TOOL

HTML Scenario-Tracer Dashboard

Single-screen, no scrolling — everything visible at once
Built with web-artifacts-builder (React 18 + Tailwind)
Scenario selector: 8 walkthrough scenarios listed
Click scenario → path highlights through system SVG map
Annotation drill mode: hide rationale, reveal on click
Claude API powers live "explain this node" queries
NOT submitted — personal walkthrough rehearsal tool

Why two outputs: The board is what gets evaluated. The dashboard is how you practise owning every box on it. The brief says "own every box" — that demands deliberate rehearsal, not just building the map and hoping.

07

Component Inventory — Every Box on the Board

Phase 1 deliverable: This is the complete list of nodes that must exist on the FigJam board. No visual representation yet — pure systems thinking. Every node listed here becomes a box on the board.

● Order Lifecycle 9 nodes

Browse / Discovery

Customer

Search & Filters

Customer

Product Catalogue / Menu

Shared

Cart Management

Customer

Checkout / Address

Customer

Order Confirmation

Shared

Order Queue / Kitchen

Store

Preparation & Ready State

Store

Order Completion

Shared

● Payment & Money Flows 8 nodes

Payment Capture

Customer → Gateway

Payment Gateway

Platform Infra

Authorisation Hold

Platform Infra

Settlement Calculation

Platform

Commission Deduction

Platform

Store Payout

Store → Bank

Refund Processing

Platform

Dispute Resolution

Platform

● Driver / Courier Layer 5 nodes

Driver Assignment Engine

Platform

Driver App / State

Platform

Pickup Confirmation

Shared

Delivery Tracking

Customer

Proof of Delivery

Shared

● Store Management 6 nodes

Store Onboarding

Platform → Store

Menu / Item Management

Store

Stock & Availability

Store

Opening Hours / Status

Store

Accept / Reject Orders

Store

Payout Dashboard

Store

● Platform Admin 7 nodes

Store Directory

Platform

Customer Accounts

Platform

Commission / Fee Config

Platform

Fraud Detection

Platform

Financial Reporting

Platform

Analytics Dashboard

Platform

Order History (all)

Platform

● Shared Infrastructure 6 nodes

Identity / Auth (×3)

Per-portal login

Notification Engine

Push/SMS/Email

Reviews & Ratings

Customer → visible

Promotions / Vouchers

Platform-managed

Search Index

Platform-owned

Pricing Engine

Dynamic / surge

08

Build Phases — Confirmed Sequence

Phase 1 is complete (component inventory above). Phase 2 begins next. Each phase has explicit skill activation requirements — no phase begins without confirming its skill dependencies.

PHASE 1 — DONE

Content: Component Inventory

Every box identified, grouped by domain, colour-coded by portal ownership. 41 nodes total. Pure systems thinking — no visuals yet. Output: the component inventory above.

Complete

PHASE 2 — NEXT

Structure: Map Architecture Decision

Choose the map structure. Three options: portal-centric (3 columns), lifecycle-centric (swim lanes), or hybrid (lifecycle spine + portal lanes + separate money section). Write the "because" for the chosen structure — this IS evaluated by the hiring team. Activate article-writing skill for this rationale.

article-writing advanced-evaluation

PHASE 3

Annotations: Write All "Because" Rationale

Every node on the board gets a decision + written reason. article-writing skill enforces: concrete first, explain second, no filler. Run advanced-evaluation quality gate — score each annotation 1–5. Rewrite any below 4/5.

article-writing advanced-evaluation

PHASE 4

FigJam Board: Build the Deliverable

Load figma-create-new-file skill → whoami → create FigJam file. Then generate_diagram with full Mermaid system map. Then use_figma (with figma-use loaded) for annotation overlays, colour-coding, portal swim lane labels. Validate with get_screenshot after each section.

figma-use figma-create-new-file generate_diagram use_figma

PHASE 5

HTML Dashboard: Build the Prep Tool

Load web-artifacts-builder → init-artifact.sh. Build React dashboard: scenario selector + SVG system map + path highlighting + annotation drill mode. Load api-creator → wire Claude API for live node explanations. Load frontend-design → define tokens. Quality gate: ui-ux-interface-builder ≥ 7/10. Bundle to single HTML.

web-artifacts-builder api-creator frontend-design ui-ux-interface-builder

PHASE 6

Rehearsal: Trace All 8 Scenarios

Use the HTML dashboard to trace all 8 likely scenarios live: (1) Happy path, (2) Failed payment, (3) Store rejects order, (4) Refund/dispute, (5) Store goes offline, (6) Item out of stock mid-order, (7) Driver cancels after pickup, (8) Store onboarding. Identify any gaps. Patch FigJam board if needed.

Rehearsal — no skill load needed