opencode-skills-collection 3.1.12 → 3.1.14

package/bundled-skills/ui-lint/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: ui-lint
+description: Quick automated lint — detects common design system violations in seconds
+risk: unknown
+source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-lint
+source_repo: bitjaru/styleseed
+source_type: community
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
+---
+
+# Design Lint (Quick Check)
+## When to Use
+
+Use this skill when you need quick automated lint — detects common design system violations in seconds.
+
+
+## When NOT to use
+
+- For deeper review of design judgment (composition, hierarchy, rhythm) → use `/ss-review`
+- For accessibility specifically → use `/ss-a11y`
+- For Nielsen UX heuristics → use `/ss-audit`
+- For applying refactors — this only flags violations; use `/ss-review` to fix
+
+Target: **$ARGUMENTS**
+
+## What This Does
+
+Fast, grep-based scan for common design violations. Runs in seconds (unlike /ss-review which is a deep manual audit). Run this after every file change.
+
+## Checks
+
+### 1. Hardcoded Colors
+Search for hex colors in className strings that should be semantic tokens:
+```bash
+grep -n '#[0-9a-fA-F]\{3,8\}' [file] | grep -v 'theme.css\|tokens\|\.json'
+```
+**Violation:** `text-[#3C3C3C]`, `bg-[#721FE5]`
+**Fix:** `text-text-primary`, `bg-brand`
+
+### 2. Raw Pixel Values in Tailwind
+```bash
+grep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]
+```
+**Violation:** `p-[24px]`, `gap-[12px]`
+**Fix:** `p-6`, `gap-3`
+
+### 3. Old Width/Height Syntax
+```bash
+grep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]
+```
+**Violation:** `w-4 h-4`
+**Fix:** `size-4`
+
+### 4. Physical Properties (LTR-only)
+```bash
+grep -n ' ml-\| mr-\| pl-\| pr-' [file]
+```
+**Violation:** `ml-2`, `mr-4`
+**Fix:** `ms-2`, `me-4`
+
+### 5. Forbidden Colors
+```bash
+grep -n 'text-black\|bg-black\|#000000\|#000"' [file]
+```
+**Violation:** Any pure black
+**Fix:** Use skin's text-primary token
+
+### 6. Missing data-slot
+```bash
+grep -n 'function [A-Z]' [file] # find components
+grep -n 'data-slot' [file]       # check if present
+```
+**Violation:** Component without `data-slot`
+**Fix:** Add `data-slot="component-name"`
+
+### 7. Font Size CSS Variables (CRITICAL — Tailwind v4 conflict)
+```bash
+grep -n 'text-\[var(--' [file]
+grep -n '\-\-text-.*px\|--fs-.*px' [file]
+```
+**Violation:** `text-[var(--text-sm)]` or `--text-sm: 13px` in theme.css
+**Fix:** Use explicit `text-[13px]`. CSS variable font sizes conflict with Tailwind v4's `--text-*` namespace — Tailwind reads them as color, not font-size.
+
+### 8. className Without cn()
+```bash
+grep -n 'className={`' [file]
+```
+**Violation:** Template literal className
+**Fix:** Use `cn()` for all className composition
+
+## Output Format
+
+```
+🔴 FAIL  [file:line] Hardcoded hex: text-[#3C3C3C] → use text-text-primary
+🔴 FAIL  [file:line] Raw px: p-[24px] → use p-6
+🟡 WARN  [file:line] Physical prop: ml-2 → use ms-2
+🟡 WARN  [file:line] Missing data-slot on MyComponent
+🟢 PASS  No violations found
+
+Total: X errors, Y warnings
+```
+
+If errors > 0, list specific fixes for each violation.
+
+## Limitations
+
+- Use this skill only when the task clearly matches its upstream source and local project context.
+- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
+- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

package/bundled-skills/ui-motion/SKILL.md

@@ -0,0 +1,181 @@
+---
+name: ui-motion
+description: Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe...
+risk: unknown
+source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-motion
+source_repo: bitjaru/styleseed
+source_type: community
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
+---
+
+# Motion Seed Applier
+## When to Use
+
+Use this skill when you need apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe...
+
+
+## When NOT to use
+
+- For general framer-motion docs or learning → use the framer-motion site
+- For non-React motion (CSS-only transitions, GSAP) — this skill targets `motion.X` JSX only
+- For full scroll-linked timelines or parallax — out of scope per DESIGN-LANGUAGE.md Rule 59
+- For tweaking the existing FadeIn/FadeUp/Stagger wrappers — edit `engine/components/ui/motion.tsx` directly
+
+## Vibe → Seed mapping
+
+Translate the user's prompt to one of the five seeds before applying. Use this lookup table from `engine/motion/index.ts`:
+
+| Words the user might say | Seed |
+|---|---|
+| bouncy, springy, playful, energetic, alive | **Spring** |
+| smooth, silky, fluid, elegant, composed, continuous | **Silk** |
+| snappy, quick, instant, decisive, sharp, precise | **Snap** |
+| floaty, gentle, weightless, dreamy, ambient, drifting | **Float** |
+| rhythmic, punchy, pulsing, heartbeat, beat | **Pulse** |
+| "Toss style", "Arc style" | **Spring** (per brand default) |
+| "Stripe style", "Notion style" | **Silk** |
+| "Linear style", "Raycast style", "Vercel style" | **Snap** |
+
+If the user says only a *brand* name, use that brand's default seed from `BRAND_DEFAULT_SEED`. If the user is explicit about a seed name (`spring`, `silk`, etc.), respect it verbatim.
+
+## Recommend mode — use-case → motion (when the user describes the *moment*, not the vibe)
+
+If the user describes **what the thing is** ("a like button", "a modal", "the loading
+state", "items in a feed") rather than a feeling, recommend from the use-case map
+(`MOTION_BY_USECASE` in `engine/motion/library.ts`, exported from `@engine/motion`):
+
+| Use case | Reach for | Why |
+|---|---|---|
+| Primary button / CTA press | `spring · press` | tactile, confident — the press should "give" |
+| Modal / dialog / sheet enter | `silk · entrance` | smooth; never bounce serious/destructive content |
+| Dropdown / popover / menu | `snap · entrance` | instant, precise — frequent UI shouldn't wait |
+| Toast / inline notification | `spring · entrance` | small friendly arrival, non-blocking |
+| List / feed items appearing | `stagger-cascade` | choreograph order, gently |
+| Feature / marketing card hover | `tilt-3d` | depth/flair OK on content-light marketing |
+| Dashboard / data card hover | `snap · hover` | a subtle lift only — keep dense UI calm |
+| Like / favorite / reaction | `like-burst` | a celebratory one-shot; reward the tap |
+| Live / online / recording dot | `pulse-beat` | looping heartbeat = "alive" |
+| Loading / skeleton | `shimmer` | calm directional progress |
+| Success / confirmation | `pop-in` | positive little "done" |
+| Toggle / tab / segment switch | `toggle-flip` | distinctive, recognizable switch |
+| Page / route transition | `silk · entrance` | smooth, minimal, get out of the way |
+| Number / balance / KPI / price reveal | **none** | don't animate the payload — it must read instantly |
+
+**Two anti-rules override the table** (state them if you deviate):
+1. **One seed per product.** If the project already uses a seed, match it — don't introduce a second personality.
+2. **Never delay the payload.** Don't animate a balance, price, or search result into view; motion is for affordance, not content.
+
+## Named motion keywords (distinctive moves)
+
+Seeds set a *personality* (how a fade/scale feels). The **motion library** in
+`engine/motion/library.ts` adds *distinctive moves* — a flip, a curtain wipe, a
+morph — each behind a unique keyword. Prefer a keyword when the user wants a
+specific, recognizable motion rather than a generic feel.
+
+`engine/motion/library.ts` (exported as `MOTION_LIBRARY` / `MOTION_BY_KEY` from
+`@engine/motion`) is the **single source of truth** — every keyword carries its
+own runnable `snippet`. Pull the snippet from there; never hand-write the params.
+
+| Keyword | Move | Say it when the user wants… |
+|---|---|---|
+| `toggle-flip` | 3D Y-axis card flip | a switch/toggle to flip between two faces |
+| `toggle-slide` | slide-stack swap | a value to slide out and the next to slide in |
+| `toggle-morph` | pill ⇄ circle morph | a control to change shape on toggle |
+| `toggle-curtain` | top→bottom clip-path wipe | a panel to reveal like a curtain |
+| `reveal-blur` | blur(12px)→0 focus-in | content to focus-pull into place |
+| `reveal-rise` | masked clip-path text rise | a headline/text to climb into view |
+| `reveal-unfold` | scaleY from top edge | an accordion/panel to unfold |
+| `pop-in` | spring overshoot from 0 | a badge/checkmark to pop in bouncily |
+| `press-squish` | scale-down + skew | a button to feel jelly/tactile on tap |
+| `tap-ripple` | radial ripple from tap | Material-style press feedback |
+| `pulse-beat` | looping scale pulse | a live/recording/heartbeat indicator |
+| `wiggle` | quick horizontal shake | error / invalid-input feedback |
+| `shimmer` | skeleton loading sweep | a loading placeholder |
+| `stagger-cascade` | children fade-up in sequence | a list to animate in one-by-one |
+
+**Applying a keyword:**
+
+1. Read the exact recipe from `engine/motion/library.ts` — find the entry whose
+   `key` matches, copy its `snippet` verbatim (it is calibrated and runnable).
+2. Adapt only the element/content to the user's JSX; keep the transition values.
+3. If the keyword is stateful (toggles, ripple), wire the `useState` shown in the
+   snippet. If it's a one-shot reveal, a `key` bump replays it.
+4. Tell the user the keyword you applied so they can reuse it elsewhere for
+   consistency, and point them at `/motion` to preview/Copy others.
+
+If the user describes a move but no exact keyword fits, fall back to a seed +
+context. If they say a keyword that doesn't exist, suggest the closest real one
+from the table — never invent a keyword.
+
+## Context detection
+
+Infer one of the five contexts from the prompt:
+
+- "on hover" / "when hovered" → `hover`
+- "on press" / "on tap" / "on click" → `press`
+- "when it appears" / "on mount" / "entering" → `entrance`
+- "when it leaves" / "on close" / "exiting" → `exit` (requires `<AnimatePresence>`)
+- "when layout changes" / "FLIP" / "rearranging" → `layout`
+
+If ambiguous, default to `entrance`. If multiple contexts are reasonable (e.g., a button needs both `hover` and `press`), apply both.
+
+## Application steps
+
+Apply seed: **$0** · Context: **$1** · Target: **$ARGUMENTS**
+
+1. **Read the target file** at the path given (or, if no path was given, ask the user which file). Locate the JSX element the user is talking about — usually a `<button>`, `<div>`, `<Card>`, or similar.
+
+2. **Confirm the import paths**. The component file must be able to import:
+   - `motion` (and `AnimatePresence` for `exit`) from `"framer-motion"`
+   - the chosen seed from `"@engine/motion"` — in a project that doesn't use the `@engine/*` alias, use a relative path to `engine/motion`
+
+3. **Replace the target tag with a `<motion.X>` and spread the seed's recipe**:
+
+   ```tsx
+   // hover example
+   <motion.button {...spring.hover}>Save</motion.button>
+
+   // press + hover combined
+   <motion.button {...spring.press} {...spring.hover}>Save</motion.button>
+
+   // entrance (mount)
+   <motion.div {...silk.entrance}>...</motion.div>
+
+   // exit (requires AnimatePresence wrapper somewhere up the tree)
+   <AnimatePresence>
+     {open && <motion.div {...silk.entrance} {...silk.exit} />}
+   </AnimatePresence>
+
+   // layout (FLIP)
+   <motion.div {...snap.layout}>...</motion.div>
+   ```
+
+4. **Do NOT inline the params**. The whole point of the seed is that the values come from one source. Never expand `{ type: "spring", stiffness: 300, damping: 18 }` into the JSX — always spread the recipe.
+
+5. **Respect `prefers-reduced-motion`** in long-running surfaces. For one-off interactions (hover/press), framer-motion already throttles. For mount/exit/layout sequences in a long-lived page, import `usePrefersReducedMotion` and `REDUCED_TRANSITION` from `@engine/motion` and override the transition when reduced motion is on.
+
+6. **Validate** by re-reading the file and confirming the JSX still parses (matching brackets, motion tag closed, AnimatePresence in place if `exit` was used).
+
+7. **Tell the user which seed and context you applied**, and offer one related context they might want next ("Want `press` too so it feels clickable?").
+
+## Defaults if the user is vague
+
+- No file given → ask "which file?"
+- No vibe word → ask "any vibe word, brand, or seed name?"
+- Vibe is "natural" or "feel like a real app" → default to **Silk** (the safest of the five)
+- Element is a CTA button → also apply `press`
+
+## Forbidden
+
+- Do not invent new seed names. There are exactly five.
+- Do not edit `engine/motion/seeds/*.ts` from this skill — those are calibrated by hand. Add a new seed only via a separate, explicit ask.
+- Do not introduce a third-party animation lib (gsap, anime.js). StyleSeed targets framer-motion exclusively.
+- Do not add scroll-linked, parallax, or infinite animations (DESIGN-LANGUAGE.md Rule 59).
+
+## Limitations
+
+- Use this skill only when the task clearly matches its upstream source and local project context.
+- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
+- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

package/bundled-skills/ui-page/SKILL.md

@@ -1,100 +1,90 @@
 ---
 name: ui-page
-description: "Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components."
-category: design
-risk: safe
-source: community
+description: Scaffold a new mobile page/screen using the StyleSeed layout patterns
+risk: unknown
+source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-page
 source_repo: bitjaru/styleseed
 source_type: community
-date_added: "2026-04-08"
-author: bitjaru
-tags: [ui, page-design, mobile, layout, styleseed]
-tools: [claude, cursor, codex, gemini]
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
 ---
 
-# UI Page
-
-## Overview
-
-Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections.
-
+# Mobile Page Scaffolder
 ## When to Use
-- Use when you need a new page in a Toss-seed app
-- Use when you want a consistent page shell, spacing, and navigation structure
-- Use when you are adding a new product flow and need a solid starting layout
-- Use when you want to stay mobile-first even if the project later expands to larger breakpoints
-
-## How It Works
-
-### Step 1: Inspect the Existing Shell
-
-Read the current page scaffolding patterns first, especially:
-- page shell
-- top bar
-- bottom navigation
-- representative pages using the same route family
-
-### Step 2: Define the Page Purpose
-
-Clarify:
-- the page name
-- the primary user question the screen answers
-- the top one or two actions the user should take
-
-Every screen should have one dominant purpose.
-
-### Step 3: Use the Information Pyramid
-
-Lay out the page from highest importance to lowest:
-1. Hero or top summary
-2. KPI or key actions
-3. detail cards or supporting modules
-4. lists, history, or secondary content
-
-Avoid repeating the same section type mechanically from top to bottom.
 
-### Step 4: Apply the Toss Layout Rules
-
-Default layout choices:
-- mobile viewport width around `max-w-[430px]`
-- page background on `bg-background`
-- horizontal padding around `px-6`
-- section rhythm with `space-y-6`
-- generous bottom padding if a bottom nav is present
-- cards using semantic surface tokens, rounded corners, and light shadows
-
-### Step 5: Compose Instead of Rebuilding
-
-Use existing `ui/` and `patterns/` components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them.
-
-### Step 6: Account for Real Device Constraints
-
-- handle safe-area insets
-- avoid horizontal overflow
-- keep interactive clusters thumb-friendly
-- ensure long content scrolls cleanly without clipping the bottom navigation
-
-## Output
-
-Return:
-1. The page scaffold
-2. The chosen section structure
-3. Reused components and any newly required components
-4. Empty, loading, and error states that the page will need next
-
-## Best Practices
-
-- Keep the first version structurally correct before adding decoration
-- Use one strong hero instead of multiple competing highlights
-- Preserve navigation consistency across sibling screens
-- Prefer reusable section components when the page will likely repeat
-
-## Additional Resources
-
-- [StyleSeed repository](https://github.com/bitjaru/styleseed)
-- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-page/SKILL.md)
+Use this skill when you need scaffold a new mobile page/screen using the StyleSeed layout patterns.
+
+
+## When NOT to use
+
+- For a single composed pattern within an existing page → use `/ss-pattern`
+- For desktop-only screens — this skill is mobile-first
+- For multi-page navigation structure → use `/ss-flow` first
+- For tweaking an existing page — edit the file directly
+
+Create a new page: **$0**
+Description: $ARGUMENTS
+
+## Instructions
+
+1. Read the design system reference:
+   - `CLAUDE.md` for file structure and conventions
+   - `components/patterns/page-shell.tsx` for page layout
+   - `components/patterns/top-bar.tsx` for header pattern
+   - `components/patterns/bottom-nav.tsx` for navigation
+
+2. Page structure template:
+```tsx
+import { PageShell, PageContent } from "@/components/patterns/page-shell"
+import { TopBar, TopBarAction } from "@/components/patterns/top-bar"
+import { BottomNav } from "@/components/patterns/bottom-nav"
+
+export default function PageName() {
+  return (
+    <PageShell>
+      <TopBar
+        logo={/* logo or page title */}
+        subtitle={/* optional subtitle */}
+        actions={/* optional action buttons */}
+      />
+      <PageContent>
+        {/* Page sections with space-y-6 */}
+      </PageContent>
+      <BottomNav items={[/* nav items */]} activeIndex={0} />
+    </PageShell>
+  )
+}
+```
+
+3. Layout rules:
+   - Container: `max-w-[430px]` (mobile viewport)
+   - Page background: `bg-background`
+   - Section horizontal padding: `px-6`
+   - Section vertical spacing: `space-y-6`
+   - Bottom padding for nav: `pb-24`
+   - Cards: `bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]`
+
+4. Use semantic tokens for all colors — never hardcode hex values.
+
+5. Compose the page from existing components (ui/ and patterns/) wherever possible.
+
+6. Safe area: include `env(safe-area-inset-*)` padding for modern devices.
+
+7. **Post-generation verification (MANDATORY):**
+   After creating the page, verify against the Golden Rules:
+   - [ ] All content is inside cards (no bare background content)
+   - [ ] Only `--brand` color used for accents (no other accent colors)
+   - [ ] No hardcoded hex values (all semantic tokens)
+   - [ ] Section types alternate (no two identical types in a row)
+   - [ ] Numbers have 2:1 ratio with units
+   - [ ] Spacing uses 6px multiples (p-1.5, p-3, p-6)
+   - [ ] `mx-6` for single cards, `px-6` for grids/carousels
+   - [ ] Touch targets ≥ 44px on all interactive elements
+   If any violation is found, fix it before presenting the page to the user.
 
 ## Limitations
-- Use this skill only when the task clearly matches the scope described above.
-- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
-- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
+
+- Use this skill only when the task clearly matches its upstream source and local project context.
+- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
+- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

package/bundled-skills/ui-pattern/SKILL.md

@@ -1,92 +1,74 @@
 ---
 name: ui-pattern
-description: "Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives."
-category: design
-risk: safe
-source: community
+description: Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
+risk: unknown
+source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-pattern
 source_repo: bitjaru/styleseed
 source_type: community
-date_added: "2026-04-08"
-author: bitjaru
-tags: [ui, patterns, design-system, reuse, styleseed]
-tools: [claude, cursor, codex, gemini]
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
 ---
 
-# UI Pattern
-
-## Overview
-
-Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill builds reusable composed patterns from the seed's primitives. It is intended for sections like card lists, grids, form blocks, ranking lists, and chart wrappers that appear across multiple pages and need to look deliberate rather than ad hoc.
-
+# UI Pattern Generator
 ## When to Use
-- Use when you need a reusable layout pattern rather than a one-off page section
-- Use when a page repeats the same arrangement of cards, rows, filters, or data blocks
-- Use when you want to build from existing StyleSeed primitives instead of copying markup
-- Use when you want a pattern component with props for dynamic content
-
-## How It Works
 
-### Step 1: Identify the Pattern Type
+Use this skill when you need generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives.
 
-Common pattern families include:
-- card section
-- two-column grid
-- horizontal scroller
-- list section
-- form section
-- stat grid
-- data table
-- detail card
-- chart card
-- filter bar
-- action sheet
 
-### Step 2: Read the Available Building Blocks
+## When NOT to use
 
-Inspect both:
-- `components/ui/` for primitives
-- `components/patterns/` for neighboring patterns that can be extended
+- For a single primitive component → use `/ss-component`
+- For a full mobile screen → use `/ss-page`
+- For an entire multi-page user flow → use `/ss-flow`
+- For design tokens and color/spacing decisions → use `/ss-tokens`
 
-The goal is composition, not duplication.
+Pattern type: **$0**
+Description: $ARGUMENTS
 
-### Step 3: Apply StyleSeed Layout Rules
+## Available Pattern Types
 
-Keep the Toss seed defaults intact:
-- card surfaces on semantic tokens
-- rounded corners from the system scale
-- shadow tokens instead of improvised shadow values
-- consistent internal padding
-- section wrappers that align with the page margin system
+### Layout Patterns
+- **card-section**: Card with title + content inside page section (`mx-6`)
+- **grid-2col**: 2-column grid of cards (`grid grid-cols-2 gap-4 px-6`)
+- **scroll-horizontal**: Horizontal scrolling card list (`flex gap-3 overflow-x-auto scrollbar-hide`)
+- **list-section**: Vertical list of items inside a card
+- **form-section**: Form with labeled inputs in a card
+- **stat-grid**: Grid of StatCard components
 
-### Step 4: Make the Pattern Dynamic
+### Data Display Patterns
+- **data-table**: Table with header and rows
+- **detail-card**: Key-value pair display
+- **chart-card**: Card wrapper for a Recharts chart
+- **ranking-list**: Numbered ranking with highlight
 
-Expose data through props instead of hardcoding content. If a pattern has multiple variants, keep the API explicit and small.
+### Interactive Patterns
+- **action-sheet**: Bottom sheet with action buttons
+- **filter-bar**: Horizontal filter/tab bar
+- **search-header**: Search input in header area
 
-### Step 5: Keep the Pattern Reusable Across Pages
+## Instructions
 
-Avoid page-specific assumptions unless the user explicitly wants a one-off section. If the markup only works on one route, it probably belongs in a page component, not a shared pattern.
+1. Read the design system reference:
+   - `CLAUDE.md` for conventions
+   - `components/ui/` for available primitives
+   - `components/patterns/` for existing patterns
 
-## Output
+2. Compose the pattern from existing components — DO NOT recreate primitives.
 
-Provide:
-1. The generated pattern component
-2. The target location
-3. Expected props and usage example
-4. Notes on which existing primitives were reused
+3. Follow the design system layout rules:
+   - Cards: `bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]`
+   - Section wrapper: `mx-6` for horizontal margin
+   - Section title: `text-foreground font-bold text-[18px] mb-4`
+   - List gap: `space-y-3`
+   - Grid gap: `gap-4`
 
-## Best Practices
+4. Use semantic tokens for all visual properties.
 
-- Start from the smallest existing building block that solves the problem
-- Keep container, section, and item responsibilities separate
-- Use tokens and spacing rules consistently
-- Prefer extending a pattern over adding a near-duplicate sibling
-
-## Additional Resources
-
-- [StyleSeed repository](https://github.com/bitjaru/styleseed)
-- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-pattern/SKILL.md)
+5. Make the pattern a reusable component with props for dynamic content.
 
 ## Limitations
-- Use this skill only when the task clearly matches the scope described above.
-- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
-- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
+
+- Use this skill only when the task clearly matches its upstream source and local project context.
+- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
+- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.