opencode-skills-collection 2.0.0-beta.1 → 2.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +4 -4
  2. package/bundled-skills/.antigravity-install-manifest.json +12 -1
  3. package/bundled-skills/docs/integrations/jetski-cortex.md +3 -3
  4. package/bundled-skills/docs/integrations/jetski-gemini-loader/README.md +1 -1
  5. package/bundled-skills/docs/maintainers/repo-growth-seo.md +3 -3
  6. package/bundled-skills/docs/maintainers/skills-update-guide.md +1 -1
  7. package/bundled-skills/docs/users/bundles.md +1 -1
  8. package/bundled-skills/docs/users/claude-code-skills.md +1 -1
  9. package/bundled-skills/docs/users/gemini-cli-skills.md +1 -1
  10. package/bundled-skills/docs/users/getting-started.md +1 -1
  11. package/bundled-skills/docs/users/kiro-integration.md +1 -1
  12. package/bundled-skills/docs/users/usage.md +4 -4
  13. package/bundled-skills/docs/users/visual-guide.md +4 -4
  14. package/bundled-skills/ui-a11y/SKILL.md +77 -0
  15. package/bundled-skills/ui-component/SKILL.md +100 -0
  16. package/bundled-skills/ui-page/SKILL.md +96 -0
  17. package/bundled-skills/ui-pattern/SKILL.md +88 -0
  18. package/bundled-skills/ui-review/SKILL.md +86 -0
  19. package/bundled-skills/ui-setup/SKILL.md +100 -0
  20. package/bundled-skills/ui-tokens/SKILL.md +69 -0
  21. package/bundled-skills/ux-audit/SKILL.md +62 -0
  22. package/bundled-skills/ux-copy/SKILL.md +79 -0
  23. package/bundled-skills/ux-feedback/SKILL.md +64 -0
  24. package/bundled-skills/ux-flow/SKILL.md +68 -0
  25. package/dist/index.js +2 -2
  26. package/dist/skill-pointer/pointer-generator.js +7 -1
  27. package/dist/utils/fs.utils.d.ts +0 -6
  28. package/dist/utils/fs.utils.js +3 -12
  29. package/package.json +3 -2
  30. package/skills_index.json +30359 -0
package/README.md CHANGED
@@ -18,7 +18,7 @@
18
18
  > delivered instantly, with zero network latency at startup.
19
19
 
20
20
  > ⚠️ **Previously published
