🎨 Vibe Design System - Official monday.com UI resources for application development in React.js
Cursor rule Cursor
Provides general web accessibility guidelines for developing components in the @vibe/core library (under packages/core/). This rule covers adherence to WCAG, use of semantic HTML, correct ARIA attribute application, ensuring keyboard navigability, proper focus management, and context-appropriate labeling for form…
Cursor rule Cursor
Comprehensive guide for base components in @vibe/core library (BaseInput, BaseList, BaseListItem, InfoText, FieldLabel). Documents their usage patterns, accessibility requirements, form integration patterns, and what consumers need to provide for optimal accessibility and UX. These components serve as foundational…
Cursor rule Cursor
This rule provides guidance on the CI/CD pipeline, GitHub Actions workflows (defined in .github/workflows/), custom actions (in .github/actions/), versioning strategies, and release processes. Use this rule if the query involves CI/CD, build/test issues, release procedures, versioning questions, or if it references…
Cursor rule Cursor
This rule defines conventions for the internal structure of React components within the @vibe/core library (located in "packages/core" directory). Adhering to these conventions ensures consistency, readability, and maintainability across the codebase.
Cursor rule Cursor
Provides guidelines for managing dependencies in this monorepo. Use this rule when you are considering adding a new dependency, choosing between different packages, or need to understand constraints on package versions. It emphasizes minimizing new dependencies and checking for existing solutions first.
Cursor rule Cursor
Outlines file and directory structure conventions within the @vibe/core package (located in packages/core/), including top-level "src/" and component-specific organization (tests, stories, sub-components, hooks).
Cursor rule Cursor
Guidelines for using Box and Flex layout components in the @vibe/core library instead of custom CSS for spacing, borders, and flexbox layouts.
Cursor rule Cursor
This rule explains the monorepo's structure, including package locations, file organization conventions, creating new packages, details on scripts (both global and package-specific), shared configurations, and the use of tools like Lerna and Yarn Workspaces. Activate this rule when your query involves creating new…
Cursor rule Cursor
Defines naming conventions for files, directories, components, props, variables, types, and CSS classes within the @vibe/core package (located in packages/core/). Ensures consistency and readability across the codebase for React components and related TypeScript/SCSS files.
Cursor rule Cursor
Provides a systematic, research-driven workflow for implementing new Vibe components - for the @vibe/core library (located in "packages/core") - from initial research through final validation. Emphasizes studying existing patterns, following established conventions, and systematic progression through types, component…
Cursor rule Cursor
This rule provides a systematic approach for separating components from the @vibe/core package into standalone packages in the monorepo (e.g., @vibe/tooltip, @vibe/dialog). Following this pattern ensures consistency, proper enum handling, and maintainability.
Cursor rule Cursor
Use when creating interactive examples for Vibe's Storybook Playground (vibe.monday.com/playground) - including bug reproductions, component demonstrations, feasibility testing, or consumer examples. Triggered by keywords like "playground", "reproduce bug", "interactive example", "user reported an issue" or…
Cursor rule Cursor
This rule outlines the standard practices for creating, structuring, and utilizing React Context, primarily within the packages/core/ components. It covers the recommended file structure (placing context files in a context/ subdirectory), established naming conventions for context objects, provider components, and…
Cursor rule Cursor
Guides the creation and modification of Storybook files specifically within the 'packages/docs' package. It covers conventions, best practices, and helps answer questions about existing story implementations within 'packages/core'.
Cursor rule Cursor
Provides comprehensive guidelines for writing CSS Modules specifically for UI components within the @vibe/core library (under packages/core/src/components/). This rule covers file naming conventions (e.g., ComponentName.module.scss), CSS nesting, mandatory browser compatibility, strategies for adopting newer CSS APIs…
Cursor rule Cursor
Add a new icon to @vibe/icons package from a monday.com task. Automatically downloads the SVG file and integrates it into the icons package.
Cursor rule Cursor
This document outlines the steps required to add a new SVG icon to the @vibe/icons package. This ensures consistency and proper integration of new icons.
Cursor rule Cursor
Comprehensive guide for adding, modifying, and managing color tokens in the @vibe/style package. Covers SCSS theme files, build process, naming conventions, and special handling for hacker theme.