How do I install the Fict Devtools Playground skill?

Run npx skillmds@latest add marmelab/fict-devtools-playground in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Fict Devtools Playground safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Fict Devtools Playground?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Fict Devtools Playground free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Fict Devtools Playground?

marmelab (@marmelab) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Fict Devtools Playground by marmelab

Name: Fict Devtools Playground
Author: marmelab

Fict Devtools Playground

Fict DevTools and Playground engineering guide. Use when implementing, debugging, or reviewing Fict devtools panel/extension behavior, signal/computed/effect inspection UX, graph/timeline interactions, or playground preview refresh and isolation from production runtime.

marmelab 09b6dee 15 files · 23.9 KB Updated Sep 17, 2026

File contents

Fict DevTools and Playground Engineering

Guidance for shipping robust devtools and playground features without regressing Fict runtime correctness or production performance.

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Bridge and Transport Correctness	CRITICAL	`bridge-`
2	Inspector Data Semantics	HIGH	`inspector-`
3	Graph and Timeline UX	HIGH	`graph-`
4	Playground Preview Runtime	HIGH	`preview-`
5	Verification and Shipping Gates	CRITICAL	`quality-`

Quick Reference

1. Bridge and Transport Correctness (CRITICAL)

bridge-standalone-handshake - Keep standalone and extension handshake contract aligned
bridge-dev-only-gating - Ensure debug bridge is development-only

2. Inspector Data Semantics (HIGH)

inspector-stable-owner-labeling - Prefer semantic names over generated ids when possible
inspector-owner-navigation - Owner links should navigate and expand ancestor chain

3. Graph and Timeline UX (HIGH)

graph-coverage-all-node-types - Render graph for signals, computed, and effects
graph-owner-click-through - Make graph owner/sidebar references navigable
graph-timeline-click-through - Timeline nodes should support context jump

4. Playground Preview Runtime (HIGH)

preview-refresh-fidelity - Preserve HMR and full refresh behavior for changed source
preview-runtime-isolation - Keep playground internals out of runtime production path

5. Verification and Shipping Gates (CRITICAL)

quality-counter-basic-e2e - Validate on examples/counter-basic for real interaction paths
quality-standalone-extension-parity - Keep standalone and extension behavior parity

How to Use

Read rules in rules/ for implementation and debugging details. Use AGENTS.md for a compiled one-file reference.

Full Compiled Document

AGENTS.md

---name: fict-devtools-playgrounddescription: Fict DevTools and Playground engineering guide. Use when implementing, debugging, or reviewing Fict devtools panel/extension behavior, signal/computed/effect inspection UX, graph/timeline interactions, or playground preview refresh and isolation from production runtime.---# Fict DevTools and Playground EngineeringGuidance for shipping robust devtools and playground features without regressingFict runtime correctness or production performance.## Rule Categories by Priority| Priority | Category | Impact | Prefix || -------- | -------------------------------- | -------- | ------------ || 1 | Bridge and Transport Correctness | CRITICAL | `bridge-` || 2 | Inspector Data Semantics | HIGH | `inspector-` || 3 | Graph and Timeline UX | HIGH | `graph-` || 4 | Playground Preview Runtime | HIGH | `preview-` || 5 | Verification and Shipping Gates | CRITICAL | `quality-` |## Quick Reference### 1. Bridge and Transport Correctness (CRITICAL)- `bridge-standalone-handshake` - Keep standalone and extension handshake contract aligned- `bridge-dev-only-gating` - Ensure debug bridge is development-only### 2. Inspector Data Semantics (HIGH)- `inspector-stable-owner-labeling` - Prefer semantic names over generated ids when possible- `inspector-owner-navigation` - Owner links should navigate and expand ancestor chain### 3. Graph and Timeline UX (HIGH)- `graph-coverage-all-node-types` - Render graph for signals, computed, and effects- `graph-owner-click-through` - Make graph owner/sidebar references navigable- `graph-timeline-click-through` - Timeline nodes should support context jump### 4. Playground Preview Runtime (HIGH)- `preview-refresh-fidelity` - Preserve HMR and full refresh behavior for changed source- `preview-runtime-isolation` - Keep playground internals out of runtime production path### 5. Verification and Shipping Gates (CRITICAL)- `quality-counter-basic-e2e` - Validate on `examples/counter-basic` for real interaction paths- `quality-standalone-extension-parity` - Keep standalone and extension behavior parity## How to UseRead rules in `rules/` for implementation and debugging details.Use `AGENTS.md` for a compiled one-file reference.## Full Compiled Document`AGENTS.md`

Frequently asked questions