# Ss Component

> Generate a new UI component following the StyleSeed design conventions

- **Type:** Skill
- **Install:** `agentstack add skill-bitjaru-styleseed-ss-component`
- **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-component
- **Website:** https://styleseed-demo.vercel.app

## Install

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

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

## About

# UI Component Generator

## When NOT to use

- For full-page scaffolding → use `/ss-page`
- For composed multi-component patterns → use `/ss-pattern`
- For tweaking an existing component — just edit the file directly
- For non-StyleSeed projects (no `components/ui/` directory or no Tailwind v4)

Generate a new component: **$0**
Description: $ARGUMENTS

## Instructions

1. First, read the design system seed for context:
   - Read `CLAUDE.md` for component conventions
   - Read `css/theme.css` for available design tokens
   - Read `components/ui/button.tsx` as a reference pattern

2. Follow these conventions strictly:
   - Use `function` declaration (not `const`)
   - Add `data-slot="component-name"` attribute
   - Use `cn()` from `@/components/ui/utils` for all className merging
   - Use `React.ComponentProps<>` for prop typing
   - Always support `className` prop for overrides
   - Use CVA (`class-variance-authority`) if the component has variants
   - Use semantic color tokens (`bg-card`, `text-foreground`) — never inline hex

3. Design token usage:
   - Colors: `text-foreground`, `bg-card`, `text-brand`, `text-muted-foreground`, `border-border`
   - Shadows: `shadow-[var(--shadow-card)]`, `shadow-[var(--shadow-elevated)]`
   - Radius: `rounded-md`, `rounded-lg`, `rounded-2xl`
   - Spacing: multiples of 6px (`p-1.5`, `p-3`, `p-6`)
   - Motion: `duration-[var(--duration-fast)]`, `ease-[var(--ease-default)]`

4. Typography rules:
   - Display (36-48px): `leading-none tracking-[-0.02em]`
   - Heading (18-24px): `leading-snug tracking-[-0.01em]`
   - Body (14-17px): `leading-normal` (default tracking)
   - Caption uppercase (10-13px): `tracking-[0.05em]`
   - Use `size-*` shorthand instead of `w-* h-*`
   - Use `ms-*/me-*` instead of `ml-*/mr-*` (logical properties)

5. Accessibility requirements:
   - Minimum touch target: 44x44px (`min-h-11 min-w-11`)
   - Support `aria-*` attributes passthrough
   - Use `focus-visible:ring-2 focus-visible:ring-ring` for keyboard focus
   - Respect `prefers-reduced-motion` for animations

6. Export the component as a named export (not default)

7. Place the file in the appropriate directory:
   - Primitive/reusable → `src/components/ui/`
   - Composed pattern → `src/components/patterns/`

## 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-component
- 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%.