ginskill-init 2.7.0

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 (128) hide show
  1. package/.wrangler/cache/pages.json +4 -0
  2. package/.wrangler/cache/wrangler-account.json +6 -0
  3. package/DEVELOPMENT.md +510 -0
  4. package/README.md +104 -0
  5. package/agents/developer.md +56 -0
  6. package/agents/frontend-design.md +69 -0
  7. package/agents/mobile-reviewer.md +36 -0
  8. package/agents/review-code.md +49 -0
  9. package/agents/security-scanner.md +50 -0
  10. package/agents/tester.md +72 -0
  11. package/bin/cli.js +461 -0
  12. package/landing/ai-build-ai.png +0 -0
  13. package/landing/index.html +1495 -0
  14. package/landing/logo.png +0 -0
  15. package/package.json +37 -0
  16. package/skills/active-life-dev/SKILL.md +157 -0
  17. package/skills/active-life-dev/docs/auth.md +187 -0
  18. package/skills/active-life-dev/docs/customers.md +216 -0
  19. package/skills/active-life-dev/docs/integrations.md +209 -0
  20. package/skills/active-life-dev/docs/inventory.md +192 -0
  21. package/skills/active-life-dev/docs/modules.md +181 -0
  22. package/skills/active-life-dev/docs/orders.md +180 -0
  23. package/skills/active-life-dev/docs/patterns.md +319 -0
  24. package/skills/active-life-dev/docs/products.md +216 -0
  25. package/skills/active-life-dev/docs/schema.md +502 -0
  26. package/skills/active-life-dev/docs/setup.md +169 -0
  27. package/skills/active-life-dev/docs/vouchers.md +144 -0
  28. package/skills/ai-asset-generator/SKILL.md +247 -0
  29. package/skills/ai-asset-generator/docs/gen-image.md +274 -0
  30. package/skills/ai-asset-generator/docs/genvideo.md +341 -0
  31. package/skills/ai-asset-generator/docs/remove-background.md +19 -0
  32. package/skills/ai-asset-generator/lib/bg-remove.mjs +34 -0
  33. package/skills/ai-asset-generator/lib/env.mjs +48 -0
  34. package/skills/ai-asset-generator/lib/kie-client.mjs +100 -0
  35. package/skills/ai-build-ai/SKILL.md +127 -0
  36. package/skills/ai-build-ai/docs/agent-teams.md +293 -0
  37. package/skills/ai-build-ai/docs/checkpointing.md +161 -0
  38. package/skills/ai-build-ai/docs/create-agent.md +399 -0
  39. package/skills/ai-build-ai/docs/create-mcp.md +395 -0
  40. package/skills/ai-build-ai/docs/create-skill.md +299 -0
  41. package/skills/ai-build-ai/docs/headless-mode.md +614 -0
  42. package/skills/ai-build-ai/docs/hooks.md +578 -0
  43. package/skills/ai-build-ai/docs/memory-claude-md.md +375 -0
  44. package/skills/ai-build-ai/docs/output-styles.md +208 -0
  45. package/skills/ai-build-ai/docs/overview.md +162 -0
  46. package/skills/ai-build-ai/docs/permissions.md +391 -0
  47. package/skills/ai-build-ai/docs/plugins.md +396 -0
  48. package/skills/ai-build-ai/docs/sandbox.md +262 -0
  49. package/skills/ai-build-ai/docs/team-lead-workflow.md +648 -0
  50. package/skills/ant-design/SKILL.md +323 -0
  51. package/skills/ant-design/docs/components.md +160 -0
  52. package/skills/ant-design/docs/data-entry.md +406 -0
  53. package/skills/ant-design/docs/display.md +594 -0
  54. package/skills/ant-design/docs/feedback.md +451 -0
  55. package/skills/ant-design/docs/key-components.md +414 -0
  56. package/skills/ant-design/docs/navigation.md +310 -0
  57. package/skills/ant-design/docs/pro-components.md +543 -0
  58. package/skills/ant-design/docs/setup.md +213 -0
  59. package/skills/ant-design/docs/theme.md +265 -0
  60. package/skills/flutter-performance/SKILL.md +803 -0
  61. package/skills/flutter-performance/references/flutter-patterns.md +595 -0
  62. package/skills/icon-generator/SKILL.md +270 -0
  63. package/skills/mobile-app-review/SKILL.md +321 -0
  64. package/skills/mobile-app-review/references/apple-review.md +132 -0
  65. package/skills/mobile-app-review/references/google-play-review.md +203 -0
  66. package/skills/mongodb/SKILL.md +667 -0
  67. package/skills/mongodb/references/mongoose-patterns.md +368 -0
  68. package/skills/nestjs-architecture/SKILL.md +1086 -0
  69. package/skills/nestjs-architecture/references/advanced-patterns.md +590 -0
  70. package/skills/performance/SKILL.md +509 -0
  71. package/skills/react-fsd-architecture/SKILL.md +693 -0
  72. package/skills/react-fsd-architecture/references/fsd-patterns.md +747 -0
  73. package/skills/react-native-expo/SKILL.md +128 -0
  74. package/skills/react-native-expo/references/data-layer.md +252 -0
  75. package/skills/react-native-expo/references/design-system.md +252 -0
  76. package/skills/react-native-expo/references/navigation.md +199 -0
  77. package/skills/react-native-expo/references/performance.md +229 -0
  78. package/skills/react-native-expo/references/platform-services.md +179 -0
  79. package/skills/react-native-expo/references/state-management.md +209 -0
  80. package/skills/react-native-expo/references/ui-patterns.md +301 -0
  81. package/skills/react-query/SKILL.md +685 -0
  82. package/skills/react-query/references/query-patterns.md +365 -0
  83. package/skills/review-code/SKILL.md +374 -0
  84. package/skills/review-code/references/clean-code-principles.md +395 -0
  85. package/skills/review-code/references/frontend-patterns.md +136 -0
  86. package/skills/review-code/references/nestjs-patterns.md +184 -0
  87. package/skills/security-scanner/SKILL.md +366 -0
  88. package/skills/security-scanner/references/nestjs-security.md +260 -0
  89. package/skills/security-scanner/references/nextjs-security.md +201 -0
  90. package/skills/security-scanner/references/react-native-security.md +199 -0
  91. package/skills/traefik/SKILL.md +105 -0
  92. package/skills/traefik/docs/advanced-routing.md +186 -0
  93. package/skills/traefik/docs/auth-providers.md +137 -0
  94. package/skills/traefik/docs/cicd-devops.md +396 -0
  95. package/skills/traefik/docs/core-config.md +171 -0
  96. package/skills/traefik/docs/distributed-config.md +96 -0
  97. package/skills/traefik/docs/docker-compose.md +182 -0
  98. package/skills/traefik/docs/ha-performance.md +177 -0
  99. package/skills/traefik/docs/kubernetes.md +278 -0
  100. package/skills/traefik/docs/middleware.md +205 -0
  101. package/skills/traefik/docs/monitoring.md +357 -0
  102. package/skills/traefik/docs/security.md +391 -0
  103. package/skills/traefik/docs/tls-acme.md +155 -0
  104. package/skills/ui-ux-pro-max/SKILL.md +377 -0
  105. package/skills/ui-ux-pro-max/data/charts.csv +26 -0
  106. package/skills/ui-ux-pro-max/data/colors.csv +97 -0
  107. package/skills/ui-ux-pro-max/data/icons.csv +101 -0
  108. package/skills/ui-ux-pro-max/data/landing.csv +31 -0
  109. package/skills/ui-ux-pro-max/data/products.csv +97 -0
  110. package/skills/ui-ux-pro-max/data/react-performance.csv +45 -0
  111. package/skills/ui-ux-pro-max/data/stacks/astro.csv +54 -0
  112. package/skills/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
  113. package/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
  114. package/skills/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -0
  115. package/skills/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
  116. package/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
  117. package/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
  118. package/skills/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
  119. package/skills/ui-ux-pro-max/data/stacks/react.csv +54 -0
  120. package/skills/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
  121. package/skills/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
  122. package/skills/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
  123. package/skills/ui-ux-pro-max/data/stacks/vue.csv +50 -0
  124. package/skills/ui-ux-pro-max/data/styles.csv +68 -0
  125. package/skills/ui-ux-pro-max/data/typography.csv +58 -0
  126. package/skills/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
  127. package/skills/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
  128. package/skills/ui-ux-pro-max/data/web-interface.csv +31 -0
