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 "demonstrate".
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'.
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 with fallbacks, the exclusive use of design tokens from `@vibe/style` (via CSS custom properties like `var(--primary-text-color)`), discouraging mixin usage from `@vibe/style`, typography best practices (using `Text`/`Heading` components instead of direct font tokens), `camelCase` class naming, and common anti-patterns like avoiding theme-specific styles directly in component SCSS, never using `:global`, and never using `!important`. Activate this rule when working with `.module.scss` files in `packages/core/src/components/` or when styling Vibe core components.
keys and endpoints
- **ALWAYS** support environment variable overrides
- **ALWAYS** include configuration examples in documentation
### 2. Configuration Types
- **ALWAYS** use descriptive type names ending with `OptionsType`
- **ALWAYS** extend base configuration interfaces
Quality
- No `console.log` in production code
- Always handle loading and error states
- Write self-documenting code
- Keep functions focused and small
### Reusability Focus
- Always check existing components before creating
Note: `paginationOpts` is an object with the following properties:
- `numItems`: the maximum number of documents to return (the validator is `v.number()`)
- `cursor`: the cursor to use to fetch the next