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/seo-drift
data-ai
VerifiedTrustedCommunity
Snapshot a site's SEO state and detect ranking, indexation, metadata, canonical, robots, schema, and on-page regressions over time.
57SKILL.mdUpdated Jul 27, 2026
FrancoStino/orchestrate
development
VerifiedTrustedCommunity
Coordinate focused subagents on substantial work, keep their ownership non-overlapping, and integrate verified results. Use for large-scope Codex tasks; keep trivial work with the coordinator.
57SKILL.mdUpdated Jul 27, 2026
FrancoStino/find-complementary-founders
data-ai
VerifiedTrustedCommunity
Use when an owner asks to find a cofounder or project partner. Assess only that agent's own owner and rank only approved profiles other agents posted for their own owners.
57SKILL.mdUpdated Jul 27, 2026
FrancoStino/fedora-hyprland-installer
devops
VerifiedTrustedCommunity
Install, configure, verify, repair, update, and uninstall Hyprland on Fedora Linux with GPU-aware detection (NVIDIA/AMD/Intel).
57SKILL.mdUpdated Jul 27, 2026