wds

Search Wix Design System React component documentation for props, types, and examples.

11|1|Updated Jul 21, 2019
One-click install
npx skills add https://github.com/daliusd/cfg --skill wds
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wds
Source: https://github.com/daliusd/cfg/tree/main/.config/opencode/skills/wds
Command: npx skills add https://github.com/daliusd/cfg --skill wds

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides rapid, efficient access to the Wix Design System (WDS) documentation, enabling developers to quickly find and use WDS components for building React UIs.

Core Features & Use Cases

  • Component Discovery: Quickly find the right WDS component for UI needs using keyword searches.
  • Prop & Example Lookup: Retrieve detailed component props, TypeScript types, and code examples.
  • Icon Search: Efficiently search through over 400 WDS icons.
  • Use Case: You need to build a form with an input field and a button. You can ask the Skill "show me WDS form components" to find FormField and Input, then ask "show me props for Input" and "show me examples for Button" to get the necessary information to implement it.

Quick Start

Use the wds skill to find a Wix Design System component for creating a modal dialog.

Frequently Asked Questions about wds

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

FAQPage Schema
How do I find Wix Design System React components for my UI?

You can find Wix Design System React components by searching a locally cached reference. This Skill enables efficient component discovery by leveraging optimized file searching within the WDS documentation directory.

How do I look up props and TypeScript types for Wix Design System components?

You can retrieve detailed component props and TypeScript types by asking the Skill to show props for a specific component. It reads the locally cached WDS documentation to provide accurate type information.

Can I search for icons in the Wix Design System?

Yes, you can search through over 400 Wix icons. The Skill efficiently queries the locally cached WDS documentation to help you find the specific icon you need for your React application.

Does this Wix Design System reference require any external dependencies?

No external dependencies are required to use this reference. It operates by searching and reading files directly within your local `node_modules/@wix/design-system/dist/docs/` directory.

What is the best way to get code examples for Wix Design System components?

The best way to get code examples is to ask the Skill to show examples for a specific component. It retrieves practical usage patterns directly from the locally cached WDS documentation files.

Can I find advanced composition patterns for Wix React components?

Yes, the reference supports understanding advanced composition and integration patterns. It searches the WDS documentation to help you figure out how to combine multiple React components effectively.