菜单
Recipes React app conventions — static API, design system, component-first layout, and TDD. Use when bootstrapping, adding features, or unsure where code belongs in the recipes repository.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Scrape non-YouTube sourceUrl into the catalog (JSON-LD/HTML parser or browser). Subskill of recipes-import-recipe — use the parent skill first to route YouTube vs web. Use for blog/recipe-site URLs with empty ingredients or placeholder steps.
Add or refresh a recipe in the static catalog from a URL. Simplifies noisy titles, always fetches ingredients/steps/images from the source, and delegates to recipes-youtube-recipe when sourceUrl is YouTube. Use when the user asks to add a recipe, import from a link, or fill the database from a bookmark.
Starred cook queue and meal-type tags on recipes. Use when changing the starred queue, starred order, or tagging recipes for breakfast/lunch/dinner/etc.
Subskill of recipes-import-recipe for YouTube URLs. Timestamped video recipes, simplified titles, ingredients from description RECIPE blocks or linked blogs. Use when sourceUrl is youtube.com or youtu.be — not as the top-level import entry.
Entry point for Recipes — design docs, static API contracts, design system, component-first UI, and TDD. Use when starting work, planning features, writing specs, or onboarding to this repo.
Document static JSON and loader contracts under docs/api-specs/ before changing src/static-api/. Use when adding recipes, loaders, types, filters, or data the UI depends on; pairs with recipes-static-api, page-specs, and recipes-tdd.
基于 SOC 职业分类
| name | recipes-project |
| description | Recipes React app conventions — static API, design system, component-first layout, and TDD. Use when bootstrapping, adding features, or unsure where code belongs in the recipes repository. |
Read docs/architecture.md for diagrams and layer rules.
src/static-api/When the repo has no app yet:
npm create vite@latest . -- --template react-ts (or equivalent in empty dir)src/design-system/tokens.css before any feature UIsrc/static-api/data/recipes.json + loader tests| You are building… | Location |
|---|---|
| Color, spacing, type scale | src/design-system/tokens/ |
| Button, Text, Stack, Card shell | src/design-system/primitives/ |
| RecipeCard, IngredientList | src/components/ |
| Search or filter flow | src/features/<name>/ |
| Route screen | src/pages/<Name>/ |
JSON + getRecipeBySlug | src/static-api/ |
PascalCase.tsx + PascalCase.test.tsx beside itcamelCase.ts + camelCase.test.tsComponentName.module.cssit('shows prep time when recipe has prepMinutes')