wds-docs

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

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/nirganon/nir-beauty --skill wds-docs-nirganon
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wds-docs
Source: https://github.com/nirganon/nir-beauty/tree/main/.agents/skills/wds-docs
Command: npx skills add https://github.com/nirganon/nir-beauty --skill wds-docs-nirganon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wix/design-system, 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 usage examples. This Skill provides fast, focused lookups against the WDS docs bundled in node_modules. ## Core Features & Use Cases - Component Search: Find WDS components by keyword with descriptions and usage guidance (do/don't rules). - Props and 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 a modal dialog with a form. Search for "modal", get the Modal and CustomModalLayout props, pull a working JSX example, and find the right icons — all without leaving your project. ## Quick Start Ask the assistant to show you the props and a usage 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 "table" or "form input validation". It returns matching component names with descriptions and do/don't usage guidance from the WDS docs.

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

Use the component command with the component name, like "wds.js component Button", to get the full props list with types and descriptions plus all available examples. Then request a specific example by name to get its JSX code.

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 to find node_modules. It requires @wix/design-system to be installed in the project.

Where do WDS icons come from and how do I search them?

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

What happens if the wds.js script is unavailable?

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 per-component Props and Examples files with offset and limit.