skills.rest
thisisjaymehta
thisisjaymehtaCOMMUNITY
Explore all skills by this author →
Website𝕏@thisisjaymehtaGitHub

wds-docs

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

Updated Mar 20, 2026
Search Tags:#design tokens#react components#component props#ui documentation#wix design system#wds#jsx examples
One-click install
npx skills add https://github.com/thisisjaymehta/login-with-email-test --skill wds-docs-thisisjaymehta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wds-docs
Source: https://github.com/thisisjaymehta/login-with-email-test/tree/main/.agents/skills/wds-docs
Command: npx skills add https://github.com/thisisjaymehta/login-with-email-test --skill wds-docs-thisisjaymehta

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Wix Design System documentation files are 200-900+ lines long, making full reads wasteful and slow. This Skill provides a staged grep-and-offset workflow that locates the exact component, props, and example code needed without loading entire files. ## Core Features & Use Cases - Staged Component Discovery: Grep components.md by keyword to find the right WDS component, then fetch props and example lists on demand. - Targeted Example Retrieval: Use line-number offsets to read only the specific JSX example needed (~30-50 lines instead of 1500+). - Icon and Spacing Lookup: Search icons.md for icon names and convert pixel values to SP1-SP6 spacing tokens for Box layout props. - Use Case: When building a product page with @wix/design-system, quickly find the Card component, list its examples, and pull only the "With media" JSX snippet. ## Quick Start Ask the AI to show the props and a loading-state example for the WDS Button component from @wix/design-system.

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 the WDS docs folder with feature keywords like "form", "modal", or "table". The staged workflow returns the component name, description, and do/don'ts before you read any props or examples.

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

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

Does this work without @wix/design-system installed?▼

No. The documentation is read from node_modules/@wix/design-system/dist/docs/, so the package must be installed in the project. Icons additionally come from @wix/wix-ui-icons-common.

How do I convert pixel spacing to WDS SP tokens?▼

Map pixels to the nearest SP token: SP1 is 6px (Classic) or 4px (Studio), scaling up to SP6 at 36px or 24px. Use SP tokens only for gap, padding, and margin props on Box, not for width or height.

Why should I avoid reading WDS docs files directly?▼

Files range from 200 to 8000+ lines (BoxProps.md alone exceeds 8000). Reading them fully wastes context; the grep-then-offset approach retrieves the same information in roughly 80 lines instead of 1500+.

Related Skills

Explore More Software Engineering Skills→
ESSSoWhatESSSoWhat

wds-docs

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

Community
Intermediate
christophevgchristophevg
1

baseweb-develop

Implement async Quart backend endpoints, Vue/Vuetify components, and Socket.IO handlers for baseweb apps.

Community
Advanced
ruan-catruan-cat

beautiful-component-design

Standardize uni-app wot-design-uni component styling with rpx sizing and UnoCSS conventions.

Community
Intermediate
mcgilly17mcgilly17
2

Storybook Patterns

Document and test UI components with Storybook 7+ stories.

Community
Intermediate