Farb palette

2025-12-04 16:06:58 +01:00
parent 0554fdda01
commit aa9bd3f0b6
50 changed files with 3971 additions and 899 deletions
--- a/.claude/skills/shadcn-ui/SKILL.md
+++ b/.claude/skills/shadcn-ui/SKILL.md
@@ -0,0 +1,136 @@
+---
+name: shadcn-ui
+description: 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**
+   ```typescript
+   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
+```typescript
+<Button variant="outline" size="lg" onPress={handlePress}>
+  Click me
+</Button>
+```
+
+### Card Composition
+```typescript
+<Card>
+  <Card.Header>
+    <Card.Title>Title</Card.Title>
+  </Card.Header>
+  <Card.Content>
+    Content here
+  </Card.Content>
+</Card>
+```
+
+### Form Input
+```typescript
+<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