# Vanilla Lynx

> |

- **Type:** Skill
- **Install:** `agentstack add skill-lynx-community-skills-vanilla-lynx`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [lynx-community](https://agentstack.voostack.com/s/lynx-community)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [lynx-community](https://github.com/lynx-community)
- **Source:** https://github.com/lynx-community/skills/tree/release/skills/vanilla-lynx
- **Website:** https://lynxjs.org/next/ai/

## Install

```sh
agentstack add skill-lynx-community-skills-vanilla-lynx
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Build Lynx Apps without Framework

Use this skill to build Lynx apps directly from Element PAPIs and Lynx Runtime APIs.

## Core Rules

- Do not use ReactLynx, JSX, virtual DOM, or browser DOM APIs unless the user explicitly asks for them.
- Split app code into three parts.
  - `src/main-thread.ts` creates and mutates the element tree by using Element PAPIs.
  - `src/background.ts` get data from main-thread environment and handle events which always generate patches to main thread.
  - `src/style.css` contains common CSS styles used in the app.

## Recommended Path

1. For bundle scenarios, start with `references/template-webpack-build.md` for package setup.
2. Then read `references/main-thread-rendering.md` for main-thread UI tree creation and mutation.
3. Then read `references/double-thread-data-sync.md` for double-thread event dispatch and data synchronization.

## Examples

Prefer the smallest relevant example:

- `examples/counter.md`: minimal app shape for scaffolding, exact file contents, or debugging the template-webpack bundle path.
- `examples/todo-list.md`: composed app that combines first-screen data, patch-based rerendering, condition switching, repeat rendering, filters, and background event handling.

## Verification

After creating or changing a vanilla Lynx app:

```bash
pnpm dev
```

Confirm:

- expected `.bundle` files are emitted in `dist/`
- the QR/dev URL opens

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [lynx-community](https://github.com/lynx-community)
- **Source:** [lynx-community/skills](https://github.com/lynx-community/skills)
- **License:** Apache-2.0
- **Homepage:** https://lynxjs.org/next/ai/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-lynx-community-skills-vanilla-lynx
- Seller: https://agentstack.voostack.com/s/lynx-community
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.