Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

UI Component Generator — measured AI agent skill | DecimalAI

bitjaru/ss-component

NewSkillScoreMaintained

Generate a new UI component following the StyleSeed design conventions

Frontendby bitjaru

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/bitjaru-ss-component/SKILL.md

decimalai skills pull bitjaru-ss-component --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/bitjaru-ss-component/SKILL.md https://app.decimal.ai/s/bitjaru-ss-component/SKILL.md

Raw file: /s/bitjaru-ss-component/SKILL.md ↗ · machine-readable summary at /s/bitjaru-ss-component.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 6h ago

—-6% tokens0% turns50% of whole cases pass with skill (11/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-07	✗→✓	▲ Improved	39%	0%
case-08	✗→✓	▲ Improved	-8%	0%
case-02	✗→✓	▲ Improved	23%	0%
case-03	✗→✓	▲ Improved	-9%	0%
case-13	✗→✓	▲ Improved	-17%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

bitjaru / styleseed

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

View on GitHub ↗

License MITImported 8/10/2026Version v2

Skill contents

SKILL.md

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

First, read the compiled design method:

Read .styleseed/effective-rules.md and .styleseed/manifest.json; resolve if stale
Read css/theme.css for available design tokens
Read css/recipes.css for morphology variables and helper classes
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
Pattern surfaces: ss-pattern-surface; insets/controls/icons use the matching ss-* class
Primitives use the project token scale; do not hardcode one radius or shadow personality
Spacing follows one repeatable selected-recipe rhythm
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/

Want to see if bitjaru/ss-component would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.