This repository provides resources, samples, and tools to help developers build Adobe Express Add-ons and effectively use Cursor rules for maintaining code quality and following best practices.

• Working with Add-ons
• Sample Add-ons
• Cursor Rules
• Getting Started
• Resources

An overview of patterns and best practices for working with add-ons in Adobe Express that you should read before you start building your own add-ons.

The repository includes sample Adobe Express add-ons that serve as starting points for your add-on development:

A simple add-on demonstrating how to use Spectrum Web Components (SWC) in a JavaScript-based project:

• Proper theme integration for Adobe Express
• Implementation of various Spectrum Web Components
• Webpack configuration for SWC compatibility
• No document sandbox implementation

A more complex add-on using TypeScript, Lit, and Document Sandbox:

• Template gallery with multiple card types
• Custom card design capabilities
• Color customization with the Express color picker
• Document Sandbox API implementation
• TypeScript interfaces for type safety

The repository contains a collection of Cursor rules in the .cursor/rules directory that can be used to guide development and maintain quality:

• Adobe Spectrum Web Components: Guidelines for using Spectrum Web Components correctly
• Lit Framework: Rules for building web components with Lit
• React Spectrum: Usage guidelines for React Spectrum components

• Add-on Webpack Configuration: Ready-to-use webpack configurations for various tech stacks:
  • React + JavaScript (with/without Document Sandbox)
  • React + TypeScript (with/without Document Sandbox)
  • Spectrum Web Components + JavaScript (with/without Document Sandbox)
  • Spectrum Web Components + TypeScript (with/without Document Sandbox)

• General Coding Rules: Best practices for clean, readable code
• JavaScript Specific Rules: JavaScript coding conventions
• React Guidelines: Best practices for React development
• Documentation Guidelines: How to write effective documentation

1. Clone this repository:

   git clone https://github.com/yourusername/hackathon-helpers.git
   cd hackathon-helpers
   

2. Navigate to a sample add-on:

   cd sample-add-ons/swc-basic-js-addon
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run start
   

5. Load the add-on in Adobe Express:

   • Open Adobe Express
   • Navigate to the Add-ons panel
   • Click on "Your Add-ons"
   • Enable Developer Mode
   • Click "Load Local Add-on" and enter the localhost URL

To use the Cursor rules in your project:

1. Create a .cursor/rules directory in your project root
2. Copy the relevant rule files from this repository
3. Configure your Cursor editor to use these rules

• Adobe Express Add-ons Documentation

  • Express Add-ons Public Documentation Indexing - use this link for indexing the public documentation in Cursor

• How-to Guides

• Spectrum Web Components

• Building Add-ons with Lit & Typescript Tutorial

• Cursor Editor

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.