Beta Ui Ang with Cursor

Cursor is an AI-powered coding assistant that enhances developer productivity with smart autocompletions and inline documentation. You can integrate external documentation like ui-ang (Backbase Design System) for context while coding. Design System docs for Cursor are currently in beta and only available for web.

Steps to add ui-ang to Cursor

1. Open Cursor Settings and navigate to the Features section.
2. Scroll down and click Add New Doc.
3. Set the prefix field to end with your desired version ui-ang/v12/

  Name: ui-ang # You can choose any name you'd prefer
Entrypoint: https://backbase-ai.github.io/ui-ang/v12/index.html
Prefix: https://backbase-ai.github.io/ui-ang/v12/ # The trailing slash is important

Note: Available versions are v10, v11 and v12

4. Confirm your changes and wait for the indexing to complete.
5. Once indexing is done, you can ask ui-ang for help directly in Cursor!

Suggested practices for using ui-ang in Cursor

1. Always use @ui-ang when referencing the documentation in prompts.
2. Use Cursor composer in normal mode for now, as agent mode will often lose ui-ang context in sequential steps.
3. Adding some Cursor rules can greatly benefit your results. Here are two simple rules to start:

  Never use bootstrap components, always use ui-ang components when you have the documentation available. You can use the utility classes that bootstrap provides, such as margin, grid, etc. 
At the end of the prompt, always include the storybookUrl als a clickable link for each component used with the following pattern:
Design System Documentation:
* Storybook docs for Button
* Storybook docs for Chip

Beta and availability for mobile

Design System docs for Cursor are currently in beta and only available for web (ui-ang v10, v11 and v12). There are no docs for mobile just yet, this will be investigated in the future. For any feedback, internal Backbase users can reach out to #s-cursor.