Ready to supercharge your AI agents?

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

Get Started Free →

UI Pattern Generator — measured AI agent skill | DecimalAI

bitjaru/ss-pattern

NewSkillScoreMaintained

Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives

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-pattern/SKILL.md

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

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

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

Raw file: /s/bitjaru-ss-pattern/SKILL.md ↗ · machine-readable summary at /s/bitjaru-ss-pattern.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 2h ago

—+5% tokens0% turns32% of whole cases pass with skill (7/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-04	✗→✓	▲ Improved	12%	0%
case-05	✗→✓	▲ Improved	-69%	0%
case-06	✗→✓	▲ Improved	-83%	0%
case-11	✗→✓	▲ Improved	-38%	0%
case-14	✗→✓	▲ Improved	-9%	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-pattern/SKILL.md

View on GitHub ↗

License MITImported 8/10/2026Version v2

Skill contents

SKILL.md

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

focal-summary: one dominant state, briefing, artifact, or decision
panel-section: aligned workbench panel with related controls and evidence
flat-step: public-service task step with explicit labels, help, and recovery
reading-section: bounded prose, figure, caption, quote, or source group without app cards
resource-collection: rows, table, grid, or sequence selected by the recipe and user job
canvas-tools: focused artifact/canvas with quiet supporting tool groups

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 .styleseed/effective-rules.md and .styleseed/manifest.json. Resolve first when stale.

Then inspect:

components/ui/ for available primitives
components/patterns/ for existing patterns

Compose the pattern from existing components — DO NOT recreate primitives.

Follow the selected recipe rather than one default card language:

Use ss-pattern-surface only when containment is earned.
Use ss-page-gutter or ss-page-padding instead of hardcoded universal gutters.
Use ss-pattern-inset, ss-pattern-control, and ss-pattern-icon for recipe-aware shape.
Public-service and editorial recipes usually prefer flat flow, rules, and whitespace.
Enterprise/developer recipes prefer aligned panels, rows, tables, and compact controls.
Calm-consumer may use soft groups; expressive-brand must add a product-specific composition.

Use semantic tokens for all visual properties.

Make the pattern a reusable component with props for dynamic content.

Run /ss-score and verify that the pattern has a functional relationship to its page

instead of being an isolated pretty card.

Want to see if bitjaru/ss-pattern 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.