feat(design-system): add two skills deslop, get my pr comments [AR-26986] (#177)

Author: mmurawski-dn

.cursor/notepads/add-play-tests.md

@@ -11,17 +11,3 @@ For each story without `play`, generate an interaction test following these rule
 5. Await all interactions: `await userEvent.click(...)`, `await expect(...)`
 6. Don't test implementation details (no data attributes, no CSS selectors), unless it's a required part of the story
 7. Test user-visible behavior: render check, click interactions, callback assertions
-
-For stories with callback args, verify the callback was called:
-
-```tsx
-await userEvent.click(button);
-await expect(args.onClick).toHaveBeenCalledOnce();
-```
-
-For stories showing disabled state, verify interactions are blocked:
-
-```tsx
-await userEvent.click(element, { pointerEventsCheck: 0 });
-await expect(args.onClick).not.toHaveBeenCalled();
-```

.cursor/notepads/check-ark-ui.md

@@ -5,10 +5,10 @@ I'm about to build a component. Before writing custom code, check if Ark UI alre
 Steps:
 
 1. Call the Ark UI MCP `list_components` tool with `framework: "react"` to get all available components.
-2. If a matching component exists:
-   - Call `get_component_props` with `framework: "react"` and the component name to show me the full API.
-   - Call `get_example` with `framework: "react"`, the component name, and `exampleId: "basic"` to show a usage example.
-   - Call `styling_guide` with the component name to show data attributes I can use in SCSS.
+2. If a matching component exists (framework: "react"):
+   - Get the components name and get the full API.
+   - Get the basic usage example.
+   - Get a styling guide with the component name to show data attributes I can use in SCSS.
 3. If no match exists, tell me, so I know to build custom.
 
 When showing the Ark UI API, highlight:

.cursor/rules/storybook.mdc

@@ -41,6 +41,21 @@ export const Default: Story = {
 };
 ```
 
+For stories with callback args, verify the callback was called:
+
+```tsx
+await userEvent.click(button);
+await expect(args.onClick).toHaveBeenCalledOnce();
+```
+
+For stories showing disabled state, verify interactions are blocked:
+
+```tsx
+await userEvent.click(element, { pointerEventsCheck: 0 });
+await expect(args.onClick).not.toHaveBeenCalled();
+```
+
+
 ---
 
 ## Date Mocking