ワンクリックでManusで任意のスキルを実行

recipes-design-system

スター0

フォーク0

更新日2026年5月25日 21:19

Design system for the recipes app — tokens, primitives, theming, and CSS module rules. Use when styling UI, adding buttons/cards/typography, or preventing one-off styles in feature code.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

luigiinred

luigiinred/family-recipes

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Recipes design system

Feature and page code must compose primitives. Raw visual values belong only in tokens.

Structure

src/design-system/
  tokens/
    colors.css
    spacing.css
    typography.css
    radii.css
    shadows.css
    index.css          # @import all tokens
  primitives/
    Text/
    Button/
    Stack/
    Card/
    Image/
    Badge/
  ThemeProvider.tsx      # optional: data-theme on <html>

Tokens

Define CSS custom properties on :root (and [data-theme="dark"] if needed):

/* tokens/spacing.css */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --radius-md: 0.5rem;
  --color-surface: #fff;
  --color-text: #1a1a1a;
  --font-size-body: 1rem;
}

Primitives reference only var(--*) — never #hex or 16px literals in primitive CSS.

Primitive rules

Each primitive:

Own folder: Button/Button.tsx, Button.module.css, Button.test.tsx
Typed props with narrow variants (variant: 'primary' | 'ghost')
Accessible by default (<button type="button">, heading levels, alt on images)
Documented variants in tests (one test per variant that changes visible output)

Recipe-specific primitives

Build domain-agnostic shells first, then thin wrappers if needed:

Primitive	Recipe usage
`Card`	Recipe list tiles
`Badge`	Tags, difficulty
`Text`	Titles, meta lines
`Stack`	Ingredient lists, step layout

Domain copy stays in src/components/ (e.g. RecipeMeta uses Text + Badge).

Adding a new primitive (TDD)

Test: renders children, keyboard focus, variant class via role/label not .className
Implement with tokens
Export from src/design-system/primitives/index.ts

Feature code check

Before merging UI:

No new hex/rgb/hsl in components/, features/, pages/
No duplicate button/card markup — use primitives
Focus states visible on interactive elements

Theming

Prefer data-theme + token overrides. Avoid hard-coded dark-mode duplicates in feature CSS.

このリポジトリの他の Skills

同じリポジトリ

recipes-enrich-from-url

luigiinred/family-recipes

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.

2026-05-260

recipes-import-recipe

luigiinred/family-recipes

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.

2026-05-260

recipes-meal-planner

luigiinred/family-recipes

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.

2026-05-260

recipes-youtube-recipe

luigiinred/family-recipes

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.

2026-05-260

recipes-design-first

luigiinred/family-recipes

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.

2026-05-260

api-specs

luigiinred/family-recipes

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.

2026-05-250

name	recipes-design-system
description	Design system for the recipes app — tokens, primitives, theming, and CSS module rules. Use when styling UI, adding buttons/cards/typography, or preventing one-off styles in feature code.

Recipes design system

Feature and page code must compose primitives. Raw visual values belong only in tokens.

Structure

src/design-system/
  tokens/
    colors.css
    spacing.css
    typography.css
    radii.css
    shadows.css
    index.css          # @import all tokens
  primitives/
    Text/
    Button/
    Stack/
    Card/
    Image/
    Badge/
  ThemeProvider.tsx      # optional: data-theme on <html>

Tokens

Define CSS custom properties on :root (and [data-theme="dark"] if needed):

/* tokens/spacing.css */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --radius-md: 0.5rem;
  --color-surface: #fff;
  --color-text: #1a1a1a;
  --font-size-body: 1rem;
}

Primitives reference only var(--*) — never #hex or 16px literals in primitive CSS.

Primitive rules

Each primitive:

Own folder: Button/Button.tsx, Button.module.css, Button.test.tsx
Typed props with narrow variants (variant: 'primary' | 'ghost')
Accessible by default (<button type="button">, heading levels, alt on images)
Documented variants in tests (one test per variant that changes visible output)

Recipe-specific primitives

Build domain-agnostic shells first, then thin wrappers if needed:

Primitive	Recipe usage
`Card`	Recipe list tiles
`Badge`	Tags, difficulty
`Text`	Titles, meta lines
`Stack`	Ingredient lists, step layout

Domain copy stays in src/components/ (e.g. RecipeMeta uses Text + Badge).

Adding a new primitive (TDD)

Test: renders children, keyboard focus, variant class via role/label not .className
Implement with tokens
Export from src/design-system/primitives/index.ts

Feature code check

Before merging UI:

No new hex/rgb/hsl in components/, features/, pages/
No duplicate button/card markup — use primitives
Focus states visible on interactive elements

Theming

Prefer data-theme + token overrides. Avoid hard-coded dark-mode duplicates in feature CSS.