Styleseed ss-component

Name: ss-component
Author: bitjaru

Generate a new UI component following the StyleSeed design conventions

install

source · Clone the upstream repo

git clone https://github.com/bitjaru/styleseed

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/bitjaru/styleseed "$T" && mkdir -p ~/.claude/skills && cp -r "$T/engine/.claude/skills/ss-component" ~/.claude/skills/bitjaru-styleseed-ss-component && rm -rf "$T"

manifest: engine/.claude/skills/ss-component/SKILL.md

UI Component Generator

Generate a new component: $0 Description: $ARGUMENTS

Instructions

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

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)]

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)
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
Export the component as a named export (not default)
Place the file in the appropriate directory:
- Primitive/reusable →
```
src/components/ui/
```
- Composed pattern →
```
src/components/patterns/
```