القائمة
Generate a new UI component following the StyleSeed design conventions
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/ChonSong/skill-retriever --skill ui-componentيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
AI-powered Draw.io diagram generation with real-time browser preview. Create flowcharts, architecture diagrams, sequence diagrams, and cloud infrastructure diagrams (AWS/GCP/Azure) using natural language. Supports animated connectors, real-time editing, and structured A–H format extraction from text or images.
Multi-agent autonomous startup system for Claude Code. Triggers on "Loki Mode". Orchestrates 100+ specialized agents across engineering, QA, DevOps, security, data/ML, business operations, marketing, HR, and customer success. Takes PRD to fully deployed, revenue-generating product with zero human intervention. Features Task tool for subagent dispatch, parallel code review with 3 specialized reviewers, severity-based issue triage, distributed task queue with dead letter handling, automatic deployment to cloud providers, A/B testing, customer feedback loops, incident response, circuit breakers, and self-healing. Handles rate limits via distributed state checkpoints and auto-resume with exponential backoff. Requires --dangerously-skip-permissions flag.
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this,"...
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | ui-component |
| description | Generate a new UI component following the StyleSeed design conventions |
| risk | unknown |
| source | https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-component |
| source_repo | bitjaru/styleseed |
| source_type | community |
| date_added | 2026-07-01T00:00:00.000Z |
| license | MIT |
| license_source | https://github.com/bitjaru/styleseed/blob/main/LICENSE |
Use this skill when you need generate a new UI component following the StyleSeed design conventions.
/ss-page/ss-patterncomponents/ui/ directory or no Tailwind v4)Generate a new component: $0 Description: $ARGUMENTS
First, read the design system seed for context:
CLAUDE.md for component conventionscss/theme.css for available design tokenscomponents/ui/button.tsx as a reference patternFollow these conventions strictly:
function declaration (not const)data-slot="component-name" attributecn() from @/components/ui/utils for all className mergingReact.ComponentProps<> for prop typingclassName prop for overridesclass-variance-authority) if the component has variantsbg-card, text-foreground) — never inline hexDesign token usage:
text-foreground, bg-card, text-brand, text-muted-foreground, border-bordershadow-[var(--shadow-card)], shadow-[var(--shadow-elevated)]rounded-md, rounded-lg, rounded-2xlp-1.5, p-3, p-6)duration-[var(--duration-fast)], ease-[var(--ease-default)]Typography rules:
leading-none tracking-[-0.02em]leading-snug tracking-[-0.01em]leading-normal (default tracking)tracking-[0.05em]size-* shorthand instead of w-* h-*ms-*/me-* instead of ml-*/mr-* (logical properties)Accessibility requirements:
min-h-11 min-w-11)aria-* attributes passthroughfocus-visible:ring-2 focus-visible:ring-ring for keyboard focusprefers-reduced-motion for animationsExport the component as a named export (not default)
Place the file in the appropriate directory:
src/components/ui/src/components/patterns/