wds-docs

Look up Wix Design System components, props, examples, and icons from local documentation.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/yaelbro/Shelf-Control --skill wds-docs-yaelbro
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wds-docs
Source: https://github.com/yaelbro/Shelf-Control/tree/main/.agents/skills/wds-docs
Command: npx skills add https://github.com/yaelbro/Shelf-Control --skill wds-docs-yaelbro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wix/design-system, @wix/wix-ui-icons-common, and includes scripts (resource) and references (resource) components.

What problem does it solve? When building UI with @wix/design-system, developers waste time hunting through large documentation files to find the right component, its props, and working code examples. This Skill provides fast, focused lookups directly from the installed package's docs. ## Core Features & Use Cases - Component Search: Find WDS components by keyword with descriptions and usage guidance (do's and don'ts). - Props & Examples Lookup: Retrieve full prop lists with types and descriptions, plus ready-to-use JSX examples for any component. - Icon Discovery: Search the @wix/wix-ui-icons-common catalog, including Small variants. - Use Case: You need to build a settings page with a toggle and a modal. Search for the right components, pull the exact props for ToggleSwitch and Modal, and copy a working JSX example into your code. ## Quick Start Ask the assistant to show you the props and a loading-state example for the WDS Button component using the wds-docs skill.

Frequently Asked Questions about wds-docs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find the right Wix Design System component for my UI?

Run the wds.js search command with keywords describing what you need, such as "form input validation" or "modal dialog". It returns matching component names with descriptions and usage guidance, with multiple keywords OR-matched.

How do I get props and examples for a WDS component?

Run "node wds.js component Button" to get the full props list with types and descriptions plus all available examples. Then run "node wds.js example Button \"Loading state\"" to retrieve a specific JSX example.

Does this work in monorepos or with pnpm and yarn workspaces?

Yes. The helper script first uses Node's module resolver, which handles symlinks, pnpm, and yarn PnP, then falls back to walking up the directory tree looking for node_modules. It locates @wix/design-system docs in monorepo layouts.

What if the wds.js script is unavailable or fails?

You can read the docs directly at node_modules/@wix/design-system/dist/docs/. Grep components.md or icons.md for keywords, then read specific sections of components/{Name}Props.md or {Name}Examples.md with offset and limit.

Where do WDS icons come from and do they have size variants?

Icons come from the @wix/wix-ui-icons-common package. Each icon has a Small variant, so Add is paired with AddSmall. Use the icons command with one or more query terms to search the catalog.