Imported from Telefonica/mistica-web (AGENTS.md). Install upstream with npx skills add Telefonica/mistica-web. Copyright stays with the author.

Mistica Web

React component library for Telefonica's Design System.

Package manager: yarn

Tooling: yarn storybook (components live doc), yarn playroom (prototyping tool)

Critical rules:

• NEVER import @vanilla-extract/css in .tsx files (only in .css.ts)
• NEVER import **/sprinkles.css in .tsx files
• Always namespace React hooks: React.useState, React.useEffect
• Wrap unit tests with ThemeContextProvider + makeTheme()
• Prefer semantic queries (getByRole, getByLabelText) over getByTestId

Conventions: type over interface, export type for types, 'use client'; for client components

Components:

• If you create a new component always create a snippet for playroom.
• If you add props to a component always update stories accordingly and add the new props to args and argTypes.

Conventions

• Read CONTRIBUTING before creating a PR or contributing to Mistica repo;
• Always add the AI label to PRs where the code was written by an AI agent.