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.
- package/README.md +4 -4
- package/bundled-skills/.antigravity-install-manifest.json +12 -1
- package/bundled-skills/docs/integrations/jetski-cortex.md +3 -3
- package/bundled-skills/docs/integrations/jetski-gemini-loader/README.md +1 -1
- package/bundled-skills/docs/maintainers/repo-growth-seo.md +3 -3
- package/bundled-skills/docs/maintainers/skills-update-guide.md +1 -1
- package/bundled-skills/docs/users/bundles.md +1 -1
- package/bundled-skills/docs/users/claude-code-skills.md +1 -1
- package/bundled-skills/docs/users/gemini-cli-skills.md +1 -1
- package/bundled-skills/docs/users/getting-started.md +1 -1
- package/bundled-skills/docs/users/kiro-integration.md +1 -1
- package/bundled-skills/docs/users/usage.md +4 -4
- package/bundled-skills/docs/users/visual-guide.md +4 -4
- package/bundled-skills/ui-a11y/SKILL.md +77 -0
- package/bundled-skills/ui-component/SKILL.md +100 -0
- package/bundled-skills/ui-page/SKILL.md +96 -0
- package/bundled-skills/ui-pattern/SKILL.md +88 -0
- package/bundled-skills/ui-review/SKILL.md +86 -0
- package/bundled-skills/ui-setup/SKILL.md +100 -0
- package/bundled-skills/ui-tokens/SKILL.md +69 -0
- package/bundled-skills/ux-audit/SKILL.md +62 -0
- package/bundled-skills/ux-copy/SKILL.md +79 -0
- package/bundled-skills/ux-feedback/SKILL.md +64 -0
- package/bundled-skills/ux-flow/SKILL.md +68 -0
- package/dist/index.js +2 -2
- package/dist/skill-pointer/pointer-generator.js +7 -1
- package/dist/utils/fs.utils.d.ts +0 -6
- package/dist/utils/fs.utils.js +3 -12
- package/package.json +3 -2
- 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
|
|
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
|
|
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/ ←
|
|
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-
|
|
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.
|
|
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.
|
|
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.
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
72
|
+
- All 1,392+ skills from the skills directory
|
|
73
73
|
|
|
74
74
|
## When to Update
|
|
75
75
|
|
|
@@ -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,
|
|
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,
|
|
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
|
|
@@ -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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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)
|