package/landing/index.html ADDED
@@ -0,0 +1,1495 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GinStudio Skills — Supercharge Claude Code</title>
7
+ <meta name="description" content="Install production-ready skills and agents for Claude Code with one command. <!-- AUTO:META_COUNTS -->16 skills, 6 agents<!-- /AUTO:META_COUNTS -->, interactive TUI.">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
13
+
14
+ :root {
15
+ --bg-deep: #FFFFFF;
16
+ --bg-primary: #F8FAFC;
17
+ --bg-card: #FFFFFF;
18
+ --bg-card-hover: #F1F5F9;
19
+ --border: #E2E8F0;
20
+ --border-subtle: #F1F5F9;
21
+ --text-primary: #0F172A;
22
+ --text-secondary: #475569;
23
+ --text-muted: #94A3B8;
24
+ --green: #16A34A;
25
+ --green-dim: #15803D;
26
+ --green-glow: rgba(22, 163, 74, 0.08);
27
+ --green-glow-strong: rgba(22, 163, 74, 0.15);
28
+ --cyan: #0891B2;
29
+ --cyan-dim: rgba(8, 145, 178, 0.06);
30
+ --purple: #7C3AED;
31
+ --purple-dim: rgba(124, 58, 237, 0.06);
32
+ --amber: #D97706;
33
+ --amber-dim: rgba(217, 119, 6, 0.06);
34
+ --rose: #E11D48;
35
+ --rose-dim: rgba(225, 29, 72, 0.06);
36
+ --blue: #2563EB;
37
+ --blue-dim: rgba(37, 99, 235, 0.06);
38
+ --terminal-bg: #1E1E2E;
39
+ --terminal-header: #252537;
40
+ --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
41
+ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
42
+ --radius: 12px;
43
+ --radius-lg: 16px;
44
+ --max-w: 1200px;
45
+ --transition: 200ms ease;
46
+ }
47
+
48
+ html { scroll-behavior: smooth; }
49
+ body {
50
+ font-family: var(--font-sans);
51
+ background: var(--bg-deep);
52
+ color: var(--text-primary);
53
+ line-height: 1.6;
54
+ -webkit-font-smoothing: antialiased;
55
+ overflow-x: hidden;
56
+ }
57
+ a { color: var(--green); text-decoration: none; transition: color var(--transition); }
58
+ a:hover { color: #15803D; }
59
+ code {
60
+ font-family: var(--font-mono); font-size: 0.9em;
61
+ background: #F1F5F9; padding: 2px 6px; border-radius: 4px;
62
+ color: var(--text-primary);
63
+ }
64
+
65
+ .grid-bg {
66
+ position: fixed; inset: 0; z-index: 0; pointer-events: none;
67
+ background-image:
68
+ linear-gradient(#F1F5F9 1px, transparent 1px),
69
+ linear-gradient(90deg, #F1F5F9 1px, transparent 1px);
70
+ background-size: 60px 60px;
71
+ }
72
+ .grid-bg::after {
73
+ content: ''; position: absolute; inset: 0;
74
+ background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(22, 163, 74, 0.04), transparent);
75
+ }
76
+
77
+ /* ─── Navbar ─── */
78
+ .navbar {
79
+ position: fixed; top: 16px; left: 16px; right: 16px; z-index: 100;
80
+ max-width: var(--max-w); margin: 0 auto;
81
+ background: rgba(255, 255, 255, 0.8);
82
+ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
83
+ border: 1px solid var(--border);
84
+ border-radius: var(--radius-lg);
85
+ padding: 12px 24px;
86
+ display: flex; align-items: center; justify-content: space-between;
87
+ transition: background var(--transition);
88
+ box-shadow: 0 1px 3px rgba(0,0,0,0.04);
89
+ }
90
+ .nav-brand {
91
+ display: flex; align-items: center; gap: 10px;
92
+ font-family: var(--font-mono); font-weight: 700; font-size: 18px;
93
+ color: var(--text-primary);
94
+ }
95
+ .nav-brand .logo-icon {
96
+ width: 32px; height: 32px;
97
+ border-radius: 8px;
98
+ object-fit: contain;
99
+ }
100
+ .nav-links { display: flex; gap: 24px; align-items: center; }
101
+ .nav-links a {
102
+ color: var(--text-secondary); font-size: 14px; font-weight: 500;
103
+ transition: color var(--transition);
104
+ }
105
+ .nav-links a:hover { color: var(--text-primary); }
106
+ .nav-cta {
107
+ background: var(--green); color: #FFFFFF !important;
108
+ padding: 8px 20px; border-radius: 8px; font-weight: 600; font-size: 14px;
109
+ cursor: pointer; transition: all var(--transition);
110
+ }
111
+ .nav-cta:hover { background: #15803D; transform: translateY(-1px); }
112
+ .mobile-toggle { display: none; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; }
113
+
114
+ /* ─── Sections ─── */
115
+ section { position: relative; z-index: 1; }
116
+ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
117
+
118
+ /* ─── Hero ─── */
119
+ .hero { padding: 160px 0 100px; text-align: center; }
120
+ .hero-badge {
121
+ display: inline-flex; align-items: center; gap: 8px;
122
+ background: var(--green-glow); border: 1px solid rgba(34, 197, 94, 0.2);
123
+ border-radius: 100px; padding: 6px 16px;
124
+ font-size: 13px; font-weight: 500; color: var(--green);
125
+ margin-bottom: 28px;
126
+ }
127
+ .hero-badge .dot {
128
+ width: 6px; height: 6px; border-radius: 50%; background: var(--green);
129
+ animation: pulse-dot 2s ease-in-out infinite;
130
+ }
131
+ @keyframes pulse-dot {
132
+ 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
133
+ 50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
134
+ }
135
+ .hero h1 {
136
+ font-family: var(--font-sans); font-weight: 700;
137
+ font-size: clamp(36px, 6vw, 64px); line-height: 1.1;
138
+ margin-bottom: 20px;
139
+ color: var(--text-primary);
140
+ }
141
+ .hero h1 span {
142
+ background: linear-gradient(135deg, var(--green), #0D9488);
143
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
144
+ background-clip: text;
145
+ }
146
+ .hero-sub {
147
+ font-size: clamp(16px, 2.5vw, 20px); color: var(--text-secondary);
148
+ max-width: 600px; margin: 0 auto 40px; line-height: 1.7; font-weight: 400;
149
+ }
150
+
151
+ /* ─── Terminal ─── */
152
+ .terminal-wrapper {
153
+ max-width: 680px; margin: 0 auto 48px;
154
+ border-radius: var(--radius-lg); overflow: hidden;
155
+ border: 1px solid #CBD5E1;
156
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.04);
157
+ }
158
+ .terminal-header {
159
+ background: var(--terminal-header); padding: 12px 16px;
160
+ display: flex; align-items: center; gap: 8px;
161
+ border-bottom: 1px solid rgba(255,255,255,0.06);
162
+ }
163
+ .terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
164
+ .terminal-dot.red { background: #EF4444; }
165
+ .terminal-dot.yellow { background: #FBBF24; }
166
+ .terminal-dot.green { background: #22C55E; }
167
+ .terminal-title {
168
+ flex: 1; text-align: center;
169
+ font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
170
+ }
171
+ .terminal-body {
172
+ background: var(--terminal-bg); padding: 24px;
173
+ font-family: var(--font-mono); font-size: 14px;
174
+ line-height: 1.8; min-height: 200px; text-align: left;
175
+ }
176
+ .term-prompt { color: #22C55E; }
177
+ .term-command { color: #F8FAFC; }
178
+ .term-output { color: #94A3B8; }
179
+ .term-success { color: #22C55E; }
180
+ .term-accent { color: #22D3EE; }
181
+ .term-warn { color: #FBBF24; }
182
+ .cursor-blink {
183
+ display: inline-block; width: 8px; height: 18px;
184
+ background: #22C55E; vertical-align: text-bottom;
185
+ animation: blink 1s step-end infinite;
186
+ }
187
+ @keyframes blink { 50% { opacity: 0; } }
188
+
189
+ /* ─── Buttons ─── */
190
+ .hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
191
+ .btn-primary {
192
+ background: var(--green); color: #FFFFFF;
193
+ padding: 14px 32px; border-radius: 10px; font-weight: 600; font-size: 16px;
194
+ border: none; cursor: pointer; transition: all var(--transition);
195
+ display: inline-flex; align-items: center; gap: 8px;
196
+ font-family: var(--font-sans);
197
+ }
198
+ .btn-primary:hover { background: #15803D; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,163,74,0.2); }
199
+ .btn-secondary {
200
+ background: transparent; color: var(--text-primary);
201
+ padding: 14px 32px; border-radius: 10px; font-weight: 600; font-size: 16px;
202
+ border: 1px solid var(--border); cursor: pointer; transition: all var(--transition);
203
+ font-family: var(--font-sans);
204
+ }
205
+ .btn-secondary:hover { border-color: var(--text-muted); background: rgba(255,255,255,0.03); }
206
+
207
+ /* ─── Stats ─── */
208
+ .stats-bar { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; padding: 48px 0 0; }
209
+ .stat { text-align: center; }
210
+ .stat-number { font-family: var(--font-mono); font-weight: 700; font-size: 36px; color: var(--green); display: block; }
211
+ .stat-label { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
212
+
213
+ /* ─── Section Headers ─── */
214
+ .section-header { text-align: center; margin-bottom: 56px; }
215
+ .section-tag {
216
+ font-family: var(--font-mono); font-size: 13px;
217
+ color: var(--green); letter-spacing: 2px; text-transform: uppercase;
218
+ margin-bottom: 12px;
219
+ }
220
+ .section-header h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; margin-bottom: 16px; }
221
+ .section-header p { font-size: 17px; color: var(--text-secondary); max-width: 600px; margin: 0 auto; }
222
+
223
+ /* ─── Features Grid ─── */
224
+ .features { padding: 80px 0; background: #F8FAFC; }
225
+ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
226
+ .feature-card {
227
+ background: #FFFFFF;
228
+ border: 1px solid var(--border);
229
+ border-radius: var(--radius-lg);
230
+ padding: 32px; transition: all var(--transition); cursor: default;
231
+ box-shadow: 0 1px 3px rgba(0,0,0,0.03);
232
+ }
233
+ .feature-card:hover {
234
+ border-color: #CBD5E1; background: #FFFFFF;
235
+ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08);
236
+ }
237
+ .feature-icon {
238
+ width: 48px; height: 48px; border-radius: 12px;
239
+ display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
240
+ }
241
+ .feature-icon svg { width: 24px; height: 24px; }
242
+ .feature-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
243
+ .feature-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
244
+
245
+ /* ─── Skills Showcase ─── */
246
+ .skills-section { padding: 80px 0; }
247
+ .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 16px; }
248
+ .skill-card {
249
+ background: #FFFFFF;
250
+ border: 1px solid var(--border);
251
+ border-radius: var(--radius);
252
+ padding: 20px; transition: all var(--transition); cursor: default;
253
+ box-shadow: 0 1px 3px rgba(0,0,0,0.03);
254
+ }
255
+ .skill-card:hover {
256
+ border-color: #CBD5E1; background: #FFFFFF;
257
+ transform: translateY(-2px);
258
+ box-shadow: 0 8px 24px rgba(0,0,0,0.06);
259
+ }
260
+ .skill-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
261
+ .skill-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
262
+ .skill-info h4 { font-family: var(--font-mono); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
263
+ .skill-info p {
264
+ font-size: 12px; color: var(--text-muted); line-height: 1.5;
265
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
266
+ }
267
+ .skill-install {
268
+ display: flex; align-items: center; gap: 8px;
269
+ background: var(--terminal-bg); border: 1px solid #334155;
270
+ border-radius: 8px; padding: 8px 12px;
271
+ font-family: var(--font-mono); font-size: 11px; color: #94A3B8;
272
+ margin-top: 10px; position: relative; overflow: hidden;
273
+ }
274
+ .skill-install .si-dollar { color: #22C55E; flex-shrink: 0; }
275
+ .skill-install .si-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; color: #E2E8F0; }
276
+ .skill-install .si-copy {
277
+ background: none; border: 1px solid #475569;
278
+ color: #94A3B8; border-radius: 4px; padding: 2px 8px;
279
+ font-size: 10px; cursor: pointer; transition: all var(--transition);
280
+ font-family: var(--font-mono); flex-shrink: 0;
281
+ }
282
+ .skill-install .si-copy:hover { color: #F8FAFC; border-color: #64748B; }
283
+ .skill-install .si-copy.copied { color: #22C55E; border-color: #22C55E; }
284
+
285
+ /* ─── See More Toggle ─── */
286
+ .see-more-btn {
287
+ background: none; border: none; color: var(--text-muted);
288
+ font-size: 12px; font-family: var(--font-sans); font-weight: 500;
289
+ cursor: pointer; padding: 6px 0 0; transition: color var(--transition);
290
+ display: flex; align-items: center; gap: 6px;
291
+ }
292
+ .see-more-btn:hover { color: var(--text-secondary); }
293
+ .see-more-btn svg {
294
+ width: 14px; height: 14px; transition: transform var(--transition);
295
+ }
296
+ .see-more-btn.open svg { transform: rotate(180deg); }
297
+ .more-commands {
298
+ max-height: 0; overflow: hidden;
299
+ transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
300
+ opacity: 0; margin-top: 0;
301
+ }
302
+ .more-commands.open {
303
+ max-height: 500px; opacity: 1; margin-top: 8px;
304
+ }
305
+ .more-commands .skill-install { margin-top: 6px; }
306
+ .more-commands .more-label {
307
+ font-size: 10px; font-family: var(--font-mono); text-transform: uppercase;
308
+ letter-spacing: 1px; color: #64748B; margin: 6px 0 2px; padding-left: 2px;
309
+ }
310
+
311
+ /* ─── Agents Showcase ─── */
312
+ .agents-section { padding: 80px 0; background: #F8FAFC; }
313
+ .agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; }
314
+ .agent-card {
315
+ background: #FFFFFF;
316
+ border: 1px solid var(--border);
317
+ border-radius: var(--radius-lg);
318
+ padding: 28px; transition: all var(--transition); cursor: default;
319
+ position: relative; overflow: hidden;
320
+ box-shadow: 0 1px 3px rgba(0,0,0,0.03);
321
+ }
322
+ .agent-card::before {
323
+ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
324
+ background: linear-gradient(90deg, var(--green), #0D9488);
325
+ opacity: 0; transition: opacity var(--transition);
326
+ }
327
+ .agent-card:hover {
328
+ border-color: #CBD5E1; background: #FFFFFF;
329
+ transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.06);
330
+ }
331
+ .agent-card:hover::before { opacity: 1; }
332
+ .agent-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
333
+ .agent-avatar {
334
+ width: 40px; height: 40px; border-radius: 10px;
335
+ display: flex; align-items: center; justify-content: center;
336
+ font-family: var(--font-mono); font-weight: 700; font-size: 16px;
337
+ }
338
+ .agent-card h4 { font-size: 16px; font-weight: 600; }
339
+ .agent-card .agent-type { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
340
+ .agent-card > p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
341
+
342
+ /* ─── CLI Reference ─── */
343
+ .cli-section { padding: 80px 0; }
344
+ .cli-tabs {
345
+ display: flex; gap: 4px; margin-bottom: 24px; flex-wrap: wrap;
346
+ border-bottom: 1px solid var(--border-subtle); padding-bottom: 0;
347
+ }
348
+ .cli-tab {
349
+ background: none; border: none; border-bottom: 2px solid transparent;
350
+ color: var(--text-muted); padding: 10px 20px; font-size: 14px; font-weight: 600;
351
+ cursor: pointer; transition: all var(--transition);
352
+ font-family: var(--font-sans);
353
+ }
354
+ .cli-tab:hover { color: var(--text-secondary); }
355
+ .cli-tab.active { color: var(--green); border-bottom-color: var(--green); }
356
+ .cli-panel { display: none; }
357
+ .cli-panel.active { display: block; }
358
+ .cli-block {
359
+ background: #FFFFFF;
360
+ border: 1px solid var(--border);
361
+ border-radius: var(--radius); margin-bottom: 16px; overflow: hidden;
362
+ box-shadow: 0 1px 3px rgba(0,0,0,0.03);
363
+ }
364
+ .cli-block-header {
365
+ padding: 14px 20px; border-bottom: 1px solid var(--border-subtle);
366
+ display: flex; align-items: center; justify-content: space-between;
367
+ }
368
+ .cli-block-header h4 { font-size: 15px; font-weight: 600; }
369
+ .cli-block-header .cli-badge {
370
+ font-family: var(--font-mono); font-size: 11px; padding: 2px 8px;
371
+ border-radius: 4px; font-weight: 500;
372
+ }
373
+ .cli-block-body {
374
+ padding: 16px 20px; font-family: var(--font-mono); font-size: 13px; line-height: 2;
375
+ position: relative;
376
+ background: var(--terminal-bg); color: #F8FAFC;
377
+ border-radius: 0 0 var(--radius) var(--radius);
378
+ }
379
+ .cli-block-body .copy-btn {
380
+ position: absolute; top: 10px; right: 12px;
381
+ background: #334155; border: 1px solid #475569;
382
+ color: #94A3B8; border-radius: 6px; padding: 4px 10px;
383
+ font-size: 11px; cursor: pointer; transition: all var(--transition);
384
+ font-family: var(--font-mono);
385
+ }
386
+ .cli-block-body .copy-btn:hover { color: #F8FAFC; border-color: #64748B; }
387
+ .cli-block-body .copy-btn.copied { color: #22C55E; border-color: #22C55E; }
388
+ .cc { color: #64748B; }
389
+ .cp { color: #22C55E; }
390
+ .cf { color: #FBBF24; }
391
+ .cv { color: #22D3EE; }
392
+ .ct { color: #F8FAFC; }
393
+
394
+ /* ─── Flags Table ─── */
395
+ .flags-table {
396
+ width: 100%; border-collapse: collapse; margin-top: 8px;
397
+ font-size: 14px;
398
+ }
399
+ .flags-table th {
400
+ text-align: left; padding: 10px 16px;
401
+ background: #F8FAFC;
402
+ border-bottom: 1px solid var(--border);
403
+ font-weight: 600; font-size: 13px; color: var(--text-secondary);
404
+ }
405
+ .flags-table td {
406
+ padding: 10px 16px; border-bottom: 1px solid var(--border);
407
+ color: var(--text-secondary);
408
+ }
409
+ .flags-table td:first-child {
410
+ font-family: var(--font-mono); font-size: 13px; color: #B45309;
411
+ white-space: nowrap;
412
+ }
413
+ .flags-table td:nth-child(2) {
414
+ font-family: var(--font-mono); font-size: 13px; color: var(--text-muted);
415
+ white-space: nowrap;
416
+ }
417
+
418
+ /* ─── Build Your Own Skill ─── */
419
+ .build-section { padding: 100px 0; overflow: hidden; }
420
+ .build-inner {
421
+ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
422
+ }
423
+ .build-left .section-tag { text-align: left; }
424
+ .build-left h2 {
425
+ font-size: clamp(28px, 4vw, 40px); font-weight: 700;
426
+ line-height: 1.2; margin-bottom: 12px; text-align: left;
427
+ }
428
+ .build-left h2 span {
429
+ background: linear-gradient(135deg, var(--green), var(--cyan));
430
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
431
+ background-clip: text;
432
+ }
433
+ .build-left > p {
434
+ font-size: 16px; color: var(--text-secondary); line-height: 1.7;
435
+ margin-bottom: 36px; max-width: 480px;
436
+ }
437
+ .build-steps { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
438
+ .build-step {
439
+ display: flex; gap: 16px; align-items: flex-start;
440
+ }
441
+ .step-num {
442
+ width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
443
+ display: flex; align-items: center; justify-content: center;
444
+ font-family: var(--font-mono); font-weight: 700; font-size: 14px;
445
+ }
446
+ .step-content h4 {
447
+ font-size: 15px; font-weight: 600; margin-bottom: 6px;
448
+ }
449
+ .step-content p {
450
+ font-size: 13px; color: var(--text-muted); line-height: 1.5;
451
+ }
452
+ .step-cmd {
453
+ display: inline-flex; align-items: center; gap: 8px;
454
+ background: var(--terminal-bg); border: 1px solid #334155;
455
+ border-radius: 8px; padding: 8px 14px; margin-top: 8px;
456
+ font-family: var(--font-mono); font-size: 12px;
457
+ cursor: pointer; transition: all var(--transition);
458
+ }
459
+ .step-cmd:hover { border-color: #475569; }
460
+ .step-cmd .si-dollar { color: #22C55E; }
461
+ .step-cmd .si-text { color: #E2E8F0; white-space: nowrap; }
462
+ .step-cmd .si-copy {
463
+ background: none; border: 1px solid var(--border);
464
+ color: var(--text-muted); border-radius: 4px; padding: 2px 8px;
465
+ font-size: 10px; cursor: pointer; transition: all var(--transition);
466
+ font-family: var(--font-mono); flex-shrink: 0;
467
+ }
468
+ .step-cmd .si-copy:hover { color: var(--text-primary); border-color: var(--text-muted); }
469
+ .step-cmd .si-copy.copied { color: var(--green); border-color: var(--green); }
470
+
471
+ .build-right { position: relative; }
472
+ .build-img-wrapper {
473
+ position: relative; border-radius: var(--radius-lg); overflow: hidden;
474
+ border: 1px solid #CBD5E1;
475
+ box-shadow:
476
+ 0 4px 24px rgba(0, 0, 0, 0.08),
477
+ 0 1px 3px rgba(0, 0, 0, 0.04);
478
+ }
479
+ .build-img-wrapper::before {
480
+ content: ''; position: absolute; inset: -1px; z-index: 1;
481
+ border-radius: var(--radius-lg);
482
+ background: linear-gradient(135deg, rgba(22,163,74,0.2), rgba(13,148,136,0.1), rgba(124,58,237,0.05));
483
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
484
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
485
+ -webkit-mask-composite: xor; mask-composite: exclude;
486
+ padding: 2px;
487
+ pointer-events: none;
488
+ }
489
+ .build-img-wrapper img {
490
+ width: 100%; height: auto; display: block;
491
+ border-radius: var(--radius-lg);
492
+ }
493
+ .build-glow {
494
+ position: absolute; width: 300px; height: 300px;
495
+ border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0;
496
+ }
497
+ .build-glow-1 {
498
+ background: rgba(22, 163, 74, 0.06);
499
+ top: -60px; right: -60px;
500
+ }
501
+ .build-glow-2 {
502
+ background: rgba(13, 148, 136, 0.04);
503
+ bottom: -80px; left: -40px;
504
+ }
505
+ .build-img-label {
506
+ position: absolute; bottom: 12px; left: 12px; z-index: 2;
507
+ background: rgba(30, 30, 46, 0.9); backdrop-filter: blur(8px);
508
+ border: 1px solid #334155; border-radius: 8px; color: #94A3B8;
509
+ padding: 6px 12px; display: flex; align-items: center; gap: 6px;
510
+ font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
511
+ }
512
+ .build-img-label .live-dot {
513
+ width: 6px; height: 6px; border-radius: 50%; background: var(--green);
514
+ animation: pulse-dot 2s ease-in-out infinite;
515
+ }
516
+
517
+ @media (max-width: 768px) {
518
+ .build-inner { grid-template-columns: 1fr; gap: 40px; }
519
+ .build-right { order: -1; }
520
+ }
521
+
522
+ /* ─── CTA Section ─── */
523
+ .cta-section { padding: 100px 0; text-align: center; }
524
+ .cta-box {
525
+ background: linear-gradient(135deg, rgba(22, 163, 74, 0.04), rgba(13, 148, 136, 0.03));
526
+ border: 1px solid var(--border);
527
+ border-radius: 24px; padding: 64px 40px;
528
+ max-width: 720px; margin: 0 auto;
529
+ }
530
+ .cta-box h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 700; margin-bottom: 16px; }
531
+ .cta-box p {
532
+ font-size: 17px; color: var(--text-secondary); margin-bottom: 32px;
533
+ max-width: 500px; margin-left: auto; margin-right: auto;
534
+ }
535
+ .cta-install-cmd {
536
+ display: inline-flex; align-items: center; gap: 12px;
537
+ background: var(--terminal-bg); border: 1px solid #334155;
538
+ border-radius: 10px; padding: 14px 24px;
539
+ font-family: var(--font-mono); font-size: 16px; cursor: pointer;
540
+ transition: all var(--transition);
541
+ }
542
+ .cta-install-cmd:hover { border-color: var(--green); }
543
+ .cta-install-cmd .dollar { color: #22C55E; }
544
+ .cta-install-cmd .cmd-text { color: #F8FAFC; }
545
+ .cta-install-cmd .copy-indicator {
546
+ color: var(--text-muted); font-size: 12px; transition: color var(--transition);
547
+ }
548
+ .cta-install-cmd:hover .copy-indicator { color: var(--text-secondary); }
549
+
550
+ /* ─── Open Source Credits ─── */
551
+ .oss-credits {
552
+ padding: 64px 0;
553
+ border-top: 1px solid var(--border-subtle);
554
+ }
555
+ .oss-credits-header {
556
+ text-align: center; margin-bottom: 40px;
557
+ }
558
+ .oss-credits-header h2 {
559
+ font-size: clamp(24px, 3vw, 30px); font-weight: 700; margin-bottom: 8px;
560
+ }
561
+ .oss-credits-header p {
562
+ font-size: 15px; color: var(--text-secondary); max-width: 500px; margin: 0 auto;
563
+ }
564
+ .oss-credit-card {
565
+ display: flex; align-items: flex-start; gap: 24px;
566
+ background: var(--bg-card); border: 1px solid var(--border);
567
+ border-radius: var(--radius-lg); padding: 32px;
568
+ max-width: 680px; margin: 0 auto;
569
+ transition: border-color var(--transition), box-shadow var(--transition);
570
+ }
571
+ .oss-credit-card:hover {
572
+ border-color: var(--purple);
573
+ box-shadow: 0 4px 24px rgba(124, 58, 237, 0.06);
574
+ }
575
+ .oss-credit-icon {
576
+ flex-shrink: 0; width: 56px; height: 56px;
577
+ background: var(--purple-dim); border-radius: 14px;
578
+ display: flex; align-items: center; justify-content: center;
579
+ font-size: 24px; font-weight: 700; color: var(--purple);
580
+ font-family: var(--font-mono);
581
+ }
582
+ .oss-credit-body { flex: 1; min-width: 0; }
583
+ .oss-credit-body h3 {
584
+ font-size: 18px; font-weight: 700; margin-bottom: 4px;
585
+ }
586
+ .oss-credit-body h3 a { color: var(--purple); }
587
+ .oss-credit-body h3 a:hover { color: #6D28D9; }
588
+ .oss-credit-author {
589
+ font-size: 13px; color: var(--text-muted); margin-bottom: 10px;
590
+ }
591
+ .oss-credit-author a { color: var(--text-secondary); }
592
+ .oss-credit-author a:hover { color: var(--text-primary); }
593
+ .oss-credit-desc {
594
+ font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px;
595
+ }
596
+ .oss-credit-stats {
597
+ display: flex; gap: 16px; flex-wrap: wrap;
598
+ }
599
+ .oss-credit-stat {
600
+ display: inline-flex; align-items: center; gap: 5px;
601
+ font-size: 12px; color: var(--text-muted);
602
+ background: var(--bg-primary); border-radius: 6px; padding: 4px 10px;
603
+ font-family: var(--font-mono);
604
+ }
605
+ .oss-credit-stat strong { color: var(--text-secondary); font-weight: 600; }
606
+
607
+ /* ─── Footer ─── */
608
+ .footer {
609
+ border-top: 1px solid var(--border-subtle);
610
+ padding: 40px 0; text-align: center;
611
+ }
612
+ .footer-content {
613
+ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
614
+ }
615
+ .footer-brand { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--text-secondary); }
616
+ .footer-links { display: flex; gap: 24px; }
617
+ .footer-links a { font-size: 13px; color: var(--text-muted); }
618
+ .footer-links a:hover { color: var(--text-secondary); }
619
+ .footer-copy { font-size: 12px; color: var(--text-muted); }
620
+
621
+ /* ─── Responsive ─── */
622
+ @media (max-width: 768px) {
623
+ .nav-links { display: none; }
624
+ .mobile-toggle { display: block; }
625
+ .nav-links.open {
626
+ display: flex; flex-direction: column;
627
+ position: absolute; top: 100%; left: 0; right: 0;
628
+ background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px);
629
+ border: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
630
+ padding: 16px 24px; gap: 16px; margin-top: 8px;
631
+ box-shadow: 0 8px 24px rgba(0,0,0,0.06);
632
+ }
633
+ .features-grid { grid-template-columns: 1fr; }
634
+ .agents-grid { grid-template-columns: 1fr; }
635
+ .skills-grid { grid-template-columns: 1fr; }
636
+ .stats-bar { gap: 28px; }
637
+ .hero { padding: 130px 0 60px; }
638
+ .hero-ctas { flex-direction: column; align-items: center; }
639
+ .footer-content { flex-direction: column; text-align: center; }
640
+ .cli-tab { padding: 8px 14px; font-size: 13px; }
641
+ .flags-table { font-size: 13px; }
642
+ .flags-table td, .flags-table th { padding: 8px 10px; }
643
+ }
644
+ @media (min-width: 769px) and (max-width: 1024px) {
645
+ .features-grid { grid-template-columns: repeat(2, 1fr); }
646
+ }
647
+
648
+ /* ─── Animations ─── */
649
+ .fade-up {
650
+ opacity: 0; transform: translateY(24px);
651
+ transition: opacity 0.6s ease, transform 0.6s ease;
652
+ }
653
+ .fade-up.visible { opacity: 1; transform: translateY(0); }
654
+
655
+ @media (prefers-reduced-motion: reduce) {
656
+ .fade-up { opacity: 1; transform: none; transition: none; }
657
+ .cursor-blink { animation: none; opacity: 1; }
658
+ .dot { animation: none; }
659
+ html { scroll-behavior: auto; }
660
+ }
661
+ </style>
662
+ </head>
663
+ <body>
664
+ <div class="grid-bg"></div>
665
+
666
+ <!-- Navbar -->
667
+ <nav class="navbar">
668
+ <div class="nav-brand">
669
+ <img class="logo-icon" src="logo.png" alt="GinStudio Skills" width="32" height="32">
670
+ <span>GinSkill</span>
671
+ </div>
672
+ <div class="nav-links" id="navLinks">
673
+ <a href="#features">Features</a>
674
+ <a href="#skills">Skills</a>
675
+ <a href="#agents">Agents</a>
676
+ <a href="#build">Build</a>
677
+ <a href="#cli">CLI Docs</a>
678
+ <a href="https://www.npmjs.com/package/ginskill-init" class="nav-cta" target="_blank" rel="noopener">npm</a>
679
+ </div>
680
+ <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle menu">
681
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
682
+ <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
683
+ </svg>
684
+ </button>
685
+ </nav>
686
+
687
+ <!-- Hero -->
688
+ <section class="hero">
689
+ <div class="container">
690
+ <div class="hero-badge fade-up">
691
+ <span class="dot"></span>
692
+ <!-- AUTO:BADGE -->v2.7 &mdash; 16 Skills &middot; 6 Agents<!-- /AUTO:BADGE -->
693
+ </div>
694
+ <h1 class="fade-up"><span>Supercharge</span> Claude Code<br>with One Command</h1>
695
+ <p class="hero-sub fade-up">
696
+ Production-ready skills and AI agents for Claude Code.
697
+ Install via interactive TUI &mdash; select what you need, skip what you don't.
698
+ </p>
699
+
700
+ <div class="terminal-wrapper fade-up">
701
+ <div class="terminal-header">
702
+ <div class="terminal-dot red"></div>
703
+ <div class="terminal-dot yellow"></div>
704
+ <div class="terminal-dot green"></div>
705
+ <div class="terminal-title">Terminal</div>
706
+ <div style="width:36px"></div>
707
+ </div>
708
+ <div class="terminal-body" id="terminal"></div>
709
+ </div>
710
+
711
+ <div class="hero-ctas fade-up">
712
+ <button class="btn-primary" onclick="copyInstall()">
713
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
714
+ npx ginskill-init
715
+ </button>
716
+ <a href="#cli" class="btn-secondary">View CLI Docs</a>
717
+ </div>
718
+
719
+ <!-- AUTO:STATS -->
720
+ <div class="stats-bar fade-up">
721
+ <div class="stat"><span class="stat-number">16</span><span class="stat-label">Skills</span></div>
722
+ <div class="stat"><span class="stat-number">6</span><span class="stat-label">Agents</span></div>
723
+ <div class="stat"><span class="stat-number">1</span><span class="stat-label">Command</span></div>
724
+ <div class="stat"><span class="stat-number">MIT</span><span class="stat-label">License</span></div>
725
+ </div>
726
+ <!-- /AUTO:STATS -->
727
+ </div>
728
+ </section>
729
+
730
+ <!-- Features -->
731
+ <section class="features" id="features">
732
+ <div class="container">
733
+ <div class="section-header fade-up">
734
+ <div class="section-tag">Why GinSkill</div>
735
+ <h2>Everything You Need to<br>Level Up Claude Code</h2>
736
+ <p>Production patterns, best practices, and specialized agents &mdash; all installable in seconds.</p>
737
+ </div>
738
+ <div class="features-grid">
739
+ <div class="feature-card fade-up">
740
+ <div class="feature-icon" style="background: var(--green-glow);">
741
+ <svg viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
742
+ </div>
743
+ <h3>One Command Install</h3>
744
+ <p>Run <code style="color:var(--green)">npx ginskill-init</code> and use the interactive TUI to pick exactly what you need. No config files.</p>
745
+ </div>
746
+ <div class="feature-card fade-up">
747
+ <div class="feature-icon" style="background: var(--cyan-dim);">
748
+ <svg viewBox="0 0 24 24" fill="none" stroke="var(--cyan)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
749
+ </div>
750
+ <h3>Interactive TUI</h3>
751
+ <p>Space to select, A to toggle all, Enter to confirm. Visual selection interface right in your terminal.</p>
752
+ </div>
753
+ <div class="feature-card fade-up">
754
+ <div class="feature-icon" style="background: var(--purple-dim);">
755
+ <svg viewBox="0 0 24 24" fill="none" stroke="var(--purple)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
756
+ </div>
757
+ <h3>Domain Skills</h3>
758
+ <p>14 specialized skills covering React Query, MongoDB, NestJS, security scanning, UI/UX design, and more.</p>
759
+ </div>
760
+ <div class="feature-card fade-up">
761
+ <div class="feature-icon" style="background: var(--amber-dim);">
762
+ <svg viewBox="0 0 24 24" fill="none" stroke="var(--amber)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
763
+ </div>
764
+ <h3>AI Agents</h3>
765
+ <p>6 specialized subagents &mdash; developer, tester, code reviewer, security scanner &mdash; each with their own toolset.</p>
766
+ </div>
767
+ <div class="feature-card fade-up">
768
+ <div class="feature-icon" style="background: var(--rose-dim);">
769
+ <svg viewBox="0 0 24 24" fill="none" stroke="var(--rose)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
770
+ </div>
771
+ <h3>Upgrade & Uninstall</h3>
772
+ <p>Full lifecycle: <code style="color:var(--rose)">upgrade</code> to latest, <code style="color:var(--rose)">uninstall</code> what you don't need, <code style="color:var(--rose)">status</code> to check.</p>
773
+ </div>
774
+ <div class="feature-card fade-up">
775
+ <div class="feature-icon" style="background: var(--blue-dim);">
776
+ <svg viewBox="0 0 24 24" fill="none" stroke="var(--blue)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l3-9 4 18 3-9h4"/></svg>
777
+ </div>
778
+ <h3>Global or Per-Project</h3>
779
+ <p>Install globally with <code style="color:var(--blue)">-g</code> for all projects, or per-project with <code style="color:var(--blue)">-t path</code> for team setups.</p>
780
+ </div>
781
+ </div>
782
+ </div>
783
+ </section>
784
+
785
+ <!-- Skills -->
786
+ <section class="skills-section" id="skills">
787
+ <div class="container">
788
+ <div class="section-header fade-up">
789
+ <div class="section-tag">Skills</div>
790
+ <h2><!-- AUTO:SKILL_COUNT -->16<!-- /AUTO:SKILL_COUNT --> Production-Ready Skills</h2>
791
+ <p>Deep domain knowledge that Claude Code loads automatically when relevant. Click to copy the install command.</p>
792
+ </div>
793
+ <div class="skills-grid" id="skillsGrid"></div>
794
+ </div>
795
+ </section>
796
+
797
+ <!-- Agents -->
798
+ <section class="agents-section" id="agents">
799
+ <div class="container">
800
+ <div class="section-header fade-up">
801
+ <div class="section-tag">Agents</div>
802
+ <h2><!-- AUTO:AGENT_COUNT -->6<!-- /AUTO:AGENT_COUNT --> Specialized AI Agents</h2>
803
+ <p>Subagents with restricted toolsets, each focused on a specific engineering discipline.</p>
804
+ </div>
805
+ <div class="agents-grid" id="agentsGrid"></div>
806
+ </div>
807
+ </section>
808
+
809
+ <!-- Build Your Own Skill -->
810
+ <section class="build-section" id="build">
811
+ <div class="container">
812
+ <div class="build-inner">
813
+ <div class="build-left fade-up">
814
+ <div class="section-tag">Build Your Own</div>
815
+ <h2>Create <span>Custom Skills</span><br>for Your Project</h2>
816
+ <p>Every project is different. Use the <strong>ai-build-ai</strong> skill to generate tailor-made Claude Code skills that match your exact stack, patterns, and requirements &mdash; fully autonomous.</p>
817
+
818
+ <div class="build-steps">
819
+ <div class="build-step">
820
+ <div class="step-num" style="background:var(--green-glow);color:var(--green);">1</div>
821
+ <div class="step-content">
822
+ <h4>Launch Claude in autonomous mode</h4>
823
+ <p>Start Claude Code with full permissions so it can research, create files, and build your skill end-to-end.</p>
824
+ <div class="step-cmd">
825
+ <span class="si-dollar">$</span>
826
+ <span class="si-text">claude --dangerously-skip-permissions</span>
827
+ <button class="si-copy" onclick="copyCode(this,'claude --dangerously-skip-permissions')">Copy</button>
828
+ </div>
829
+ </div>
830
+ </div>
831
+
832
+ <div class="build-step">
833
+ <div class="step-num" style="background:var(--cyan-dim);color:var(--cyan);">2</div>
834
+ <div class="step-content">
835
+ <h4>Prompt AI to create your skill</h4>
836
+ <p>Tell Claude what skill you need. It uses <strong>ai-build-ai</strong> to research best practices, generate the SKILL.md, docs, and eval tests automatically.</p>
837
+ <div class="step-cmd" style="flex-direction:column;align-items:flex-start;gap:4px;">
838
+ <div style="display:flex;align-items:center;gap:8px;width:100%;">
839
+ <span class="si-dollar">></span>
840
+ <span class="si-text" style="white-space:normal;font-size:11px;line-height:1.5;color:var(--text-secondary);">Using the ai-build-ai skill, create a new skill called flutter-performance for optimizing Flutter app performance...</span>
841
+ </div>
842
+ </div>
843
+ </div>
844
+ </div>
845
+ </div>
846
+
847
+ <a href="#cli" class="btn-primary" style="width:fit-content;">
848
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
849
+ Install ai-build-ai
850
+ </a>
851
+ </div>
852
+
853
+ <div class="build-right fade-up">
854
+ <div class="build-glow build-glow-1"></div>
855
+ <div class="build-glow build-glow-2"></div>
856
+ <div class="build-img-wrapper">
857
+ <img src="ai-build-ai.png" alt="Claude Code creating a custom flutter-performance skill using ai-build-ai, showing research, file reading, and skill generation in progress" loading="lazy">
858
+ <div class="build-img-label">
859
+ <span class="live-dot"></span>
860
+ ai-build-ai in action
861
+ </div>
862
+ </div>
863
+ </div>
864
+ </div>
865
+ </div>
866
+ </section>
867
+
868
+ <!-- CLI Reference -->
869
+ <section class="cli-section" id="cli">
870
+ <div class="container">
871
+ <div class="section-header fade-up">
872
+ <div class="section-tag">CLI Reference</div>
873
+ <h2>Complete Command Reference</h2>
874
+ <p>Every command, flag, and option available in <code style="color:var(--green)">ginskill-init</code>.</p>
875
+ </div>
876
+
877
+ <div class="fade-up">
878
+ <div class="cli-tabs">
879
+ <button class="cli-tab active" data-tab="install">Install</button>
880
+ <button class="cli-tab" data-tab="upgrade">Upgrade</button>
881
+ <button class="cli-tab" data-tab="uninstall">Uninstall</button>
882
+ <button class="cli-tab" data-tab="info">Status / List</button>
883
+ <button class="cli-tab" data-tab="flags">Global Flags</button>
884
+ </div>
885
+
886
+ <!-- Install Panel -->
887
+ <div class="cli-panel active" id="panel-install">
888
+ <div class="cli-block">
889
+ <div class="cli-block-header">
890
+ <h4>Interactive Install (Recommended)</h4>
891
+ <span class="cli-badge" style="background:var(--green-glow);color:var(--green);">default</span>
892
+ </div>
893
+ <div class="cli-block-body">
894
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init')">Copy</button>
895
+ <div><span class="cc"># Launch interactive TUI — Space to select, A to toggle all, Enter to confirm</span></div>
896
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span></div>
897
+ </div>
898
+ </div>
899
+
900
+ <div class="cli-block">
901
+ <div class="cli-block-header">
902
+ <h4>Install Specific Skills</h4>
903
+ <span class="cli-badge" style="background:var(--cyan-dim);color:var(--cyan);">--skills</span>
904
+ </div>
905
+ <div class="cli-block-body">
906
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init --skills react-query,mongodb')">Copy</button>
907
+ <div><span class="cc"># Install one or more skills by name (comma-separated)</span></div>
908
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">--skills</span> <span class="cv">react-query,mongodb</span></div>
909
+ <div>&nbsp;</div>
910
+ <div><span class="cc"># Install a single skill</span></div>
911
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">--skills</span> <span class="cv">security-scanner</span></div>
912
+ </div>
913
+ </div>
914
+
915
+ <div class="cli-block">
916
+ <div class="cli-block-header">
917
+ <h4>Install Specific Agents</h4>
918
+ <span class="cli-badge" style="background:var(--purple-dim);color:var(--purple);">--agents</span>
919
+ </div>
920
+ <div class="cli-block-body">
921
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init --agents developer,tester')">Copy</button>
922
+ <div><span class="cc"># Install one or more agents by name (comma-separated)</span></div>
923
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">--agents</span> <span class="cv">developer,tester</span></div>
924
+ <div>&nbsp;</div>
925
+ <div><span class="cc"># Install a single agent</span></div>
926
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">--agents</span> <span class="cv">security-scanner</span></div>
927
+ </div>
928
+ </div>
929
+
930
+ <div class="cli-block">
931
+ <div class="cli-block-header">
932
+ <h4>Install Everything</h4>
933
+ <span class="cli-badge" style="background:var(--amber-dim);color:var(--amber);">--all</span>
934
+ </div>
935
+ <div class="cli-block-body">
936
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init --all')">Copy</button>
937
+ <div><span class="cc"># Install all skills + all agents, no prompts</span></div>
938
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">--all</span></div>
939
+ </div>
940
+ </div>
941
+
942
+ <div class="cli-block">
943
+ <div class="cli-block-header">
944
+ <h4>Install Globally</h4>
945
+ <span class="cli-badge" style="background:var(--blue-dim);color:var(--blue);">-g</span>
946
+ </div>
947
+ <div class="cli-block-body">
948
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init --all -g')">Copy</button>
949
+ <div><span class="cc"># Install to ~/.claude (available in all projects)</span></div>
950
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">-g</span></div>
951
+ <div>&nbsp;</div>
952
+ <div><span class="cc"># Install everything globally</span></div>
953
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">--all -g</span></div>
954
+ </div>
955
+ </div>
956
+
957
+ <div class="cli-block">
958
+ <div class="cli-block-header">
959
+ <h4>Install to Specific Project</h4>
960
+ <span class="cli-badge" style="background:var(--rose-dim);color:var(--rose);">-t</span>
961
+ </div>
962
+ <div class="cli-block-body">
963
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init -t /path/to/project')">Copy</button>
964
+ <div><span class="cc"># Install to a specific project directory</span></div>
965
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">-t</span> <span class="cv">/path/to/project</span></div>
966
+ <div>&nbsp;</div>
967
+ <div><span class="cc"># Install specific skills to a project</span></div>
968
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">--skills</span> <span class="cv">react-query</span> <span class="cf">-t</span> <span class="cv">/path/to/project</span></div>
969
+ </div>
970
+ </div>
971
+
972
+ <div class="cli-block">
973
+ <div class="cli-block-header">
974
+ <h4>Mix Skills + Agents</h4>
975
+ </div>
976
+ <div class="cli-block-body">
977
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init --skills react-query,mongodb --agents developer,tester')">Copy</button>
978
+ <div><span class="cc"># Install specific skills AND agents in one command</span></div>
979
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cf">--skills</span> <span class="cv">react-query,mongodb</span> <span class="cf">--agents</span> <span class="cv">developer,tester</span></div>
980
+ </div>
981
+ </div>
982
+ </div>
983
+
984
+ <!-- Upgrade Panel -->
985
+ <div class="cli-panel" id="panel-upgrade">
986
+ <div class="cli-block">
987
+ <div class="cli-block-header">
988
+ <h4>Interactive Upgrade</h4>
989
+ <span class="cli-badge" style="background:var(--green-glow);color:var(--green);">recommended</span>
990
+ </div>
991
+ <div class="cli-block-body">
992
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init@latest upgrade')">Copy</button>
993
+ <div><span class="cc"># Choose which installed skills/agents to upgrade</span></div>
994
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init@latest</span> <span class="cv">upgrade</span></div>
995
+ </div>
996
+ </div>
997
+
998
+ <div class="cli-block">
999
+ <div class="cli-block-header">
1000
+ <h4>Upgrade Everything</h4>
1001
+ <span class="cli-badge" style="background:var(--amber-dim);color:var(--amber);">--all</span>
1002
+ </div>
1003
+ <div class="cli-block-body">
1004
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init@latest upgrade --all')">Copy</button>
1005
+ <div><span class="cc"># Upgrade all installed skills + agents to latest version</span></div>
1006
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init@latest</span> <span class="cv">upgrade</span> <span class="cf">--all</span></div>
1007
+ </div>
1008
+ </div>
1009
+
1010
+ <div class="cli-block">
1011
+ <div class="cli-block-header">
1012
+ <h4>Upgrade in Specific Project</h4>
1013
+ </div>
1014
+ <div class="cli-block-body">
1015
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init@latest upgrade --all -t /path/to/project')">Copy</button>
1016
+ <div><span class="cc"># Upgrade all in a specific project</span></div>
1017
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init@latest</span> <span class="cv">upgrade</span> <span class="cf">--all -t</span> <span class="cv">/path/to/project</span></div>
1018
+ </div>
1019
+ </div>
1020
+
1021
+ <div class="cli-block">
1022
+ <div class="cli-block-header">
1023
+ <h4>Upgrade Global Install</h4>
1024
+ </div>
1025
+ <div class="cli-block-body">
1026
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init@latest upgrade --all -g')">Copy</button>
1027
+ <div><span class="cc"># Upgrade globally installed skills/agents</span></div>
1028
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init@latest</span> <span class="cv">upgrade</span> <span class="cf">--all -g</span></div>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+
1033
+ <!-- Uninstall Panel -->
1034
+ <div class="cli-panel" id="panel-uninstall">
1035
+ <div class="cli-block">
1036
+ <div class="cli-block-header">
1037
+ <h4>Interactive Uninstall</h4>
1038
+ <span class="cli-badge" style="background:var(--green-glow);color:var(--green);">recommended</span>
1039
+ </div>
1040
+ <div class="cli-block-body">
1041
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init uninstall')">Copy</button>
1042
+ <div><span class="cc"># Choose which skills/agents to remove</span></div>
1043
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cv">uninstall</span></div>
1044
+ </div>
1045
+ </div>
1046
+
1047
+ <div class="cli-block">
1048
+ <div class="cli-block-header">
1049
+ <h4>Uninstall from Specific Project</h4>
1050
+ </div>
1051
+ <div class="cli-block-body">
1052
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init uninstall -t /path/to/project')">Copy</button>
1053
+ <div><span class="cc"># Remove skills/agents from a specific project</span></div>
1054
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cv">uninstall</span> <span class="cf">-t</span> <span class="cv">/path/to/project</span></div>
1055
+ </div>
1056
+ </div>
1057
+
1058
+ <div class="cli-block">
1059
+ <div class="cli-block-header">
1060
+ <h4>Uninstall Global</h4>
1061
+ </div>
1062
+ <div class="cli-block-body">
1063
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init uninstall -g')">Copy</button>
1064
+ <div><span class="cc"># Remove globally installed skills/agents</span></div>
1065
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cv">uninstall</span> <span class="cf">-g</span></div>
1066
+ </div>
1067
+ </div>
1068
+
1069
+ <div class="cli-block">
1070
+ <div class="cli-block-header">
1071
+ <h4>Manual Removal</h4>
1072
+ </div>
1073
+ <div class="cli-block-body">
1074
+ <button class="copy-btn" onclick="copyCode(this,'rm -rf .claude/skills/react-query')">Copy</button>
1075
+ <div><span class="cc"># Skills and agents are plain directories — you can also delete manually</span></div>
1076
+ <div><span class="cp">$</span> <span class="ct">rm -rf</span> <span class="cv">.claude/skills/react-query</span> &nbsp;&nbsp;<span class="cc"># remove a skill</span></div>
1077
+ <div><span class="cp">$</span> <span class="ct">rm</span> <span class="cv">.claude/agents/developer.md</span> &nbsp;&nbsp;<span class="cc"># remove an agent</span></div>
1078
+ </div>
1079
+ </div>
1080
+ </div>
1081
+
1082
+ <!-- Status / List Panel -->
1083
+ <div class="cli-panel" id="panel-info">
1084
+ <div class="cli-block">
1085
+ <div class="cli-block-header">
1086
+ <h4>Status</h4>
1087
+ <span class="cli-badge" style="background:var(--cyan-dim);color:var(--cyan);">alias: info</span>
1088
+ </div>
1089
+ <div class="cli-block-body">
1090
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init status')">Copy</button>
1091
+ <div><span class="cc"># Show which skills/agents are installed vs available</span></div>
1092
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cv">status</span></div>
1093
+ <div>&nbsp;</div>
1094
+ <div><span class="cc"># Check status for a specific project</span></div>
1095
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cv">status</span> <span class="cf">-t</span> <span class="cv">/path/to/project</span></div>
1096
+ <div>&nbsp;</div>
1097
+ <div><span class="cc"># Check global status</span></div>
1098
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cv">status</span> <span class="cf">-g</span></div>
1099
+ </div>
1100
+ </div>
1101
+
1102
+ <div class="cli-block">
1103
+ <div class="cli-block-header">
1104
+ <h4>List</h4>
1105
+ <span class="cli-badge" style="background:var(--purple-dim);color:var(--purple);">alias: ls</span>
1106
+ </div>
1107
+ <div class="cli-block-body">
1108
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init list')">Copy</button>
1109
+ <div><span class="cc"># List all skills and agents bundled in this package</span></div>
1110
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cv">list</span></div>
1111
+ </div>
1112
+ </div>
1113
+
1114
+ <div class="cli-block">
1115
+ <div class="cli-block-header">
1116
+ <h4>Versions</h4>
1117
+ <span class="cli-badge" style="background:var(--amber-dim);color:var(--amber);">alias: ver</span>
1118
+ </div>
1119
+ <div class="cli-block-body">
1120
+ <button class="copy-btn" onclick="copyCode(this,'npx ginskill-init versions')">Copy</button>
1121
+ <div><span class="cc"># Show all published versions on npm registry</span></div>
1122
+ <div><span class="cp">$</span> <span class="ct">npx ginskill-init</span> <span class="cv">versions</span></div>
1123
+ </div>
1124
+ </div>
1125
+ </div>
1126
+
1127
+ <!-- Global Flags Panel -->
1128
+ <div class="cli-panel" id="panel-flags">
1129
+ <div class="cli-block">
1130
+ <div class="cli-block-header">
1131
+ <h4>Global Flags</h4>
1132
+ <span class="cli-badge" style="background:var(--green-glow);color:var(--green);">all commands</span>
1133
+ </div>
1134
+ <div class="cli-block-body" style="padding:0;background:#FFFFFF;color:var(--text-primary);">
1135
+ <table class="flags-table">
1136
+ <thead>
1137
+ <tr><th>Flag</th><th>Short</th><th>Description</th></tr>
1138
+ </thead>
1139
+ <tbody>
1140
+ <tr><td>--global</td><td>-g</td><td>Target <code>~/.claude/</code> (available in all projects)</td></tr>
1141
+ <tr><td>--target &lt;path&gt;</td><td>-t</td><td>Target a specific project directory</td></tr>
1142
+ <tr><td>--all</td><td></td><td>Skip interactive prompts, apply to everything</td></tr>
1143
+ <tr><td>--skills &lt;list&gt;</td><td></td><td>Comma-separated skill names to install</td></tr>
1144
+ <tr><td>--agents &lt;list&gt;</td><td></td><td>Comma-separated agent names to install</td></tr>
1145
+ <tr><td>--version</td><td>-V</td><td>Print CLI version</td></tr>
1146
+ <tr><td>--help</td><td>-h</td><td>Print help for any command</td></tr>
1147
+ </tbody>
1148
+ </table>
1149
+ </div>
1150
+ </div>
1151
+
1152
+ <div class="cli-block">
1153
+ <div class="cli-block-header">
1154
+ <h4>All Commands Summary</h4>
1155
+ </div>
1156
+ <div class="cli-block-body" style="padding:0;background:#FFFFFF;color:var(--text-primary);">
1157
+ <table class="flags-table">
1158
+ <thead>
1159
+ <tr><th>Command</th><th>Alias</th><th>Description</th></tr>
1160
+ </thead>
1161
+ <tbody>
1162
+ <tr><td style="color:var(--green)">(default)</td><td>install</td><td>Install skills and/or agents</td></tr>
1163
+ <tr><td style="color:var(--green)">upgrade</td><td></td><td>Re-copy installed skills/agents from latest version</td></tr>
1164
+ <tr><td style="color:var(--green)">uninstall</td><td>remove</td><td>Remove installed skills/agents</td></tr>
1165
+ <tr><td style="color:var(--green)">status</td><td>info</td><td>Show installed vs available</td></tr>
1166
+ <tr><td style="color:var(--green)">list</td><td>ls</td><td>List all bundled skills and agents</td></tr>
1167
+ <tr><td style="color:var(--green)">versions</td><td>ver</td><td>Show all published npm versions</td></tr>
1168
+ </tbody>
1169
+ </table>
1170
+ </div>
1171
+ </div>
1172
+ </div>
1173
+ </div>
1174
+ </div>
1175
+ </section>
1176
+
1177
+ <!-- CTA -->
1178
+ <section class="cta-section">
1179
+ <div class="container">
1180
+ <div class="cta-box fade-up">
1181
+ <h2>Ready to Supercharge<br>Your Workflow?</h2>
1182
+ <p>One command. <!-- AUTO:CTA_COUNTS -->16 skills. 6 agents.<!-- /AUTO:CTA_COUNTS --> Zero configuration.</p>
1183
+ <div class="cta-install-cmd" onclick="copyInstall()" role="button" tabindex="0" aria-label="Copy install command">
1184
+ <span class="dollar">$</span>
1185
+ <span class="cmd-text">npx ginskill-init</span>
1186
+ <span class="copy-indicator" id="ctaCopyLabel">Click to copy</span>
1187
+ </div>
1188
+ </div>
1189
+ </div>
1190
+ </section>
1191
+
1192
+ <!-- Open Source Credits -->
1193
+ <section class="oss-credits" id="credits">
1194
+ <div class="container">
1195
+ <div class="oss-credits-header fade-up">
1196
+ <h2>Built on Open Source</h2>
1197
+ <p>GinStudio Skills includes community-driven skills. Credit to the original authors.</p>
1198
+ </div>
1199
+ <div class="oss-credit-card fade-up">
1200
+ <div class="oss-credit-icon">U</div>
1201
+ <div class="oss-credit-body">
1202
+ <h3><a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" target="_blank" rel="noopener">ui-ux-pro-max</a></h3>
1203
+ <div class="oss-credit-author">by <a href="https://github.com/nextlevelbuilder" target="_blank" rel="noopener">Next Level Builder</a> &middot; MIT License</div>
1204
+ <div class="oss-credit-desc">
1205
+ AI-powered design intelligence with 67 UI styles, 96 color palettes, 57 font pairings, and 100 industry-specific reasoning rules. Supports 13 tech stacks including React, Next.js, Vue, SwiftUI, Flutter, and more.
1206
+ </div>
1207
+ <div class="oss-credit-stats">
1208
+ <span class="oss-credit-stat"><strong>67</strong> Styles</span>
1209
+ <span class="oss-credit-stat"><strong>96</strong> Palettes</span>
1210
+ <span class="oss-credit-stat"><strong>57</strong> Fonts</span>
1211
+ <span class="oss-credit-stat"><strong>13</strong> Stacks</span>
1212
+ <span class="oss-credit-stat"><strong>38k</strong> Stars</span>
1213
+ </div>
1214
+ </div>
1215
+ </div>
1216
+ </div>
1217
+ </section>
1218
+
1219
+ <!-- Footer -->
1220
+ <footer class="footer">
1221
+ <div class="container">
1222
+ <div class="footer-content">
1223
+ <div class="footer-brand">GinStudio Skills v2.7.0</div>
1224
+ <div class="footer-links">
1225
+ <a href="https://www.npmjs.com/package/ginskill-init" target="_blank" rel="noopener">npm</a>
1226
+ <a href="https://gitlab.com/ginstudio/skills" target="_blank" rel="noopener">GitLab</a>
1227
+ <a href="#features">Features</a>
1228
+ <a href="#skills">Skills</a>
1229
+ <a href="#agents">Agents</a>
1230
+ <a href="#credits">Credits</a>
1231
+ <a href="#cli">CLI Docs</a>
1232
+ </div>
1233
+ <div class="footer-copy">MIT License &middot; <a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" target="_blank" rel="noopener">ui-ux-pro-max</a> by <a href="https://github.com/nextlevelbuilder" target="_blank" rel="noopener">Next Level Builder</a> &middot; skills.ginstudio.asia</div>
1234
+ </div>
1235
+ </div>
1236
+ </footer>
1237
+
1238
+ <script>
1239
+ /* ─── Data (auto-generated by gen-readme.mjs — do not edit manually) ─── */
1240
+ /* AUTO:SKILLS_DATA */
1241
+ const SKILLS = [
1242
+ { name: 'active-life-dev', desc: 'Active Life Backend Dev Guide: Comprehensive development guide for the Active Life Global Store NestJS backend (be-store-active-life-global).', color: 'var(--cyan)' },
1243
+ { name: 'ai-asset-generator', desc: 'AI Asset Generator: Generate production-ready images, icons, videos, and visual assets using KIE AI and background removal APIs.', color: 'var(--green)' },
1244
+ { name: 'ai-build-ai', desc: 'AI Build AI: Master guide for extending Claude Code — creating skills, custom subagents (agents), MCP servers, hooks, plugins, agent teams, running...', color: 'var(--rose)' },
1245
+ { name: 'ant-design', desc: 'Ant Design (antd) Expert: Production patterns for building React UIs with Ant Design v5/v6 — components, theming, Form, Table, Modal, layout, icons...', color: 'var(--purple)' },
1246
+ { name: 'flutter-performance', desc: 'Flutter Performance Optimization: Comprehensive guide for optimizing Flutter app performance — widget rebuilds, jank reduction, memory leaks, Dart ...', color: 'var(--amber)' },
1247
+ { name: 'icon-generator', desc: 'SVG Icon Generator: Generate beautiful, clean SVG icon components (.tsx) for React Native apps using react-native-svg.', color: 'var(--blue)' },
1248
+ { name: 'mobile-app-review', desc: 'Mobile App Store Review Checklist: Comprehensive pre-submission audit for Apple App Store and Google Play Store.', color: 'var(--cyan)' },
1249
+ { name: 'mongodb', desc: 'MongoDB & Mongoose Best Practices: Production patterns for schema design, indexing, aggregation pipelines, transactions, connection management, and...', color: 'var(--green)' },
1250
+ { name: 'nestjs-architecture', desc: 'NestJS Feature-Based Architecture: Production patterns for organizing NestJS backends — feature modules, core infrastructure, shared utilities, gua...', color: 'var(--rose)' },
1251
+ { name: 'react-fsd-architecture', desc: 'Feature-Sliced Design (FSD) Architecture: Architectural methodology for organizing frontend projects by business features — layers, slices, segment...', color: 'var(--purple)' },
1252
+ { name: 'react-native-expo', desc: 'React Native Expo (Sty AI Mobile): Production patterns for the Sty AI React Native app — Expo SDK 54, Expo Router v5, React Query v5, Zustand v5, R...', color: 'var(--amber)' },
1253
+ { name: 'react-query', desc: 'TanStack React Query Best Practices: Comprehensive guide for writing production-quality React Query code — query keys, mutations, caching, optimist...', color: 'var(--blue)' },
1254
+ { name: 'review-code', desc: 'Code Review: Comprehensive code review and quality analysis for fullstack monorepos (NestJS backend, Next.js frontend, React Native mobile).', color: 'var(--cyan)' },
1255
+ { name: 'security-scanner', desc: 'Security Scanner: Comprehensive security audit for fullstack monorepos — NestJS backend, Next.js frontend, and React Native mobile app.', color: 'var(--green)' },
1256
+ { name: 'traefik', desc: 'Traefik Reverse Proxy Expert: Production patterns for configuring Traefik v3 — routing, middleware, TLS/ACME, Docker Compose, Kubernetes CRDs, load...', color: 'var(--rose)' },
1257
+ { name: 'ui-ux-pro-max', desc: 'UI/UX design intelligence.', color: 'var(--purple)' },
1258
+ ];
1259
+ /* /AUTO:SKILLS_DATA */
1260
+
1261
+ /* AUTO:AGENTS_DATA */
1262
+ const AGENTS = [
1263
+ { name: 'developer', icon: 'D', color: 'var(--green)', bg: 'var(--green-glow)', desc: 'Full-stack developer agent for implementing features, fixing bugs, and writing production-quality code' },
1264
+ { name: 'frontend-design', icon: 'F', color: 'var(--cyan)', bg: 'var(--cyan-dim)', desc: 'Frontend design agent for building beautiful, accessible UI components and pages' },
1265
+ { name: 'mobile-reviewer', icon: 'M', color: 'var(--purple)', bg: 'var(--purple-dim)', desc: 'Reviews React Native / Expo apps for App Store & Google Play compliance, UX best practices, and platform-specific issues' },
1266
+ { name: 'review-code', icon: 'R', color: 'var(--amber)', bg: 'var(--amber-dim)', desc: 'Reviews code for quality, architecture, and best practices across the fullstack monorepo' },
1267
+ { name: 'security-scanner', icon: 'S', color: 'var(--rose)', bg: 'var(--rose-dim)', desc: 'Scans for security vulnerabilities aligned with OWASP Top 10:2025, LLM Top 10, and Mobile Top 10' },
1268
+ { name: 'tester', icon: 'T', color: 'var(--blue)', bg: 'var(--blue-dim)', desc: 'Testing agent for writing and running unit tests, integration tests, and e2e tests' },
1269
+ ];
1270
+ /* /AUTO:AGENTS_DATA */
1271
+
1272
+ /* ─── Render Skills ─── */
1273
+ const chevronSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';
1274
+
1275
+ const skillsGrid = document.getElementById('skillsGrid');
1276
+ SKILLS.forEach((s, i) => {
1277
+ const installCmd = `npx ginskill-init --skills ${s.name}`;
1278
+ const upgradeCmd = `npx ginskill-init@latest upgrade --skills ${s.name}`;
1279
+ const uninstallCmd = `npx ginskill-init uninstall --skills ${s.name}`;
1280
+ const manualRm = `rm -rf .claude/skills/${s.name}`;
1281
+ const id = `skill-more-${i}`;
1282
+ const card = document.createElement('div');
1283
+ card.className = 'skill-card fade-up';
1284
+ card.innerHTML = `
1285
+ <div class="skill-top">
1286
+ <div class="skill-dot" style="background:${s.color}"></div>
1287
+ <div class="skill-info">
1288
+ <h4>${s.name}</h4>
1289
+ <p>${s.desc}</p>
1290
+ </div>
1291
+ </div>
1292
+ <div class="skill-install">
1293
+ <span class="si-dollar">$</span>
1294
+ <span class="si-text">${installCmd}</span>
1295
+ <button class="si-copy" onclick="copyCode(this,'${installCmd}')">Copy</button>
1296
+ </div>
1297
+ <button class="see-more-btn" onclick="toggleMore('${id}', this)" aria-expanded="false">
1298
+ More commands ${chevronSvg}
1299
+ </button>
1300
+ <div class="more-commands" id="${id}">
1301
+ <div class="more-label">Upgrade</div>
1302
+ <div class="skill-install">
1303
+ <span class="si-dollar">$</span>
1304
+ <span class="si-text">${upgradeCmd}</span>
1305
+ <button class="si-copy" onclick="copyCode(this,'${upgradeCmd}')">Copy</button>
1306
+ </div>
1307
+ <div class="more-label">Uninstall</div>
1308
+ <div class="skill-install">
1309
+ <span class="si-dollar">$</span>
1310
+ <span class="si-text">${uninstallCmd}</span>
1311
+ <button class="si-copy" onclick="copyCode(this,'${uninstallCmd}')">Copy</button>
1312
+ </div>
1313
+ <div class="more-label">Manual Remove</div>
1314
+ <div class="skill-install">
1315
+ <span class="si-dollar">$</span>
1316
+ <span class="si-text">${manualRm}</span>
1317
+ <button class="si-copy" onclick="copyCode(this,'${manualRm}')">Copy</button>
1318
+ </div>
1319
+ </div>`;
1320
+ skillsGrid.appendChild(card);
1321
+ });
1322
+
1323
+ /* ─── Render Agents ─── */
1324
+ const agentsGrid = document.getElementById('agentsGrid');
1325
+ AGENTS.forEach((a, i) => {
1326
+ const installCmd = `npx ginskill-init --agents ${a.name}`;
1327
+ const upgradeCmd = `npx ginskill-init@latest upgrade --agents ${a.name}`;
1328
+ const uninstallCmd = `npx ginskill-init uninstall --agents ${a.name}`;
1329
+ const manualRm = a.name.includes('/') ? `rm -rf .claude/agents/${a.name}/` : `rm .claude/agents/${a.name}.md`;
1330
+ const id = `agent-more-${i}`;
1331
+ const card = document.createElement('div');
1332
+ card.className = 'agent-card fade-up';
1333
+ card.innerHTML = `
1334
+ <div class="agent-header">
1335
+ <div class="agent-avatar" style="background:${a.bg};color:${a.color}">${a.icon}</div>
1336
+ <div>
1337
+ <h4>${a.name}</h4>
1338
+ <span class="agent-type">agent</span>
1339
+ </div>
1340
+ </div>
1341
+ <p>${a.desc}</p>
1342
+ <div class="skill-install">
1343
+ <span class="si-dollar">$</span>
1344
+ <span class="si-text">${installCmd}</span>
1345
+ <button class="si-copy" onclick="copyCode(this,'${installCmd}')">Copy</button>
1346
+ </div>
1347
+ <button class="see-more-btn" onclick="toggleMore('${id}', this)" aria-expanded="false">
1348
+ More commands ${chevronSvg}
1349
+ </button>
1350
+ <div class="more-commands" id="${id}">
1351
+ <div class="more-label">Upgrade</div>
1352
+ <div class="skill-install">
1353
+ <span class="si-dollar">$</span>
1354
+ <span class="si-text">${upgradeCmd}</span>
1355
+ <button class="si-copy" onclick="copyCode(this,'${upgradeCmd}')">Copy</button>
1356
+ </div>
1357
+ <div class="more-label">Uninstall</div>
1358
+ <div class="skill-install">
1359
+ <span class="si-dollar">$</span>
1360
+ <span class="si-text">${uninstallCmd}</span>
1361
+ <button class="si-copy" onclick="copyCode(this,'${uninstallCmd}')">Copy</button>
1362
+ </div>
1363
+ <div class="more-label">Manual Remove</div>
1364
+ <div class="skill-install">
1365
+ <span class="si-dollar">$</span>
1366
+ <span class="si-text">${manualRm}</span>
1367
+ <button class="si-copy" onclick="copyCode(this,'${manualRm}')">Copy</button>
1368
+ </div>
1369
+ </div>`;
1370
+ agentsGrid.appendChild(card);
1371
+ });
1372
+
1373
+ /* ─── Terminal Animation ─── */
1374
+ const termEl = document.getElementById('terminal');
1375
+ const lines = [
1376
+ { type: 'cmd', text: '$ npx ginskill-init' },
1377
+ { type: 'out', text: '' },
1378
+ { type: 'accent', text: ' GinStudio Skills v2.5.5' },
1379
+ { type: 'out', text: '' },
1380
+ { type: 'out', text: ' Select skills to install:' },
1381
+ { type: 'success', text: ' [*] react-query' },
1382
+ { type: 'success', text: ' [*] mongodb' },
1383
+ { type: 'success', text: ' [*] nestjs-architecture' },
1384
+ { type: 'success', text: ' [*] security-scanner' },
1385
+ { type: 'warn', text: ' [ ] ui-ux-pro-max' },
1386
+ { type: 'warn', text: ' [ ] icon-generator' },
1387
+ { type: 'out', text: '' },
1388
+ { type: 'success', text: ' Installed 4 skills to .claude/skills/' },
1389
+ { type: 'accent', text: ' Done in 1.2s' },
1390
+ ];
1391
+
1392
+ let lineIdx = 0;
1393
+ const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
1394
+
1395
+ function typeTerminal() {
1396
+ if (lineIdx >= lines.length) {
1397
+ const cursor = document.createElement('span');
1398
+ cursor.className = 'cursor-blink';
1399
+ termEl.appendChild(cursor);
1400
+ return;
1401
+ }
1402
+ const { type, text } = lines[lineIdx];
1403
+ const div = document.createElement('div');
1404
+ const classMap = { cmd: 'term-command', out: 'term-output', success: 'term-success', accent: 'term-accent', warn: 'term-warn' };
1405
+ div.className = classMap[type] || 'term-output';
1406
+
1407
+ if (reducedMotion) {
1408
+ div.textContent = text;
1409
+ termEl.appendChild(div);
1410
+ lineIdx++;
1411
+ typeTerminal();
1412
+ return;
1413
+ }
1414
+
1415
+ if (type === 'cmd') {
1416
+ let charIdx = 0;
1417
+ div.textContent = '';
1418
+ termEl.appendChild(div);
1419
+ const typeChar = () => {
1420
+ if (charIdx < text.length) {
1421
+ div.textContent += text[charIdx];
1422
+ charIdx++;
1423
+ setTimeout(typeChar, 30 + Math.random() * 40);
1424
+ } else {
1425
+ lineIdx++;
1426
+ setTimeout(typeTerminal, 400);
1427
+ }
1428
+ };
1429
+ typeChar();
1430
+ } else {
1431
+ div.textContent = text;
1432
+ div.style.opacity = '0';
1433
+ termEl.appendChild(div);
1434
+ setTimeout(() => { div.style.opacity = '1'; }, 50);
1435
+ lineIdx++;
1436
+ setTimeout(typeTerminal, text === '' ? 100 : 120);
1437
+ }
1438
+ }
1439
+
1440
+ setTimeout(typeTerminal, 800);
1441
+
1442
+ /* ─── CLI Tabs ─── */
1443
+ document.querySelectorAll('.cli-tab').forEach(tab => {
1444
+ tab.addEventListener('click', () => {
1445
+ document.querySelectorAll('.cli-tab').forEach(t => t.classList.remove('active'));
1446
+ document.querySelectorAll('.cli-panel').forEach(p => p.classList.remove('active'));
1447
+ tab.classList.add('active');
1448
+ document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
1449
+ });
1450
+ });
1451
+
1452
+ /* ─── Scroll Reveal ─── */
1453
+ const observer = new IntersectionObserver((entries) => {
1454
+ entries.forEach(entry => {
1455
+ if (entry.isIntersecting) {
1456
+ entry.target.classList.add('visible');
1457
+ observer.unobserve(entry.target);
1458
+ }
1459
+ });
1460
+ }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
1461
+ document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
1462
+
1463
+ /* ─── Toggle More Commands ─── */
1464
+ function toggleMore(id, btn) {
1465
+ const el = document.getElementById(id);
1466
+ const isOpen = el.classList.toggle('open');
1467
+ btn.classList.toggle('open', isOpen);
1468
+ btn.setAttribute('aria-expanded', isOpen);
1469
+ btn.childNodes[0].textContent = isOpen ? 'Hide commands ' : 'More commands ';
1470
+ }
1471
+
1472
+ /* ─── Copy Helpers ─── */
1473
+ function copyInstall() {
1474
+ navigator.clipboard.writeText('npx ginskill-init').then(() => {
1475
+ const label = document.getElementById('ctaCopyLabel');
1476
+ if (label) { label.textContent = 'Copied!'; setTimeout(() => label.textContent = 'Click to copy', 2000); }
1477
+ });
1478
+ }
1479
+
1480
+ function copyCode(btn, text) {
1481
+ navigator.clipboard.writeText(text).then(() => {
1482
+ const prev = btn.textContent;
1483
+ btn.textContent = 'Copied!';
1484
+ btn.classList.add('copied');
1485
+ setTimeout(() => { btn.textContent = prev; btn.classList.remove('copied'); }, 2000);
1486
+ });
1487
+ }
1488
+
1489
+ /* ─── Mobile Nav ─── */
1490
+ document.getElementById('mobileToggle').addEventListener('click', () => {
1491
+ document.getElementById('navLinks').classList.toggle('open');
1492
+ });
1493
+ </script>
1494
+ </body>
1495
+ </html>