skillZs
★ LIVE SKILL TAGS ★
>>> LIVE SKILLS INDEX <<<
* OPEN SOURCE *
NO LOGIN, NO TRACKING
※ REAL INSTALL DATA ※
← back to all skills
bitjaru/styleseed129 installs

ss-component

Generate a new UI component following the StyleSeed design conventions

How do I install this agent skill?

npx skills add https://github.com/bitjaru/styleseed --skill ss-component
view source ↗

Is this agent skill safe to install?

  • Gen Agent Trust Hubpass

    The skill is a template generator for UI components. It follows standard development practices and contains no malicious code, remote downloads, or obfuscation. It utilizes standard project tools and local files for context.

  • Socketpass

    No alerts

  • Snykpass

    Risk: LOW · No issues

What does this agent skill do?

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/

How can the creator link this skill?

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/bitjaru/styleseed/ss-component">View ss-component on skillZs</a>