mistica（mistica 命令行）

Mistica Web - 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

All Mistica documentation is available in the installed package. Before generating any UI code, read the relevant documentation files from node_modules/@telefonica/mistica/doc/.

Step 1: Read the main reference

Always start by reading the main LLM documentation file:

node_modules/@telefonica/mistica/doc/llms.md

This file contains the critical rules, quick start guide, component categories, design token overview, and links to all other documentation files.

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

Step 2: Read specific docs based on the task

Based on what the user needs, read the appropriate documentation files:

Rules

Treat node_modules/@telefonica/mistica/doc/llms.md as the canonical source of truth for critical rules, page structure, and Mistica best practices. Do not rely on abbreviated rules here when llms.md is available.