skills.rest
QuilibriumNetwork
QuilibriumNetworkOFFICIAL
Explore all skills by this author →
GitHub

Cross-Platform Primitives

Apply a 5-question framework to choose cross-platform primitives versus HTML in Quorum Desktop UI code.

34|11|Updated Jan 19, 2025
Search Tags:#React#mobile#cross-platform#design-system#web#primitives
One-click install
npx skills add https://github.com/QuilibriumNetwork/quorum-desktop --skill cross-platform-primitives
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Cross-Platform Primitives
Source: https://github.com/QuilibriumNetwork/quorum-desktop/tree/main/.claude/skills/primitives
Command: npx skills add https://github.com/QuilibriumNetwork/quorum-desktop --skill cross-platform-primitives

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quorum Desktop teams need a cohesive framework for building UI that behaves consistently across web and native platforms. This skill provides a structured approach to designing cross-platform primitives, ensuring accessibility, theming, and design-system alignment across platforms.

Core Features & Use Cases

  • Decision framework for evaluating primitive usage versus raw HTML across shared, web-only, and mobile-only code paths.
  • Templates and patterns for common components (modals, inputs, containers) and migration strategies to align with cross-platform architecture.
  • Real-world workflows include creating new cross-platform components, refactoring existing components to use primitives, and auditing UI patterns for consistency.

Quick Start

Read the decision framework and use the provided templates to scaffold a new cross-platform component.

Frequently Asked Questions about Cross-Platform Primitives

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

FAQPage Schema
How do I decide between using cross-platform primitives versus raw HTML for React components?▼

Use the 5-question decision framework to evaluate primitive versus HTML usage by checking API guidance, design-system constraints, and platform parity considerations for shared, web-only, and mobile-only component paths.

What is the best way to build cross-platform UI components for both web and mobile?▼

Build cross-platform UI components using provided templates and design-system primitives that ensure accessibility, theming, and platform parity across web and native environments for common patterns like modals and inputs.

How do I refactor existing React components to use cross-platform primitives?▼

Refactor existing components by auditing UI patterns for consistency, applying migration strategies, and aligning component architecture with shared, web-only, and mobile-only code paths using cross-platform primitives.

When should I not use cross-platform primitives in my React application?▼

Avoid cross-platform primitives when building web-only or mobile-only components where platform parity is unnecessary, and raw HTML or native elements provide better performance without design-system alignment requirements.

Do I need a design system to use cross-platform primitives for web and mobile development?▼

Yes, design-system constraints are required to effectively implement cross-platform primitives, ensuring accessibility, theming, and consistent behavior across web and native platforms before building new components.

Related Skills

Explore More Software Engineering Skills→
sitharaj88sitharaj88
1

scaffold-mobile

Scaffold Android, iOS, React Native, and Flutter mobile projects with architecture and CI/CD.

Community
Advanced
lucasxflucasxf
3

mobile-design-system

Generates mobile UI design system with color tokens, component recipes, and layout patterns.

Community
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

mui-base

Integrate headless MUI primitives into custom React design systems.

Community
Intermediate
EvanBaconEvanBacon
571

react-strict-dom

Configure react-strict-dom Babel preset, PostCSS plugin, and CSS directive for cross-platform Expo UI.

Community
Intermediate