菜单
Use when building a new reusable UI component for KaloriTabak. Triggers on "component oluştur", "yeni bileşen", "card yap", "buton ekle", "UI component".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
| name | new-component |
| description | Use when building a new reusable UI component for KaloriTabak. Triggers on "component oluştur", "yeni bileşen", "card yap", "buton ekle", "UI component". |
components/new-screen skill)Determine the folder:
components/ui/components/recipes/components/daily/components/discover/components/activity/components/profile/Component file structure:
import { View, Text, Pressable, StyleSheet } from 'react-native'
import { colors } from '@/constants/colors'
import { spacing, radius, shadow } from '@/constants/theme'
import { typography } from '@/constants/typography'
interface MyComponentProps {
title: string
onPress?: () => void
}
export function MyComponent({ title, onPress }: MyComponentProps) {
return (
<Pressable
onPress={onPress}
style={({ pressed }) => [
styles.container,
pressed && styles.pressed,
]}
>
<Text style={styles.title}>{title}</Text>
</Pressable>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: colors.surface,
borderRadius: radius.lg,
padding: spacing.base,
...shadow.sm,
},
pressed: {
opacity: 0.85,
transform: [{ scale: 0.97 }],
},
title: {
fontFamily: typography.fontSemiBold,
fontSize: typography.md,
color: colors.textPrimary,
},
})
Color tokens — never hardcode hex:
colors.surface, colors.background, colors.surfaceAltcolors.primarycolors.textPrimary, colors.textSecondarycolors.border, colors.borderLightAnimations — use react-native-reanimated:
import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated'
const scale = useSharedValue(1)
const animStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }))
// on press: scale.value = withSpring(0.97)
import { Heart, Plus, ArrowLeft } from 'phosphor-react-native'
<Heart size={24} color={colors.pink} weight="fill" />
Progress Ring — already built as components/ui/ProgressRing.tsx, reuse it.
Export — named export (not default) for components.
docs/06-ui-design.mdconstants/colors.tsconstants/theme.ts基于 SOC 职业分类
Use this skill when implementing background calculation (calories, cost, macros) for TheMealDB recipes in BOTH the Recipes tab AND the Discover tab — including optimistic UI loading, per-ingredient skeleton states, enabling "Günlüğe Ekle / Add to Log" button before calculation completes, partial log updates after calculation finishes, and local completion notifications. Also use when the Recipes tab already has progressive rendering but is missing the early "Add to Log" option or completion notification.
Use when calling an external API (Migros, TheMealDB, OpenFoodFacts, USDA, MyMemory, Unsplash, Cerebras) or adding a new service in KaloriTabak. Triggers on "Migros'tan fiyat çek", "tarif ara", "kalori getir", "çevir", "API çağrısı".
Use when implementing calorie calculation, macro calculation, recipe cost calculation, BMR/TDEE, unit conversion, or the smart recipe suggestion logic in KaloriTabak. Triggers on "kalori hesapla", "maliyet hesapla", "BMR", "TDEE", "makro", "birim dönüştür", "porsiyon".
Use when adding a new SQLite query, creating a migration, or modifying the database schema in KaloriTabak. Triggers on "add a query", "new migration", "yeni tablo", "veritabanı", "SQLite".
Use when creating a new screen or page in the KaloriTabak app. Triggers on "add a screen", "create a new tab", "new route", "yeni ekran", "ekran oluştur".
Use when adding new state, actions, or selectors to a Zustand store in KaloriTabak. Triggers on "store'a ekle", "state güncelle", "zustand", "global state", "store action".
