skills.rest
ESSSoWhat
ESSSoWhatCOMMUNITY
Explore all skills by this author →
GitHub

wds-docs

Navigates Wix Design System documentation to retrieve component props and JSX examples.

Updated Feb 21, 2026
Search Tags:#design system#icons#react components#ui documentation#wix#spacing tokens#jsx examples
One-click install
npx skills add https://github.com/ESSSoWhat/live-translate-realtime-dubbing --skill wds-docs-esssowhat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wds-docs
Source: https://github.com/ESSSoWhat/live-translate-realtime-dubbing/tree/main/wix-app/np/.agents/skills/wds-docs
Command: npx skills add https://github.com/ESSSoWhat/live-translate-realtime-dubbing --skill wds-docs-esssowhat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wix/design-system, @wix/wix-ui-icons-common.

What problem does it solve? Looking up Wix Design System components in large documentation files wastes context and time, since files range from 200 to 8000+ lines and cannot be read in full. ## Core Features & Use Cases - Staged Discovery Flow: Grep components.md to find components, list example headings, then read only the specific example section needed. - Props and Icon Lookup: Retrieve component props from Props.md files and search icons.md for icon names from @wix/wix-ui-icons-common. - Design-to-Component Mapping: Convert design elements and pixel spacing values into WDS components and SP1-SP6 spacing tokens. - Use Case: When building a product page with @wix/design-system, find the Card component, list its examples, and fetch only the "With media" JSX snippet instead of reading 1500+ lines. ## Quick Start Ask which WDS component to use for a modal dialog and request its props and a usage example.

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?▼

Grep components.md in node_modules/@wix/design-system/dist/docs/ with keywords describing your need, such as "form", "modal", or "table". The search returns component names with descriptions and do/don't guidance.

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

Read the component's Props.md file if under 100 lines, or grep large files like BoxProps.md. Then grep "^### " in the Examples.md file to list example headings and read only the section you need with an offset.

Does WDS support spacing tokens instead of pixel values?▼

Yes, WDS uses SP1 through SP6 tokens for gap, padding, and margin. For example, SP2 equals 12px in Classic and 8px in Studio. Do not use SP tokens for width or height.

Why should I avoid reading WDS documentation files directly?▼

Files range from 200 to over 8000 lines, such as BoxProps.md, which exhausts context quickly. The staged flow of grep, list headings, then offset read reduces consumption to roughly 80 lines per lookup.

How do I find icon names in @wix/wix-ui-icons-common?▼

Grep icons.md in the docs directory for the icon concept, such as "Add", "Edit", or "Delete". The result confirms the icon exists so you can import it from @wix/wix-ui-icons-common.

Related Skills

Explore More Software Engineering Skills→
wixwix
25

wix-cli-site-plugin

Create Wix Site Plugins that inject custom elements into UI slots.

Official
Advanced
partme-aipartme-ai
610

react

Provides React development guidance covering components, JSX hooks, props, state, context, and performance optimization.

Official
Intermediate
LimaTechnologiesLimaTechnologies

ui-ux-audit

Automate UI/UX audits for accessibility, responsiveness, and design-system consistency.

Community
Basic
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate