FrancoStino/ui-component
bundled-skills/ui-component/SKILL.md
Generate a new UI component following the StyleSeed design conventions
$ install --global
skillsauthnpx skillsauth add FrancoStino/opencode-skills-antigravity ui-componentInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 10, 2026, 3:20 AM126.0s1 file scanned
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-01
- license:
- MIT
- license_source:
- https://github.com/bitjaru/styleseed/blob/main/LICENSE
UI Component Generator
When to Use
Use this skill when you need generate a new UI component following the StyleSeed design conventions.
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 design system seed for context:
- Read
CLAUDE.mdfor component conventions - Read
css/theme.cssfor available design tokens - Read
components/ui/button.tsxas a reference pattern
- Read
-
Follow these conventions strictly:
- Use
functiondeclaration (notconst) - Add
data-slot="component-name"attribute - Use
cn()from@/components/ui/utilsfor all className merging - Use
React.ComponentProps<>for prop typing - Always support
classNameprop for overrides - Use CVA (
class-variance-authority) if the component has variants - Use semantic color tokens (
bg-card,text-foreground) — never inline hex
- Use
-
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)]
- Colors:
-
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 ofw-* h-* - Use
ms-*/me-*instead ofml-*/mr-*(logical properties)
- Display (36-48px):
-
Accessibility requirements:
- Minimum touch target: 44x44px (
min-h-11 min-w-11) - Support
aria-*attributes passthrough - Use
focus-visible:ring-2 focus-visible:ring-ringfor keyboard focus - Respect
prefers-reduced-motionfor animations
- Minimum touch target: 44x44px (
-
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/
- Primitive/reusable →
Limitations
- Use this skill only when the task clearly matches its upstream source and local project context.
- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
Related Skills
FrancoStino/llm-security
tools
VerifiedTrustedCommunity
Authorized security assessment of LLM applications and AI agents: prompt injection, tool abuse, RAG exposure, memory poisoning, system-prompt extraction, and agent-compliance engineering per OWASP LLM/ASI Top 10.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/liuguang-banlan-ui
development
VerifiedTrustedCommunity
Builds two parameterized UI modes—流光溢彩白 (iridescent white) and 五彩斑斓黑 (colorful black)—with OKLCH, WebGL/CSS fallback, vision gating, screenshot QA, and total/per-color intensity reports. Use when a UI request names either mode or needs measured color parameters.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/kimi-delegate
tools
VerifiedTrustedCommunity
Delegate coding tasks to the Kimi Code CLI (`kimi`) only when the user explicitly requests it, while the orchestrator retains review and landing responsibility.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/js-reverse
development
VerifiedTrustedCommunity
Front-end JavaScript reverse engineering: locate signature chains, analyze encrypted request parameters, sample runtime behavior, and reproduce logic locally in Node for evidence-based output.
68SKILL.mdUpdated Aug 30, 2026