Configure npm package imports and React refs in Jac client components.
npx skills add https://github.com/PMN123/trapdoor --skill jac-npm-packages-pmn123
Please help me install this Agent Skill. Skill: jac-npm-packages Source: https://github.com/PMN123/trapdoor/tree/main/.agents/skills/jac-npm-packages Command: npx skills add https://github.com/PMN123/trapdoor --skill jac-npm-packages-pmn123
[dependencies.npm] in jac.toml, or patch it automatically with jac install --npm <pkg>. - Import Syntax: Use double-quoted, named-only imports like import from "recharts" { LineChart } inside .jac client files. - Typed Refs: Declare has inputRef: Ref[HTMLInputElement] = Ref() fields that lower to useRef, plus trailing Ref parameters that lower to forwardRef for radix asChild trigger children. - Use Case: When adding a charting library like recharts to a Jac app and wiring a focusable input, this Skill provides the exact toml entries, import statements, and ref patterns that compile correctly. ## Quick Start Add the sonner npm package to my Jac project and show me how to import its toast function in a client component.High-intent search queries and answers about installing and using this skill.
Declare packages under `[dependencies.npm]` in jac.toml for regular dependencies or `[dependencies.npm.dev]` for build tools, then run `jac install`. Alternatively, run `jac install --npm <pkg>` or `jac install --npm --dev <pkg>` to patch jac.toml automatically.
Use named imports with the package name in double quotes, such as `import from "recharts" { LineChart, XAxis }`. Only named imports are supported; default and namespace imports are not available in this syntax.
Declare a typed field like `has inputRef: Ref[HTMLInputElement] = Ref()` instead of importing useRef, which is auto-imported by the compiler. Access the value through `.current`, which is typed `T | None` and requires a null check before use.
Radix trigger components attach a positioning ref to their child via asChild, so the child must forward refs. Add a trailing parameter typed `Ref` to your component, which lowers to React forwardRef and lets the trigger anchor its menu.
This is a known false positive when a component's trailing ref parameter has no default value, because the `ref=` JSX attribute is reserved and not counted toward params. Adding a `= Ref()` default silences the error; build output is correct either way.
nihalnihalaniConfigure npm package imports and React refs in Jac client components.
nihalnihalaniWrite client-side Jac UI components with reactive state, JSX rendering, and typed event handlers.
nihalnihalaniCompose Jac UI pages from shadcn primitives installed via jac install --shadcn.
3horizonsInstall, configure, and troubleshoot Red Hat Developer Hub on Azure AKS and OpenShift.