Mistica React - Telefonica Design System

Build web interfaces using @telefonica/mistica, the React component library for Telefonica's Design System.

When to Apply

Use this skill when:

• Creating or modifying React components that use @telefonica/mistica
• Building pages, layouts, or UIs for Telefonica-branded applications
• The user asks to build a website or web app using Mistica
• Working with Mistica components, design tokens, or skins
• Generating forms, cards, lists, navigation, feedback screens, or any UI pattern

Setup

Before writing any code, ensure the project has @telefonica/mistica installed. If not:

npm install @telefonica/mistica

Documentation

Before writing any code, read node_modules/@telefonica/mistica/doc/llms.md. That file is the canonical source of truth and contains critical rules, a quick start guide, component categories, design token overview, and step-by-step instructions on which documentation files to read and in what order.

Fallback: If node_modules/@telefonica/mistica/doc/llms.md is not available, fetch the equivalent file from the GitHub repository: https://github.com/Telefonica/mistica-web/blob/master/doc/llms.md

Follow every instruction in llms.md exactly, including reading all minimum required docs before generating any code.