FrancoStino/ui-pattern
bundled-skills/ui-pattern/SKILL.md
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
$ install --global
skillsauthnpx skillsauth add FrancoStino/opencode-skills-antigravity ui-patternInstall 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:21 AM137.8s1 file scanned
SKILL.md
- name:
- ui-pattern
- description:
- Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
- risk:
- unknown
- source:
- https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-pattern
- 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 Pattern Generator
When to Use
Use this skill when you need generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives.
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
- card-section: Card with title + content inside page section (
mx-6) - grid-2col: 2-column grid of cards (
grid grid-cols-2 gap-4 px-6) - scroll-horizontal: Horizontal scrolling card list (
flex gap-3 overflow-x-auto scrollbar-hide) - list-section: Vertical list of items inside a card
- form-section: Form with labeled inputs in a card
- stat-grid: Grid of StatCard components
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 the design system reference:
CLAUDE.mdfor conventionscomponents/ui/for available primitivescomponents/patterns/for existing patterns
-
Compose the pattern from existing components — DO NOT recreate primitives.
-
Follow the design system layout rules:
- Cards:
bg-card rounded-2xl p-6 shadow-[var(--shadow-card)] - Section wrapper:
mx-6for horizontal margin - Section title:
text-foreground font-bold text-[18px] mb-4 - List gap:
space-y-3 - Grid gap:
gap-4
- Cards:
-
Use semantic tokens for all visual properties.
-
Make the pattern a reusable component with props for dynamic content.
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