WDS Documentation Navigator
0The WDS Documentation Navigator is a Node.js helper script designed for developers using the @wix/design-system. It simplifies the process of finding components, examples, and icons within the design system’s library.
23290Updated Today
Documentation
Quick InstallView Source
$ npx skills add https://github.com/wix/skills --skill wds-docsOverview
About This Skill
The wix-design-system skill is an AI agent tool that provides instant access to Wix Design System documentation, helping developers quickly find component properties, usage examples, and icon references. Integrated with AI agents like Cursor, Claude Code, and Gemini CLI, it eliminates manual documentation searches and accelerates development workflows. The skill works within the new Wix CLI ecosystem and supports any agent built on the Agent Skills specification. Developers building Wix app extensions or using the @wix/design-system library can reference component APIs and examples directly during coding without leaving their editor.
How to Use
Install @wix/design-system first, then add the skill using the provided command.
Use Cases
Find components by keyword
Get props and example list for specific components
Retrieve specific examples by name
Search for icons in the design system
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/wix/skills --skill wds-docsAlternative Install (Git Clone)
git clone https://github.com/wix/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Act as a WDS Documentation Navigator. Help me find [COMPONENT_NAME] or [EXAMPLE_TYPE] in the @wix/design-system library. Include relevant code snippets, usage examples, and links to the official documentation. Focus on [USE_CASE] and ensure the output is tailored for a [DEVELOPER_ROLE] working on [PROJECT_TYPE] projects.
Example Output
### WDS Documentation Navigator
#### 🔍 **Button Component**
**Description:** Primary, secondary, and tertiary button styles with icon support.
**Code Snippet:**
```jsx
import { Button } from '@wix/design-system';
<Button priority="primary" onClick={() => console.log('Clicked!')}>
Primary Action
</Button>
```
**Props:**
- `priority`: `primary`, `secondary`, `tertiary`
- `size`: `small`, `medium`, `large`
- `prefixIcon`: ReactNode
- `suffixIcon`: ReactNode
**Examples:**
- [Primary Button Example](https://wix.com/design-system/button/primary)
- [Icon Button Example](https://wix.com/design-system/button/icon)
**Icons:**
- `Add` (from `@wix/design-system-icons`)
---
#### 📌 **Usage Tips**
- Use `priority="primary"` for main CTAs.
- Avoid mixing `size` across buttons in the same layout.
- Icons improve UX but should not replace text labels.
Need more? Ask for specific examples or edge cases!Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan