メニュー
Build GTK4 desktop apps with GTKX — React JSX renders as native Linux widgets via Rust FFI. Use when creating Adwaita widgets, styling GTK with CSS-in-JS, or debugging GTKX components.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | gtkx |
| topic | GTKX Framework |
| description | Build GTK4 desktop apps with GTKX — React JSX renders as native Linux widgets via Rust FFI. Use when creating Adwaita widgets, styling GTK with CSS-in-JS, or debugging GTKX components. |
| token_cost | 200 |
| keywords | ["gtkx","gtk","gtk4","adwaita","desktop","widget"] |
GTKX renders React components as native GTK4 widgets on Linux: @gtkx/react → FFI bridge → GTK4/GLib.
npx @gtkx/cli@latest create my-app
# Runs: npm run dev | npm run build | npm test (vitest + Xvfb)
Generates src/app.tsx, src/dev.tsx (HMR), src/index.tsx. Entry calls render(<App />, pkg.gtkx.appId).
Widgets require explicit two-way binding — not React state alone:
const [text, setText] = useState("");
<GtkEntry text={text} onChanged={(e) => setText(e.getText())} />;
// GtkSwitch: return true from onStateSet to accept change
Use compound components for child positioning — auto-generated from GIR:
<AdwToolbarView>
<AdwToolbarView.AddTopBar><AdwHeaderBar /></AdwToolbarView.AddTopBar>
</AdwToolbarView>
<GtkHeaderBar>
<GtkHeaderBar.PackStart><GtkButton iconName="go-previous-symbolic" /></GtkHeaderBar.PackStart>
<GtkHeaderBar.TitleWidget><GtkLabel label="Title" /></GtkHeaderBar.TitleWidget>
</GtkHeaderBar>
Common compound components: AddTopBar/AddBottomBar (ToolbarView), PackStart/PackEnd (HeaderBar/ActionBar), StartChild/EndChild (Paned/Flap).
<AdwApplicationWindow
title="App"
defaultWidth={800}
defaultHeight={600}
onClose={quit}
>
<AdwToolbarView>
<AdwToolbarView.AddTopBar>
<AdwHeaderBar>
<GtkHeaderBar.PackStart>
<GtkButton iconName="open-menu-symbolic" />
</GtkHeaderBar.PackStart>
<GtkHeaderBar.TitleWidget>
<AdwWindowTitle title="App" />
</GtkHeaderBar.TitleWidget>
</AdwHeaderBar>
</AdwToolbarView.AddTopBar>
<MainContent />
</AdwToolbarView>
</AdwApplicationWindow>
import { css } from "@gtkx/css";
<GtkButton
cssClasses={[
css`
background: #3584e4;
&:hover {
background: #1c71d8;
}
`,
]}
/>;
quit from @gtkx/react to close the applicationNativeError for failuresSee references/ for full widget catalog, tutorials, FFI bindings, styling, portals, testing, and deployment.
Renders markdown to self-contained HTML with a custom dark stylesheet and opens in browser. Use when previewing markdown documents, generating styled HTML from README or report files.
Inform the user what is happening — skip passive lookups
Manage version control with Jujutsu (jj) — no staging area, immediate changes, smart rebasing. Use when navigating history, squashing, or pushing to Git remotes.
Programmatic hunk selection for Jujutsu — split, commit, or squash specific hunks without interactive prompts. Use when making partial commits or selective squashes.
Gather facts from the web using evidence-first approach with mandatory citations. Use when researching topics, answering factual questions, or any task requiring web-sourced evidence.
Model minimum-move problems as BFS over a state space. Use when solving bucket pouring puzzles, sliding tiles, or any problem asking for the shortest sequence of moves to reach a goal.