21
- as [`opencode-skills-antigravity`](https://www.npmjs.com/package/opencode-skills-antigravity)** — that package is now
21
+ > as [`opencode-skills-antigravity`](https://www.npmjs.com/package/opencode-skills-antigravity)** — that package is now
22
22
  > deprecated and points to this one.
23
23
 
24
24
  ---
@@ -35,7 +35,7 @@ only loaded into context on demand.
35
35
 
36
36
  ## How It Works
37
37
 
38
- The plugin operates in three phases:
38
+ The plugin operates in two phases:
39
39
 
40
40
  **1. Local deployment (startup)**
41
41
 
@@ -50,7 +50,7 @@ bundled-skills/ (npm package)
50
50
 
51
51
  └── SkillPointer pipeline
52
52
 
53
- ├─ vault-manager → moves 800+ raw skills to the vault
53
+ ├─ vault-manager → moves raw skills to the vault
54
54
  └─ pointer-generator → writes ~35 lightweight pointer files
55
55
  ```
56
56
 
@@ -69,7 +69,7 @@ After the first startup, your `~/.config/opencode/` directory looks like this:
69
69
  ```
70
70
  ~/.config/opencode/
71
71
  ├── opencode.json
72
- ├── skills/ ← ~35 pointer folders (active, read by OpenCode)
72
+ ├── skills/ ← pointer folders (active, read by OpenCode)
73
73
  │ ├── backend-dev-category-pointer/
74
74
  │ │ └── SKILL.md
75
75
  │ ├── devops-category-pointer/
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "updatedAt": "2026-04-08T09:03:21.581Z",
3
+ "updatedAt": "2026-04-09T09:09:48.777Z",
4
4
  "entries": [
5
5
  "00-andruia-consultant",
6
6
  "007",
@@ -1288,7 +1288,14 @@
1288
1288
  "typescript-advanced-types",
1289
1289
  "typescript-expert",
1290
1290
  "typescript-pro",
1291
+ "ui-a11y",
1292
+ "ui-component",
1293
+ "ui-page",
1294
+ "ui-pattern",
1295
+ "ui-review",
1296
+ "ui-setup",
1291
1297
  "ui-skills",
1298
+ "ui-tokens",
1292
1299
  "ui-ux-designer",
1293
1300
  "ui-ux-pro-max",
1294
1301
  "ui-visual-validator",
@@ -1305,6 +1312,10 @@
1305
1312
  "using-neon",
1306
1313
  "using-superpowers",
1307
1314
  "uv-package-manager",
1315
+ "ux-audit",
1316
+ "ux-copy",
1317
+ "ux-feedback",
1318
+ "ux-flow",
1308
1319
  "ux-persuasion-engineer",
1309
1320
  "uxui-principles",
1310
1321
  "variant-analysis",
@@ -1,9 +1,9 @@
1
1
  ---
2
2
  title: Jetski/Cortex + Gemini Integration Guide
3
- description: "Use antigravity-awesome-skills with Jetski/Cortex without hitting context-window overflow with 1.381+ skills."
3
+ description: "Use antigravity-awesome-skills with Jetski/Cortex without hitting context-window overflow with 1.392+ skills."
4
4
  ---
5
5
 
6
- # Jetski/Cortex + Gemini: safe integration with 1,1.381+ skills
6
+ # Jetski/Cortex + Gemini: safe integration with 1,1.392+ skills
7
7
 
8
8
  This guide shows how to integrate the `antigravity-awesome-skills` repository with an agent based on **Jetski/Cortex + Gemini** (or similar frameworks) **without exceeding the model context window**.
9
9
 
@@ -23,7 +23,7 @@ Never do:
23
23
  - concatenate all `SKILL.md` content into a single system prompt;
24
24
  - re-inject the entire library for **every** request.
25
25
 
26
- With over 1,1.381 skills, this approach fills the context window before user messages are even added, causing truncation.
26
+ With over 1,1.392 skills, this approach fills the context window before user messages are even added, causing truncation.
27
27
 
28
28
  ---
29
29
 
@@ -20,7 +20,7 @@ This example shows one way to integrate **antigravity-awesome-skills** with a Je
20
20
  - How to enforce a **maximum number of skills per turn** via `maxSkillsPerTurn`.
21
21
  - How to choose whether to **truncate or error** when too many skills are requested via `overflowBehavior`.
22
22
 
23
- This pattern avoids context overflow when you have 1,381+ skills installed.
23
+ This pattern avoids context overflow when you have 1,392+ skills installed.
24
24
 
25
25
  ---
26
26
 
@@ -6,7 +6,7 @@ This document keeps the repository's GitHub-facing discovery copy aligned with t
6
6
 
7
7
  Preferred positioning:
8
8
 
9
- > Installable GitHub library of 1,381+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants.
9
+ > Installable GitHub library of 1,392+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants.
10
10
 
11
11
  Key framing:
12
12
 
@@ -20,7 +20,7 @@ Key framing:
20
20
 
21
21
  Preferred description:
22
22
 
23
- > Installable GitHub library of 1,381+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.
23
+ > Installable GitHub library of 1,392+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.
24
24
 
25
25
  Preferred homepage:
26
26
 
@@ -28,7 +28,7 @@ Preferred homepage:
28
28
 
29
29
  Preferred social preview:
30
30
 
31
- - use a clean preview image that says `1,381+ Agentic Skills`;
31
+ - use a clean preview image that says `1,392+ Agentic Skills`;
32
32
  - mention Claude Code, Cursor, Codex CLI, and Gemini CLI;
33
33
  - avoid dense text and tiny logos that disappear in social cards.
34
34
 
@@ -69,7 +69,7 @@ For manual updates, you need:
69
69
  The update process refreshes:
70
70
  - Skills index (`skills_index.json`)
71
71
  - Web app skills data (`apps\web-app\public\skills.json`)
72
- - All 1,381+ skills from the skills directory
72
+ - All 1,392+ skills from the skills directory
73
73
 
74
74
  ## When to Update
75
75
 
@@ -673,4 +673,4 @@ Found a skill that should be in a bundle? Or want to create a new bundle? [Open
673
673
 
674
674
  ---
675
675
 
676
- _Last updated: March 2026 | Total Skills: 1,381+ | Total Bundles: 37_
676
+ _Last updated: March 2026 | Total Skills: 1,392+ | Total Bundles: 37_
@@ -12,7 +12,7 @@ Install the library into Claude Code, then invoke focused skills directly in the
12
12
 
13
13
  ## Why use this repo for Claude Code
14
14
 
15
- - It includes 1,381+ skills instead of a narrow single-domain starter pack.
15
+ - It includes 1,392+ skills instead of a narrow single-domain starter pack.
16
16
  - It supports the standard `.claude/skills/` path and the Claude Code plugin marketplace flow.
17
17
  - It also ships generated bundle plugins so teams can install focused packs like `Essentials` or `Security Developer` from the marketplace metadata.
18
18
  - It includes onboarding docs, bundles, and workflows so new users do not need to guess where to begin.
@@ -12,7 +12,7 @@ Install into the Gemini skills path, then ask Gemini to apply one skill at a tim
12
12
 
13
13
  - It installs directly into the expected Gemini skills path.
14
14
  - It includes both core software engineering skills and deeper agent/LLM-oriented skills.
15
- - It helps new users get started with bundles and workflows rather than forcing a cold start from 1,381+ files.
15
+ - It helps new users get started with bundles and workflows rather than forcing a cold start from 1,392+ files.
16
16
  - It is useful whether you want a broad internal skill library or a single repo to test many workflows quickly.
17
17
 
18
18
  ## Install Gemini CLI Skills
@@ -1,4 +1,4 @@
1
- # Getting Started with Antigravity Awesome Skills (V9.9.0)
1
+ # Getting Started with Antigravity Awesome Skills (V9.10.0)
2
2
 
3
3
  **New here? This guide will help you supercharge your AI Agent in 5 minutes.**
4
4
 
@@ -18,7 +18,7 @@ Kiro is AWS's agentic AI IDE that combines:
18
18
 
19
19
  Kiro's agentic capabilities are enhanced by skills that provide:
20
20
 
21
- - **Domain expertise** across 1,381+ specialized areas
21
+ - **Domain expertise** across 1,392+ specialized areas
22
22
  - **Best practices** from Anthropic, OpenAI, Google, Microsoft, and AWS
23
23
  - **Workflow automation** for common development tasks
24
24
  - **AWS-specific patterns** for serverless, infrastructure, and cloud architecture
@@ -14,7 +14,7 @@ If you came in through a **Claude Code** or **Codex** plugin instead of a full l
14
14
 
15
15
  When you ran `npx antigravity-awesome-skills` or cloned the repository, you:
16
16
 
17
- ✅ **Downloaded 1,381+ skill files** to your computer (default: `~/.gemini/antigravity/skills/`; or a custom path like `~/.agent/skills/` if you used `--path`)
17
+ ✅ **Downloaded 1,392+ skill files** to your computer (default: `~/.gemini/antigravity/skills/`; or a custom path like `~/.agent/skills/` if you used `--path`)
18
18
  ✅ **Made them available** to your AI assistant
19
19
  ❌ **Did NOT enable them all automatically** (they're just sitting there, waiting)
20
20
 
@@ -34,7 +34,7 @@ Bundles are **curated groups** of skills organized by role. They help you decide
34
34
 
35
35
  **Analogy:**
36
36
 
37
- - You installed a toolbox with 1,381+ tools (✅ done)
37
+ - You installed a toolbox with 1,392+ tools (✅ done)
38
38
  - Bundles are like **labeled organizer trays** saying: "If you're a carpenter, start with these 10 tools"
39
39
  - You can either **pick skills from the tray** or install that tray as a focused marketplace bundle plugin
40
40
 
@@ -212,7 +212,7 @@ Let's actually use a skill right now. Follow these steps:
212
212
 
213
213
  ## Step 5: Picking Your First Skills (Practical Advice)
214
214
 
215
- Don't try to use all 1,381+ skills at once. Here's a sensible approach:
215
+ Don't try to use all 1,392+ skills at once. Here's a sensible approach:
216
216
 
217
217
  If you want a tool-specific starting point before choosing skills, use:
218
218
 
@@ -343,7 +343,7 @@ Usually no, but if your AI doesn't recognize a skill:
343
343
 
344
344
  ### "Can I load all skills into the model at once?"
345
345
 
346
- No. Even though you have 1,381+ skills installed locally, you should **not** concatenate every `SKILL.md` into a single system prompt or context block.
346
+ No. Even though you have 1,392+ skills installed locally, you should **not** concatenate every `SKILL.md` into a single system prompt or context block.
347
347
 
348
348
  The intended pattern is:
349
349
 
@@ -34,7 +34,7 @@ antigravity-awesome-skills/
34
34
  ├── 📄 CONTRIBUTING.md ← Contributor workflow
35
35
  ├── 📄 CATALOG.md ← Full generated catalog
36
36
 
37
- ├── 📁 skills/ ← 1,381+ skills live here
37
+ ├── 📁 skills/ ← 1,392+ skills live here
38
38
  │ │
39
39
  │ ├── 📁 brainstorming/
40
40
  │ │ └── 📄 SKILL.md ← Skill definition
@@ -47,7 +47,7 @@ antigravity-awesome-skills/
47
47
  │ │ └── 📁 2d-games/
48
48
  │ │ └── 📄 SKILL.md ← Nested skills also supported
49
49
  │ │
50
- │ └── ... (1,381+ total)
50
+ │ └── ... (1,392+ total)
51
51
 
52
52
  ├── 📁 apps/
53
53
  │ └── 📁 web-app/ ← Interactive browser
@@ -100,7 +100,7 @@ antigravity-awesome-skills/
100
100
 
101
101
  ```
102
102
  ┌─────────────────────────┐
103
- │ 1,381+ SKILLS │
103
+ │ 1,392+ SKILLS │
104
104
  └────────────┬────────────┘
105
105
 
106
106
  ┌────────────────────────┼────────────────────────┐
@@ -201,7 +201,7 @@ If you want a workspace-style manual install instead, cloning into `.agent/skill
201
201
  │ ├── 📁 brainstorming/ │
202
202
  │ ├── 📁 stripe-integration/ │
203
203
  │ ├── 📁 react-best-practices/ │
204
- │ └── ... (1,381+ total) │
204
+ │ └── ... (1,392+ total) │
205
205
  └─────────────────────────────────────────┘
206
206
  ```
207
207
 
@@ -0,0 +1,77 @@
1
+ ---
2
+ name: ui-a11y
3
+ description: "Audit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe."
4
+ category: design
5
+ risk: safe
6
+ source: community
7
+ source_repo: bitjaru/styleseed
8
+ source_type: community
9
+ date_added: "2026-04-08"
10
+ author: bitjaru
11
+ tags: [ui, accessibility, wcag, audit, styleseed]
12
+ tools: [claude, cursor, codex, gemini]
13
+ ---
14
+
15
+ # UI Accessibility Audit
16
+
17
+ ## Overview
18
+
19
+ Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill audits components and pages for accessibility issues with an emphasis on the Toss seed's mobile UI patterns. It combines WCAG 2.2 AA checks with practical code fixes for touch targets, focus states, contrast, labels, and reduced motion.
20
+
21
+ ## When to Use
22
+
23
+ - Use when reviewing a page or component for accessibility regressions
24
+ - Use when a StyleSeed UI looks polished but has uncertain keyboard or contrast behavior
25
+ - Use when adding new interactive controls to a mobile-first screen
26
+ - Use when you want a prioritized list of issues and fixable items
27
+
28
+ ## Audit Areas
29
+
30
+ ### Perceivable
31
+
32
+ - text contrast
33
+ - non-text contrast for controls and graphics
34
+ - alt text for images
35
+ - labels for meaningful icons
36
+ - no information conveyed by color alone
37
+
38
+ ### Operable
39
+
40
+ - touch targets at least 44x44px
41
+ - keyboard reachability for all interactive controls
42
+ - logical tab order
43
+ - visible focus indicators
44
+ - reduced-motion support for nonessential animation
45
+
46
+ ### Understandable
47
+
48
+ - visible labels or `aria-label` on inputs
49
+ - error text associated with the correct field
50
+ - clear wording for errors and validation
51
+ - document language set appropriately
52
+
53
+ ### Robust
54
+
55
+ - semantic HTML where possible
56
+ - correct use of ARIA when semantics alone are insufficient
57
+ - no faux buttons or links without the right roles and behavior
58
+
59
+ ## Output
60
+
61
+ Return:
62
+ 1. Issues found, grouped by severity
63
+ 2. Safe autofixes that can be applied directly
64
+ 3. Items that need manual review or product judgment
65
+ 4. A short summary of the accessibility risk level
66
+
67
+ ## Best Practices
68
+
69
+ - Fix semantics before layering on ARIA
70
+ - Use the design system tokens only if they still meet contrast requirements
71
+ - Treat touch target failures as real usability defects, not polish issues
72
+ - Prefer partial, verified fixes over speculative accessibility changes
73
+
74
+ ## Additional Resources
75
+
76
+ - [StyleSeed repository](https://github.com/bitjaru/styleseed)
77
+ - [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-a11y/SKILL.md)
@@ -0,0 +1,100 @@
1
+ ---
2
+ name: ui-component
3
+ description: "Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics."
4
+ category: design
5
+ risk: safe
6
+ source: community
7
+ source_repo: bitjaru/styleseed
8
+ source_type: community
9
+ date_added: "2026-04-08"
10
+ author: bitjaru
11
+ tags: [ui, components, design-system, frontend, styleseed]
12
+ tools: [claude, cursor, codex, gemini]
13
+ ---
14
+
15
+ # UI Component
16
+
17
+ ## Overview
18
+
19
+ Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill generates components that respect the Toss seed's design language instead of improvising ad hoc markup and styling. It emphasizes semantic tokens, predictable typing, reusable variants, and mobile-friendly accessibility defaults.
20
+
21
+ ## When to Use
22
+
23
+ - Use when you need a new UI primitive or composed component inside a StyleSeed-based project
24
+ - Use when you want a component to match the existing Toss seed conventions
25
+ - Use when a component should be reusable, typed, and design-token driven
26
+ - Use when the AI might otherwise invent spacing, colors, or interaction patterns
27
+
28
+ ## How It Works
29
+
30
+ ### Step 1: Read the Local Design Context
31
+
32
+ Before generating code, inspect the seed's source of truth:
33
+ - `CLAUDE.md` for conventions
34
+ - `css/theme.css` for semantic tokens
35
+ - at least one representative component from `components/ui/`
36
+
37
+ If the user already has a better local example, follow the local codebase over a generic template.
38
+
39
+ ### Step 2: Choose the Correct Home
40
+
41
+ Place the output where it belongs:
42
+ - `src/components/ui/` for primitives and low-level building blocks
43
+ - `src/components/patterns/` for composed sections or multi-part patterns
44
+
45
+ Do not create a new primitive if an existing one can be extended safely.
46
+
47
+ ### Step 3: Follow the Structural Rules
48
+
49
+ Use these defaults unless the host project strongly disagrees:
50
+ - function declaration instead of a `const` component
51
+ - `React.ComponentProps<>` or equivalent native prop typing
52
+ - `className` passthrough support
53
+ - `cn()` or the project's standard class merger
54
+ - `data-slot` for component identification
55
+ - CVA or equivalent only when variants are genuinely needed
56
+
57
+ ### Step 4: Use Semantic Tokens Only
58
+
59
+ Do not hardcode visual values if the design system has a token for them.
60
+
61
+ Preferred examples:
62
+ - `bg-card`
63
+ - `text-foreground`
64
+ - `text-muted-foreground`
65
+ - `border-border`
66
+ - `shadow-[var(--shadow-card)]`
67
+
68
+ ### Step 5: Preserve StyleSeed Typography and Spacing
69
+
70
+ - Use the scale already defined by the seed
71
+ - Prefer multiples of 6px
72
+ - Use logical spacing utilities where supported
73
+ - Keep display and heading text tight, body text readable, captions restrained
74
+
75
+ ### Step 6: Bake in Accessibility
76
+
77
+ - Touch targets should be at least 44x44px for interactive elements
78
+ - Keyboard focus must be visible
79
+ - Pass through `aria-*` attributes where appropriate
80
+ - Respect reduced-motion preferences for nonessential motion
81
+
82
+ ## Output
83
+
84
+ Provide:
85
+ 1. The generated component
86
+ 2. The target path
87
+ 3. Any required imports or dependencies
88
+ 4. Notes on variants, tokens, or follow-up integration work
89
+
90
+ ## Best Practices
91
+
92
+ - Compose from existing primitives before inventing new ones
93
+ - Keep the component API small and predictable
94
+ - Prefer semantic layout classes over arbitrary values
95
+ - Export named components unless the host project uses another standard consistently
96
+
97
+ ## Additional Resources
98
+
99
+ - [StyleSeed repository](https://github.com/bitjaru/styleseed)
100
+ - [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-component/SKILL.md)
@@ -0,0 +1,96 @@
1
+ ---
2
+ name: ui-page
3
+ description: "Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components."
4
+ category: design
5
+ risk: safe
6
+ source: community
7
+ source_repo: bitjaru/styleseed
8
+ source_type: community
9
+ date_added: "2026-04-08"
10
+ author: bitjaru
11
+ tags: [ui, page-design, mobile, layout, styleseed]
12
+ tools: [claude, cursor, codex, gemini]
13
+ ---
14
+
15
+ # UI Page
16
+
17
+ ## Overview
18
+
19
+ Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections.
20
+
21
+ ## When to Use
22
+
23
+ - Use when you need a new page in a Toss-seed app
24
+ - Use when you want a consistent page shell, spacing, and navigation structure
25
+ - Use when you are adding a new product flow and need a solid starting layout
26
+ - Use when you want to stay mobile-first even if the project later expands to larger breakpoints
27
+
28
+ ## How It Works
29
+
30
+ ### Step 1: Inspect the Existing Shell
31
+
32
+ Read the current page scaffolding patterns first, especially:
33
+ - page shell
34
+ - top bar
35
+ - bottom navigation
36
+ - representative pages using the same route family
37
+
38
+ ### Step 2: Define the Page Purpose
39
+
40
+ Clarify:
41
+ - the page name
42
+ - the primary user question the screen answers
43
+ - the top one or two actions the user should take
44
+
45
+ Every screen should have one dominant purpose.
46
+
47
+ ### Step 3: Use the Information Pyramid
48
+
49
+ Lay out the page from highest importance to lowest:
50
+ 1. Hero or top summary
51
+ 2. KPI or key actions
52
+ 3. detail cards or supporting modules
53
+ 4. lists, history, or secondary content
54
+
55
+ Avoid repeating the same section type mechanically from top to bottom.
56
+
57
+ ### Step 4: Apply the Toss Layout Rules
58
+
59
+ Default layout choices:
60
+ - mobile viewport width around `max-w-[430px]`
61
+ - page background on `bg-background`
62
+ - horizontal padding around `px-6`
63
+ - section rhythm with `space-y-6`
64
+ - generous bottom padding if a bottom nav is present
65
+ - cards using semantic surface tokens, rounded corners, and light shadows
66
+
67
+ ### Step 5: Compose Instead of Rebuilding
68
+
69
+ Use existing `ui/` and `patterns/` components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them.
70
+
71
+ ### Step 6: Account for Real Device Constraints
72
+
73
+ - handle safe-area insets
74
+ - avoid horizontal overflow
75
+ - keep interactive clusters thumb-friendly
76
+ - ensure long content scrolls cleanly without clipping the bottom navigation
77
+
78
+ ## Output
79
+
80
+ Return:
81
+ 1. The page scaffold
82
+ 2. The chosen section structure
83
+ 3. Reused components and any newly required components
84
+ 4. Empty, loading, and error states that the page will need next
85
+
86
+ ## Best Practices
87
+
88
+ - Keep the first version structurally correct before adding decoration
89
+ - Use one strong hero instead of multiple competing highlights
90
+ - Preserve navigation consistency across sibling screens
91
+ - Prefer reusable section components when the page will likely repeat
92
+
93
+ ## Additional Resources
94
+
95
+ - [StyleSeed repository](https://github.com/bitjaru/styleseed)
96
+ - [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-page/SKILL.md)
@@ -0,0 +1,88 @@
1
+ ---
2
+ name: ui-pattern
3
+ description: "Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives."
4
+ category: design
5
+ risk: safe
6
+ source: community
7
+ source_repo: bitjaru/styleseed
8
+ source_type: community
9
+ date_added: "2026-04-08"
10
+ author: bitjaru
11
+ tags: [ui, patterns, design-system, reuse, styleseed]
12
+ tools: [claude, cursor, codex, gemini]
13
+ ---
14
+
15
+ # UI Pattern
16
+
17
+ ## Overview
18
+
19
+ Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill builds reusable composed patterns from the seed's primitives. It is intended for sections like card lists, grids, form blocks, ranking lists, and chart wrappers that appear across multiple pages and need to look deliberate rather than ad hoc.
20
+
21
+ ## When to Use
22
+
23
+ - Use when you need a reusable layout pattern rather than a one-off page section
24
+ - Use when a page repeats the same arrangement of cards, rows, filters, or data blocks
25
+ - Use when you want to build from existing StyleSeed primitives instead of copying markup
26
+ - Use when you want a pattern component with props for dynamic content
27
+
28
+ ## How It Works
29
+
30
+ ### Step 1: Identify the Pattern Type
31
+
32
+ Common pattern families include:
33
+ - card section
34
+ - two-column grid
35
+ - horizontal scroller
36
+ - list section
37
+ - form section
38
+ - stat grid
39
+ - data table
40
+ - detail card
41
+ - chart card
42
+ - filter bar
43
+ - action sheet
44
+
45
+ ### Step 2: Read the Available Building Blocks
46
+
47
+ Inspect both:
48
+ - `components/ui/` for primitives
49
+ - `components/patterns/` for neighboring patterns that can be extended
50
+
51
+ The goal is composition, not duplication.
52
+
53
+ ### Step 3: Apply StyleSeed Layout Rules
54
+
55
+ Keep the Toss seed defaults intact:
56
+ - card surfaces on semantic tokens
57
+ - rounded corners from the system scale
58
+ - shadow tokens instead of improvised shadow values
59
+ - consistent internal padding
60
+ - section wrappers that align with the page margin system
61
+
62
+ ### Step 4: Make the Pattern Dynamic
63
+
64
+ Expose data through props instead of hardcoding content. If a pattern has multiple variants, keep the API explicit and small.
65
+
66
+ ### Step 5: Keep the Pattern Reusable Across Pages
67
+
68
+ Avoid page-specific assumptions unless the user explicitly wants a one-off section. If the markup only works on one route, it probably belongs in a page component, not a shared pattern.
69
+
70
+ ## Output
71
+
72
+ Provide:
73
+ 1. The generated pattern component
74
+ 2. The target location
75
+ 3. Expected props and usage example
76
+ 4. Notes on which existing primitives were reused
77
+
78
+ ## Best Practices
79
+
80
+ - Start from the smallest existing building block that solves the problem
81
+ - Keep container, section, and item responsibilities separate
82
+ - Use tokens and spacing rules consistently
83
+ - Prefer extending a pattern over adding a near-duplicate sibling
84
+
85
+ ## Additional Resources
86
+
87
+ - [StyleSeed repository](https://github.com/bitjaru/styleseed)
88
+ - [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-pattern/SKILL.md)