pottery-diary/.claude/skills/shadcn-ui/SKILL.md

name	description
shadcn-ui	Create beautiful, accessible React Native components following shadcn/ui design principles. Use for building UI components with consistent styling, proper TypeScript types, and accessibility features.

shadcn/ui Style Components for React Native

This skill helps create React Native components following shadcn/ui design principles:

Core Principles

1. Component Philosophy

   • Components are copied into the project (not npm installed)
   • Full ownership and customization
   • TypeScript-first with proper type definitions
   • Composable and reusable

2. Design Tokens

   • Use the project's theme system from src/lib/theme/index.ts
   • Consistent spacing, colors, and typography
   • Support light/dark mode if configured

3. Component Structure

   import React from 'react';
   import { View, Text, StyleSheet } from 'react-native';
   import { theme } from '@/lib/theme';
   
   export interface ComponentProps {
     variant?: 'default' | 'outline' | 'ghost';
     size?: 'sm' | 'md' | 'lg';
     // Add prop types
   }
   
   export function Component({ variant = 'default', size = 'md', ...props }: ComponentProps) {
     return (
       <View style={[styles.base, styles[variant], styles[size]]}>
         {/* Component content */}
       </View>
     );
   }
   
   const styles = StyleSheet.create({
     base: {
       // Base styles
     },
     // Variant styles
     default: {},
     outline: {},
     ghost: {},
     // Size styles
     sm: {},
     md: {},
     lg: {},
   });
   

4. Accessibility

   • Always include accessibilityLabel
   • Use accessibilityRole appropriately
   • Support accessibilityHint when helpful
   • Test with screen readers

5. Common Patterns

   Button Component:

   • Variants: default, outline, ghost, destructive
   • Sizes: sm, md, lg
   • States: disabled, loading
   • Supports press feedback

   Card Component:

   • Header, Content, Footer sections
   • Optional borders and shadows
   • Consistent padding

   Input Component:

   • Label and error message support
   • Focus states
   • Validation feedback

   Badge Component:

   • Variants: default, success, warning, error
   • Compact sizing

6. File Organization

   • Place components in src/components/
   • Export from src/components/index.ts
   • Keep component + styles in same file
   • Create compound components when needed

7. Styling Approach

   • Use StyleSheet.create for performance
   • Leverage theme tokens
   • Support style prop for overrides
   • Use flexbox for layouts

Examples

Button with Variants

<Button variant="outline" size="lg" onPress={handlePress}>
  Click me
</Button>

Card Composition

<Card>
  <Card.Header>
    <Card.Title>Title</Card.Title>
  </Card.Header>
  <Card.Content>
    Content here
  </Card.Content>
</Card>

Form Input

<Input
  label="Email"
  value={email}
  onChangeText={setEmail}
  error={errors.email}
  accessibilityLabel="Email input"
/>

When to Use This Skill

• Creating new UI components
• Refactoring existing components to be more consistent
• Adding variants or sizes to components
• Improving component accessibility
• Establishing a design system