Ss Pattern
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
Install
$ agentstack add skill-bitjaru-styleseed-ss-pattern ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-bitjaru-styleseed-ss-pattern) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →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
- Read the design system reference:
CLAUDE.mdfor conventionscomponents/ui/for available primitivescomponents/patterns/for existing patterns
- Compose the pattern from existing components — DO NOT recreate primitives.
- Follow the design system layout rules:
- Cards:
bg-card rounded-2xl p-6 shadow-[var(--shadow-card)] - Section wrapper:
mx-6for horizontal margin - Section title:
text-foreground font-bold text-[18px] mb-4 - List gap:
space-y-3 - Grid gap:
gap-4
- Use semantic tokens for all visual properties.
- 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
- Source: bitjaru/styleseed
- License: MIT
- Homepage: https://styleseed-demo.vercel.app
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.