skills.rest
NeptuneKit
NeptuneKitOFFICIAL
Explore all skills by this author →
GitHub

tritonkit-web-mock-ui

Builds and validates React/Vite Web mock UI prototypes for TritonKit emulator tooling.

1|Updated May 15, 2026
Search Tags:#react#validation#vite#prototype#emulator#ant design#mock ui
One-click install
npx skills add https://github.com/NeptuneKit/TritonKit --skill tritonkit-web-mock-ui-neptunekit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tritonkit-web-mock-ui
Source: https://github.com/NeptuneKit/TritonKit/tree/main/.agents/skills/tritonkit-web-mock-ui
Command: npx skills add https://github.com/NeptuneKit/TritonKit --skill tritonkit-web-mock-ui-neptunekit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing and validating Web mock UI screens for TritonKit requires consistent rules about ports, component libraries, device canvas behavior, and evidence panels, and this Skill encodes those rules so prototypes stay aligned with the CLI/HTTP business-control contract. ## Core Features & Use Cases - React/Vite Mock Implementation: Guides creation of React + TypeScript + Vite mock apps in Web/ with Ant Design components, fixed dev/preview ports, and mock DTO data modules. - Device Canvas & Hierarchy Patterns: Defines interaction rules for screenshot mirroring, tap/type/paste input relays, Lookin-style hierarchy viewers, and network/log evidence panes. - Validation Workflow: Enforces build checks, browser smoke tests at 127.0.0.1:34127, and documentation updates before delivery. - Use Case: When asked to prototype a TritonKit dashboard showing an iOS simulator mirror with a hierarchy inspector, this Skill ensures the screen uses DTO-shaped data, honest fallback labels, and read-only Web boundaries. ## Quick Start Ask the agent to create a TritonKit Web mock UI screen for a device mirror with target list and evidence panels using this skill.

Frequently Asked Questions about tritonkit-web-mock-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Web mock UI prototype for TritonKit?▼

Create a space README with BDD scenarios first, then implement a React + TypeScript + Vite app in the Web/ directory using Ant Design components and mock DTO data. Run npm run build and verify the page at 127.0.0.1:34127 in a browser automation tool.

What component library does the TritonKit Web mock use?▼

The Web mock UI uses Ant Design as the primary component system for page chrome, navigation, panels, forms, trees, and tabs. Custom DOM/SVG is reserved for device screenshot canvases and coordinate hit-testing where machine-readable geometry matters.

Can the Web mock UI control the emulator directly?▼

No. CLI and HTTP remain the business-control contract, and Web screens consume DTO-shaped mock data or read-only endpoints. The Web UI may collect human gestures but emits DTO-shaped tap, swipe, type, or paste payloads instead of calling platform tools directly.

Why does a real-device screenshot show a simulator frame?▼

This happens when the runtime resolver falls back to a simulator target for an ios-real host target. The resolver must select a connected iOS runtime without simulatorUDID or return an explicit app_runtime_unavailable error instead of showing a simulator screenshot.

What Vite ports should the Web mock dev server use?▼

The dev server must bind to 127.0.0.1:34127 and preview to 127.0.0.1:34128, both with strictPort enabled. Generated output such as node_modules, dist, and screenshot directories must remain untracked.

Related Skills

Explore More Software Engineering Skills→
oldwinteroldwinter
5

problem-definition

Generate a Problem Definition Pack with problem statement, JTBD, metrics, and scope.

Community
Advanced
notquenotque
415

docs-sync-checker

Compare filesystem tools against README and docs to detect documentation drift.

Community
Advanced
powdreampowdream

start-emulator

Launch a specified Android Virtual Device via command line with JSON output.

Community
Advanced
robertbr123robertbr123

claude-design

Create and customize HTML design artifacts from a CLI or API.

Community
Advanced