# Ss Pattern

> Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives

- **Type:** Skill
- **Install:** `agentstack add skill-bitjaru-styleseed-ss-pattern`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [bitjaru](https://agentstack.voostack.com/s/bitjaru)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [bitjaru](https://github.com/bitjaru)
- **Source:** https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-pattern
- **Website:** https://styleseed-demo.vercel.app

## Install

```sh
agentstack add skill-bitjaru-styleseed-ss-pattern
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UI Pattern Generator

## When NOT to use

- 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`

Pattern type: **$0**
Description: $ARGUMENTS

## Available Pattern Types

### 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

### 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

### Interactive Patterns
- **action-sheet**: Bottom sheet with action buttons
- **filter-bar**: Horizontal filter/tab bar
- **search-header**: Search input in header area

## Instructions

1. Read the design system reference:
   - `CLAUDE.md` for conventions
   - `components/ui/` for available primitives
   - `components/patterns/` for existing patterns

2. Compose the pattern from existing components — DO NOT recreate primitives.

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`

4. Use semantic tokens for all visual properties.

5. Make the pattern a reusable component with props for dynamic content.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [bitjaru](https://github.com/bitjaru)
- **Source:** [bitjaru/styleseed](https://github.com/bitjaru/styleseed)
- **License:** MIT
- **Homepage:** https://styleseed-demo.vercel.app

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-bitjaru-styleseed-ss-pattern
- Seller: https://agentstack.voostack.com/s/bitjaru
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.