skills.rest
coinbase
coinbaseOFFICIAL
Explore all skills by this author →
WebsiteGitHub

development-cds-mobile

Develop React Native mobile components for the Coinbase Design System.

493|101|Updated Nov 8, 2024
Search Tags:#accessibility#styling#mobile development#animation#react native#component development#coinbase design system
One-click install
npx skills add https://github.com/coinbase/cds --skill development-cds-mobile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: development-cds-mobile
Source: https://github.com/coinbase/cds/tree/main/.claude/skills/development-cds-mobile
Command: npx skills add https://github.com/coinbase/cds --skill development-cds-mobile

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidelines and best practices for developing new or modifying existing mobile components within the Coinbase Design System (CDS), ensuring consistency and quality in mobile application development.

Core Features & Use Cases

  • Styling: Demonstrates how to use StyleSheet.create and useTheme() for mobile styling, including inline style merging.
  • Animation: Outlines the use of React Native Reanimated for animations.
  • Gesture Handling: Explains how to implement gestures using react-native-gesture-handler.
  • Layout Measurement: Shows how to use the onLayout callback.
  • Accessibility: Details best practices for accessibility features and screen reader support.
  • Native Module Integration: Provides an example of integrating native modules.
  • Reference Components: Lists key components with their associated patterns.

Quick Start

Refer to the mobile package guidelines for developing CDS React components.

Frequently Asked Questions about development-cds-mobile

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

FAQPage Schema
How do I style React Native components in the Coinbase Design System?▼

To style Coinbase Design System components, use StyleSheet.create for static styles and the useTheme() hook for dynamic theming, merging inline styles when necessary to achieve the desired layout.

What's the best way to handle animations for React Native components?▼

React Native Reanimated is the recommended approach for animations within the Coinbase Design System, providing smooth gesture-driven interactions and high-performance UI transitions.

How do I implement gesture handling in React Native design system components?▼

Implement gesture handling in React Native components using the react-native-gesture-handler library, which integrates seamlessly with Reanimated animations to manage touch events.

Does the Coinbase Design System support mobile accessibility and screen readers?▼

Yes, the Coinbase Design System includes detailed accessibility best practices for mobile components, ensuring proper screen reader support and accessible interaction patterns for React Native.

Can I integrate native modules when developing CDS mobile components?▼

Yes, you can integrate native modules when developing Coinbase Design System mobile components, with provided examples demonstrating how to bridge native functionality into React Native.

How do I measure component layout dynamically in React Native?▼

Measure component layout dynamically in React Native by utilizing the onLayout callback, which provides dimensions and positioning data necessary for responsive mobile interfaces.

Related Skills

Explore More Software Engineering Skills→
karthiknishkarthiknish
2

react-native-design

Provide React Native UI, navigation, and animation patterns with Reanimated 3 and Gesture Handler.

Community
Advanced
Owl-ListenerOwl-Listener
234

design-handoff

Generate engineering-ready handoff documentation from finalized design work.

Community
Advanced
Higashi-KotaHigashi-Kota

theme-to-component-migration

Migrate hardcoded Tailwind styles and native HTML elements to Storybook-defined UI components in TypeScript/React projects.

Community
Intermediate
retrip-airetrip-ai
2

base-ui-design

Standardize React UI components with Base UI design guidelines.

Official
Basic