skills.rest
zaid-khan-code
zaid-khan-codeCOMMUNITY
Explore all skills by this author →
GitHub

mistica-react

Builds Telefonica-branded React interfaces using the Mistica design system and its @telefonica/mistica components, tokens and skins for pages, layouts, forms, cards, lists, navigation, and feedback flows in web apps.

3|2|Updated Mar 25, 2026
Search Tags:#branding#react#design-system#ui-components#web-apps#mistica#telefonica
One-click install
npx skills add https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms --skill mistica-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mistica-react
Source: https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms/tree/main/.agents/skills/mistica-react
Command: npx skills add https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms --skill mistica-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you build consistent, Telefonica-branded React interfaces without guessing at styling, component behavior, or design token usage.

Core Features & Use Cases

  • Mistica Components: Use the @telefonica/mistica library for pages, layouts, forms, cards, lists, navigation, and feedback states.
  • Design System Alignment: Keep UI output aligned with Telefonica guidelines, skins, and tokens across web experiences.
  • Practical Scenarios: Ideal for dashboards, onboarding flows, customer portals, and production UI work that needs a polished branded look.

Quick Start

Use the Mistica React skill to build a responsive Telefonica-branded onboarding page with form fields and consistent spacing.

Frequently Asked Questions about mistica-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Telefonica-branded React interfaces with consistent UI components?▼

Build Telefonica-branded React interfaces using the @telefonica/mistica library, which provides design tokens, skins, and pre-built components for pages, layouts, forms, and navigation to ensure visual consistency.

What is the Mistica design system used for in React web apps?▼

The Mistica design system provides canonical Telefonica UI components and design tokens for React web apps, ensuring branded consistency across dashboards, onboarding flows, and customer portals without manual styling.

How do I apply Mistica design tokens and skins to a React application?▼

Apply Mistica design tokens and skins by integrating the @telefonica/mistica library into your React application, using its built-in component properties and documentation-driven guidelines to maintain Telefonica brand alignment.

Can I use Mistica React components for forms, cards, and feedback flows?▼

Yes, Mistica React components support forms, cards, lists, navigation, and feedback states. The @telefonica/mistica library supplies these pre-styled elements aligned with Telefonica design system guidelines for production UI work.

Do I need the @telefonica/mistica package to build a branded onboarding page in React?▼

Yes, the @telefonica/mistica package is required. It supplies the Mistica components, design tokens, and skins needed to construct responsive Telefonica-branded onboarding pages with consistent spacing and form fields.

What are the limitations of using a design system like Mistica for React web apps?▼

Using the Mistica design system limits UI customization to Telefonica brand guidelines, skins, and tokens. Component behavior and styling are constrained to canonical Mistica guidance, restricting freeform or non-branded design implementations.

Related Skills

Explore More Software Engineering Skills→
PremModhaOfficialPremModhaOfficial
1

figma-to-code

Convert Figma design data into frontend templates and semantic design tokens.

Community
Advanced
SensLiaoSensLiao

qa-component-behavior

Automate UI component testing for React, Vue, Svelte, and Angular with Testing Library and Storybook.

Community
Intermediate
rnavarychrnavarych
14

role-frontend:react-expert

Provide React 19 expertise for Next.js 15 and Remix applications.

Community
Advanced
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate