メニュー
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 ページを確認してインストールできます。
SOC 職業分類に基づく
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.
| 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')