{"id":"ss-pattern","name":"ss-pattern","summary":"既存のプリミティブを使って、アクティブなStyleSeedの文法とブランドレシピから構成されたUIパターンを生成します。","body":"# UI Pattern Generator\n## Registry-first artifact boundary\n\nWhen `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/<artifact-id>.md` and `.styleseed/manifests/<artifact-id>.json`. Never fall back to the global legacy bundle for a registry project. Legacy projects may use `.styleseed/effective-rules.md` only when no registry exists.\n\n## When NOT to use\n\n- For a single primitive component → use `/ss-component`\n- For a full mobile screen → use `/ss-page`\n- For an entire multi-page user flow → use `/ss-flow`\n- For design tokens and color/spacing decisions → use `/ss-tokens`\n\nPattern type: **$0**\nDescription: $ARGUMENTS\n\n## Available Pattern Types\n\n### Layout Patterns\n- **focal-summary**: one dominant state, briefing, artifact, or decision\n- **panel-section**: aligned workbench panel with related controls and evidence\n- **flat-step**: public-service task step with explicit labels, help, and recovery\n- **reading-section**: bounded prose, figure, caption, quote, or source group without app cards\n- **resource-collection**: rows, table, grid, or sequence selected by the recipe and user job\n- **canvas-tools**: focused artifact/canvas with quiet supporting tool groups\n\n### Data Display Patterns\n- **data-table**: Table with header and rows\n- **detail-card**: Key-value pair display\n- **chart-card**: Card wrapper for a Recharts chart\n- **ranking-list**: Numbered ranking with highlight\n\n### Interactive Patterns\n- **action-sheet**: Bottom sheet with action buttons\n- **filter-bar**: Horizontal filter/tab bar\n- **search-header**: Search input in header area\n\n## Instructions\n\n1. Read `.styleseed/effective-rules.md` and `.styleseed/manifest.json`. Resolve first when stale.\n   Then inspect:\n   - `components/ui/` for available primitives\n   - `components/patterns/` for existing patterns\n\n2. Compose the pattern from existing components — DO NOT recreate primitives.\n\n3. Follow the selected recipe rather than one default card language:\n   - Use `ss-pattern-surface` only when containment is earned.\n   - Use `ss-page-gutter` or `ss-page-padding` instead of hardcoded universal gutters.\n   - Use `ss-pattern-inset`, `ss-pattern-control`, and `ss-pattern-icon` for recipe-aware shape.\n   - Public-service and editorial recipes usually prefer flat flow, rules, and whitespace.\n   - Enterprise/developer recipes prefer aligned panels, rows, tables, and compact controls.\n   - Calm-consumer may use soft groups; expressive-brand must add a product-specific composition.\n\n4. Use semantic tokens for all visual properties.\n\n5. Make the pattern a reusable component with props for dynamic content.\n\n6. Run `/ss-score` and verify that the pattern has a functional relationship to its page\n   instead of being an isolated pretty card.","author":"@bitjaru","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-pattern","license":"MIT","category":"writing","lang":"en","tokens":638,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[],"requires":{"mcp":[],"tools":["Read","Write","Edit","Grep","Glob","Bash"]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":[]}}