About mistica-react
A skill for building and modifying React interfaces with Telefonica's `@telefonica/mistica` component library. It directs developers to the library's documentation before generating code for Mistica-based pages and components.
Key features
- 01Guidance for `@telefonica/mistica` React components
- 02Support for Telefonica-branded pages and layouts
- 03Patterns for forms, cards, lists, and navigation
- 04Instructions to consult canonical library documentation
Use cases
- 01Creating a React page for a Telefonica-branded app
- 02Modifying interfaces that use Mistica components
- 03Building forms, cards, or navigation with Mistica
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/mistica-reactin Claude Code to confirm it loaded.
Details
From the project READMEMistica 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/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/llms.mdis not available, fetch the equivalent file from the GitHub repository:https://github.com/Telefonica/mistica-web/blob/master/doc/llms/llms.md
Follow every instruction in llms/llms.md exactly, including reading all minimum required docs before
generating any code.