Skill: Create a Reusable Component

Steps

1. Create Component File

In frontend/components/{feature}/{ComponentName}.tsx:

import { View, StyleSheet } from 'react-native';

interface {ComponentName}Props {
  // Define props with TypeScript types
}

export function {ComponentName}({ ...props }: {ComponentName}Props) {
  return (
    <View style={styles.container}>
      {/* Component content */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {},
});

2. Checklist

• One component per file
• Props interface defined and exported
• Uses design tokens (no hardcoded colors/spacing)
• Styles colocated (StyleSheet.create)
• Accessible (labels, touch targets >= 44pt)
• No hardcoded strings (i18n)
• Works across platforms (iOS, Android, Web)