[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7EJRF9QKXFSWVGPA12RQKSS":3,"skill-same:01M7EJRF9QKXFSWVGPA12RQKSS":44},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":14,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":30,"install":31,"resources":43},"01M7EJRF9QKXFSWVGPA12RQKSS","pick-ui-library",null,"Use only when explicitly invoked as \u002Fpick-ui-library or by name, never through automatic task matching. Recommends one maintained library for a React or web frontend task: primitives, toasts, charts, drag and drop, virtualized lists, animation, state or styling helpers. React and web only, not Quickshell, QML, Hyprland or terminal UI. Motion method is animate, CSS is css-ui, React behaviour is react-ui.","qsmark-labs\u002Fqsm-marketplace","qsmark-labs","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F348383745?v=4","01M7EJDK5MKZ67A7JBGC3ZB1RP","QSM-LABS","01M7EJDK6649PCGA2ENGFMFA7E",0,"GPL-3.0","https:\u002F\u002Fgithub.com\u002Fqsmark-labs\u002Fqsm-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fqsm-uix\u002Fskills\u002Fpick-ui-library\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: pick-ui-library\ndescription: \"Use only when explicitly invoked as \u002Fpick-ui-library or by name, never through automatic task matching. Recommends one maintained library for a React or web frontend task: primitives, toasts, charts, drag and drop, virtualized lists, animation, state or styling helpers. React and web only, not Quickshell, QML, Hyprland or terminal UI. Motion method is animate, CSS is css-ui, React behaviour is react-ui.\"\ndisable-model-invocation: true\n---\n\n# Picking The Right Library\n\nA lookup for React and web work. Given a task (\"I need toasts\"), match it to the list and recommend\none library. The picks are deliberate and taste-driven: do not substitute others unless the user\nasks or the task is not covered. Hand-rolling what a maintained library does is the failure this\nskill prevents.\n\n## How to use it\n\n1. Identify the task, not the library the user named. \"A dropdown\" is a UI-primitives task even if\n   they asked about something else.\n2. Check `package.json` first. A listed library already installed is used. A competitor\n   (react-window instead of Virtuoso) is flagged but not swapped unless asked.\n3. Recommend one library, say what it is for in one sentence, and install and wire it when that is\n   part of the request. A clear answer is not a menu.\n4. A task the list does not cover is said so explicitly; recommend from your own knowledge and make\n   clear you left the list.\n\n## The list\n\n| Task | Library |\n| --- | --- |\n| Unstyled accessible primitives (dialogs, popovers, menus, selects) | [base-ui](https:\u002F\u002Fbase-ui.com) |\n| Command menu (cmd-K palette) | [cmdk](https:\u002F\u002Fcmdk.paco.me) |\n| Toasts and notifications | [Sonner](https:\u002F\u002Fsonner.emilkowal.ski) |\n| One-time password and verification code input | [input-otp](https:\u002F\u002Finput-otp.rodz.dev) |\n| Control panels and tweakable GUIs | [Leva](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fleva), alternative [dialkit](https:\u002F\u002Fjoshpuckett.me\u002Fdialkit) |\n| General animation (springs, layout, enter and exit) | [motion](https:\u002F\u002Fmotion.dev) |\n| Animated numbers (counters, prices, stats) | [NumberFlow](https:\u002F\u002Fnumber-flow.barvian.me) |\n| Animated text | [torph](https:\u002F\u002Ftorph.lochie.me\u002F) |\n| 3D globes | [Cobe](https:\u002F\u002Fcobe.vercel.app) |\n| Dynamic OG images (HTML and CSS to SVG or PNG) | [Satori](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fsatori) |\n| Syntax highlighting | [shiki](https:\u002F\u002Fshiki.style) |\n| Live streaming charts that scroll with time | [Liveline](https:\u002F\u002Fgithub.com\u002Fbenjitaylor\u002Fliveline) |\n| Every other chart | [recharts](https:\u002F\u002Frecharts.org) |\n| Drag and drop | [dnd kit](https:\u002F\u002Fdndkit.com) |\n| Long lists and large tables | [Virtuoso](https:\u002F\u002Fvirtuoso.dev) |\n| State management | [zustand](https:\u002F\u002Fzustand.docs.pmnd.rs) |\n| Conditional `className` strings | [clsx](https:\u002F\u002Fgithub.com\u002Flukeed\u002Fclsx) |\n| Typed variant styling for Tailwind | [cva](https:\u002F\u002Fcva.style) |\n| Theme switching without a flash | [next-themes](https:\u002F\u002Fgithub.com\u002Fpacocoursey\u002Fnext-themes) |\n\nReach for motion only for springs, layout and exit animations or gesture-driven values; a hover or\nfade is a plain CSS transition. clsx is for ad-hoc conditions, cva when a component has real\nvariants (size, intent, state); they compose.\n\n## Mismatches to catch\n\n- Toasts built by hand or with a modal library: Sonner.\n- A `div` dropdown or dialog with manual focus handling: base-ui, which brings focus trapping and\n  dismissal.\n- A number animated by re-rendering text: NumberFlow.\n- A 1,000-row list rendered directly: Virtuoso before pagination hacks.\n- Shared state passed as a web of props: zustand.\n- Template-literal className ternaries three deep: clsx, or cva when variant-shaped.\n\n## Say it in the reply\n\nThe one library, the one-sentence reason, what `package.json` already held, and whether the task\nwas outside the list.\n\nSource: emilkowalski\u002Fskills pick-ui-library (MIT).\n","# Picking The Right Library\n\nA lookup for React and web work. Given a task (\"I need toasts\"), match it to the list and recommend\none library. The picks are deliberate and taste-driven: do not substitute others unless the user\nasks or the task is not covered. Hand-rolling what a maintained library does is the failure this\nskill prevents.\n\n## How to use it\n\n1. Identify the task, not the library the user named. \"A dropdown\" is a UI-primitives task even if\n   they asked about something else.\n2. Check `package.json` first. A listed library already installed is used. A competitor\n   (react-window instead of Virtuoso) is flagged but not swapped unless asked.\n3. Recommend one library, say what it is for in one sentence, and install and wire it when that is\n   part of the request. A clear answer is not a menu.\n4. A task the list does not cover is said so explicitly; recommend from your own knowledge and make\n   clear you left the list.\n\n## The list\n\n| Task | Library |\n| --- | --- |\n| Unstyled accessible primitives (dialogs, popovers, menus, selects) | [base-ui](https:\u002F\u002Fbase-ui.com) |\n| Command menu (cmd-K palette) | [cmdk](https:\u002F\u002Fcmdk.paco.me) |\n| Toasts and notifications | [Sonner](https:\u002F\u002Fsonner.emilkowal.ski) |\n| One-time password and verification code input | [input-otp](https:\u002F\u002Finput-otp.rodz.dev) |\n| Control panels and tweakable GUIs | [Leva](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fleva), alternative [dialkit](https:\u002F\u002Fjoshpuckett.me\u002Fdialkit) |\n| General animation (springs, layout, enter and exit) | [motion](https:\u002F\u002Fmotion.dev) |\n| Animated numbers (counters, prices, stats) | [NumberFlow](https:\u002F\u002Fnumber-flow.barvian.me) |\n| Animated text | [torph](https:\u002F\u002Ftorph.lochie.me\u002F) |\n| 3D globes | [Cobe](https:\u002F\u002Fcobe.vercel.app) |\n| Dynamic OG images (HTML and CSS to SVG or PNG) | [Satori](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fsatori) |\n| Syntax highlighting | [shiki](https:\u002F\u002Fshiki.style) |\n| Live streaming charts that scroll with time | [Liveline](https:\u002F\u002Fgithub.com\u002Fbenjitaylor\u002Fliveline) |\n| Every other chart | [recharts](https:\u002F\u002Frecharts.org) |\n| Drag and drop | [dnd kit](https:\u002F\u002Fdndkit.com) |\n| Long lists and large tables | [Virtuoso](https:\u002F\u002Fvirtuoso.dev) |\n| State management | [zustand](https:\u002F\u002Fzustand.docs.pmnd.rs) |\n| Conditional `className` strings | [clsx](https:\u002F\u002Fgithub.com\u002Flukeed\u002Fclsx) |\n| Typed variant styling for Tailwind | [cva](https:\u002F\u002Fcva.style) |\n| Theme switching without a flash | [next-themes](https:\u002F\u002Fgithub.com\u002Fpacocoursey\u002Fnext-themes) |\n\nReach for motion only for springs, layout and exit animations or gesture-driven values; a hover or\nfade is a plain CSS transition. clsx is for ad-hoc conditions, cva when a component has real\nvariants (size, intent, state); they compose.\n\n## Mismatches to catch\n\n- Toasts built by hand or with a modal library: Sonner.\n- A `div` dropdown or dialog with manual focus handling: base-ui, which brings focus trapping and\n  dismissal.\n- A number animated by re-rendering text: NumberFlow.\n- A 1,000-row list rendered directly: Virtuoso before pagination hacks.\n- Shared state passed as a web of props: zustand.\n- Template-literal className ternaries three deep: clsx, or cva when variant-shaped.\n\n## Say it in the reply\n\nThe one library, the one-sentence reason, what `package.json` already held, and whether the task\nwas outside the list.\n\nSource: emilkowalski\u002Fskills pick-ui-library (MIT).\n",{"name":5,"description":7,"disable-model-invocation":24},true,"main","c385fc50aadaee7296445e049153ce0560a9c80c","plugins\u002Fqsm-uix\u002Fskills\u002Fpick-ui-library","https:\u002F\u002Fgithub.com\u002Fqsmark-labs\u002Fqsm-marketplace","https:\u002F\u002Fgithub.com\u002Fqsmark-labs","2026-11-13 18:31:51",{"source":8,"skillName":5,"commands":32,"prompt":42,"zipAvailable":24},[33,36,39],{"tool":34,"command":35},"npx","npx skills add qsmark-labs\u002Fqsm-marketplace --skill pick-ui-library",{"tool":37,"command":38},"bunx","bunx skills add qsmark-labs\u002Fqsm-marketplace --skill pick-ui-library",{"tool":40,"command":41},"pnpm","pnpm dlx skills add qsmark-labs\u002Fqsm-marketplace --skill pick-ui-library","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fqsmark-labs\u002Fqsm-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fqsm-uix\u002Fskills\u002Fpick-ui-library\u002FSKILL.md",[],[45,52,59,66,73,80],{"skillNo":46,"name":47,"nameZh":6,"description":48,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":49,"categories":50,"keywords":51,"publishedAt":19},"01M7EJWPJ0B4E1P148MWQ3GMR8","worktrunk","Use when working with git worktrees or wt (worktrunk): creating, switching, merging or removing a branch workspace, configuring wt (project or personal config, workflow hooks around switch, commit and merge, commit-message generation, hook approvals), or a wt command that failed. Triggers: make a worktree for this branch, wt merge, wt remove, configure wt, .config\u002Fwt.toml, run tests before merge, install deps when a worktree is created, wt hook, wt switch does not cd, nastav wt, wt nefunguje.","https:\u002F\u002Fgithub.com\u002Fqsmark-labs\u002Fqsm-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fqsm-worktrunk\u002Fskills\u002Fworktrunk\u002FSKILL.md",[],[],{"skillNo":53,"name":54,"nameZh":6,"description":55,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":56,"categories":57,"keywords":58,"publishedAt":19},"01M7EJWD4F683TF21N89JGWZB2","web-ladder","Use when a task needs something the internet holds: look something up, search the web, find which page answers a question, read a page, check a library's current docs, a page that needs a browser or shows a captcha. Runs one research loop: searxng search, keywords, cases, search again up to three times, Context7 for a library, Tavily when the keywords will not come, one page in a browser, the person on a wall. Triggers: look this up, search the web, find out online, read this page, check the docs, the page is blocked, captcha, najdi na webu, otevri tu stranku. A multi-round question goes to the qsm-web:web-research agent; one tool's commands are its own skill (searxng, browserbox, opensrc).","https:\u002F\u002Fgithub.com\u002Fqsmark-labs\u002Fqsm-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fqsm-web\u002Fskills\u002Fweb-ladder\u002FSKILL.md",[],[],{"skillNo":60,"name":61,"nameZh":6,"description":62,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":65,"publishedAt":19},"01M7EJW9G0K6AS5Z4H0B0K6NDB","searxng","Use when running a web search through the person's own SearXNG instance with qsm-web searxng: choosing a search profile or engines, the instance, time range or language, reading its JSON, a suspended engine. Triggers: search with searxng, qsm-web searxng, search profile, niche search, academic search, IT search, vyhledavaci profil, searxng is down, which engines. The research loop around it is the web-ladder skill.","https:\u002F\u002Fgithub.com\u002Fqsmark-labs\u002Fqsm-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fqsm-web\u002Fskills\u002Fsearxng\u002FSKILL.md",[],[],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":72,"publishedAt":19},"01M7EJW40RD3DRBQVVCW6K7NMG","opensrc","Use when the source code of an open-source library or repository is needed on disk to read: the docs are silent, the behaviour must be checked in code, the version the project pins. Runs qsm-web opensrc get with a package spec or a repository address. Triggers: get the source of this package, clone this library, read the library's code, qsm-web opensrc, stahni zdrojak knihovny. Library docs are the Context7 skill; the research loop is the web-ladder skill.","https:\u002F\u002Fgithub.com\u002Fqsmark-labs\u002Fqsm-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fqsm-web\u002Fskills\u002Fopensrc\u002FSKILL.md",[],[],{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":19},"01M7EJVZWD6J7W91G69GMBWBQS","browserbox","Use when one page needs a real browser through qsm-web browserbox: content built by script, a page that blocks plain fetching, a captcha to solve or hand to the person, a scripted sequence of clicks, a login the person is present for. Triggers: open it in a browser, the page is empty without JavaScript, captcha, take over the browser, run these steps on the page, log in to this site, browserbox. When to reach for a browser at all is the web-ladder skill.","https:\u002F\u002Fgithub.com\u002Fqsmark-labs\u002Fqsm-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fqsm-web\u002Fskills\u002Fbrowserbox\u002FSKILL.md",[],[],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":19},"01M7EJVSZC1E8ZGVE8KXVFPR9S","usage","Use when the user wants a review of how they use Claude Code, or setup hands over after a first install: review my Claude Code usage, audit my setup, what does my setup cost, where did my tokens go, clean up my Claude Code, usage report, zkontroluj moje pouzivani. One walkthrough of four stages (machine, work, habits, extensions), questions after each, then one plan. A question about one topic (which hooks are slow) goes to that topic's skill; this session's tokens alone is `\u002Fqsm-usage`.","https:\u002F\u002Fgithub.com\u002Fqsmark-labs\u002Fqsm-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fqsm-usage\u002Fskills\u002Fusage\u002FSKILL.md",[],[]]