4.37.0

Cursor IDE Setup

Configure Cursor IDE for optimal Skylab SDK development

Quick Setup

This guide helps developers configure Cursor IDE for optimal development with the @avalara/skylab-sdk library.

Configure Cursor IDE Documentation

  1. Open Command Palette (Cmd/Ctrl + Shift + P)
  2. Type "Add New Custom Docs" and select it
  3. Add your documentation source:
    • Name: Skylab SDK Docs
    • URL: https://skylabsdk.avalara.io/
  4. Save the configuration

Using the Library

Installation & Usage

For complete installation instructions, component usage examples, and API documentation, see the official Skylab SDK documentation.

Cursor AI Features

Documentation Queries

Use the @Docs feature to search your documentation. For more information about @Docs, see the Cursor @Docs documentation.

  • @Skylab SDK s-alert usage - Find alert component documentation
  • @Skylab SDK button examples - Find button usage examples
  • @Skylab SDK sidenav full documentation page - Get link to the full docsite page for aui-sidenav

Code Generation

Use Cursor's AI to generate component code:

  • "Add a large loader. Add a medium money icon"
  • "Add an s-alert component with info status. It should say 'hello'"

Project Rules

Try adding these rules to your project's .cursorrules file for consistent development:

# Skylab SDK Development Rules ## Library Usage - Use `@avalara/skylab-sdk` for UI components - Any components that begin with `s-` or `aui-` are from the Skylab SDK - Import components from the main package: `import { Components } from '@avalara/skylab-sdk'` - Use kebab-case for custom elements (e.g. `s-alert`, `aui-header`) ## Native HTML elements - Skylab SDK lets you use some native HTML elements as-is, but provides styling (e.g. `button`, `form`) - For more complex elements, Skylab SDK provides components (e.g. `s-select``) - Input elements fall into both categories. For simple cases, use native `input`. For complex cases, use `s-input-extended`. ## Documentation - Always reference the official documentation at https://skylabsdk.avalara.io/ - Use @Docs to search for component usage examples and API documentation - Check component props and events in the TypeScript definitions - Follow the design system guidelines in the documentation

Development Resources