agentleFS
Sign inStart free
ouestlabsouestlabs/audio-ui/skills/core/SKILL.md

core

Skill202 starsChanged 29 days agoMITView on GitHub

Load this before writing any audio control, knob, fader, meter, XY pad or slider for Vue, Svelte, Solid, Angular, Lit, web components or plain JavaScript and the DOM, or in any project without React. It holds the framework-free @audio-ui/core controllers behind every audio/ui primitive (value math, log scales, pointer, wheel and keyboard handling, native range input for accessibility, live sources), the plain DOM knob and fader, and the Vue and Svelte bindings, so the control is not rewritten from scratch. Use it whenever the user names a non-React framework or says no React, even if they only ask for a rotary knob, a fader or a synth UI.

28 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use ts-core, native-ui and 3 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • VercelSkill

    ts-core

    Authoring guide for the primary Native SDK app-logic path: TypeScript app cores - Model, Msg, update, and the pure functions they call, written in the closed app-core subset, checked by the @native-sdk/core frontend, and compiled ahead-of-time to native code by the external core compiler. Use for new apps unless the user explicitly chose Zig, when writing or modifying a src/core.ts app core, fixing subset checker errors (NS1001-NS1069), or deciding how to express state, messages, text (bytes and the byte-text string methods), text input, continuous controls (sliders, scroll), effects (Cmd), subscriptions (Sub), the host-event wiring channels (frameMsg, keyMsg, pinchMsg, dropMsg, appearanceMsg, chromeMsg, envMsgs, app manifest assets), derived values, the view_unbound lint opt-out, local mutation of owned arrays, or how to split a core into modules under src/ (relative imports, namespace imports, @native-sdk/core/text, @native-sdk/core/events). Use ts-services alongside this guide for src/services work.

    Also in 3 projects that use this

  • VercelSkill

    native-ui

    Authoring guide for the Native markup (.native) view tier of native-rendered Native SDK apps. TypeScript cores are the default and use this skill together with ts-core; Zig cores are an explicit alternative and this guide labels their lower-level UiApp recipes. Use when building or modifying native UI (widgets, layout, bindings, messages), writing .native files, wiring views to Model/Msg/update, testing markup views, or verifying a native app through the automation harness.

    Also in 3 projects that use this

  • +3 more from vercel-labs

The file

We split this skill into the rules it gives an agent

2 rules. 0 are common, 2 are distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 20 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Read the rule files for the explanation and the incorrect and correct code:

    line 49
  2. Distinctive:

    Every rule of this skill expanded in one file: AGENTS.md

    line 61

“Common” is measured: kept by at least 6 in 10 of the 20 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Audio controls without React

@audio-ui/core holds the logic of every audio/ui primitive with no framework in it: value math, scales, pointer, wheel and keyboard handling, and live sources. A control outside React is one controller, a native range input for accessibility, and a few lines of drawing.

When to Apply

  • Audio controls for Vue, Svelte, Solid, Angular, web components or the plain DOM
  • A project that has no React, or no @audio-ui/react
  • Writing a binding of the controllers for another framework
  • Reviewing code that creates controllers, subscribes or redraws

Rule Categories by Priority

PriorityCategoryImpactPrefix
1Without ReactHIGHcore-

Quick Reference

1. Without React (HIGH)

  • core-one-controller - Create one controller per control, once; never on every option change
  • core-redraw-after-set-options - setOptions replaces everything and notifies no one: pass all options, then redraw
  • core-draw-from-snapshot - Draw angle, percent and text from getSnapshot(), never recomputed
  • core-native-range-input - A hidden <input type="range"> wired to keyDown and type
  • core-pointer-handler - Primary button, preventDefault, focus the input and touch-action: none before press
  • core-cleanup - Call the removers subscribe and attachWheel return
  • core-public-entries - @audio-ui/core and @audio-ui/core/<name>, never /internal

Workflow

  1. Install @audio-ui/core (no dependencies) and read core.md: the entries, a plain DOM knob, and Vue and Svelte bindings.
  2. Create one controller per control, once (core-one-controller), wire a hidden <input type="range"> to it (core-native-range-input), and draw from getSnapshot() (core-draw-from-snapshot).
  3. Handle the pointer the way the rules say (core-pointer-handler) and call the removers on teardown (core-cleanup).
  4. Look. The design skill has the skins and styles/dom.css for the plain DOM; sound and live data come from the web-audio skill.
  5. Verify. Tab to each control and use the arrow keys, then drag it fast.

How to Use

Read the rule files for the explanation and the incorrect and correct code:

rules/core-one-controller.md
rules/core-cleanup.md

Full Compiled Document

Every rule of this skill expanded in one file: AGENTS.md

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free