rex-claude 2.1.0 → 3.0.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 (33) hide show
  1. package/dist/chunk-7AGI43F5.js +42 -0
  2. package/dist/context-FN5O5YBI.js +114 -0
  3. package/dist/gateway-EOVQXRON.js +198 -0
  4. package/dist/guards/completion-guard.sh +15 -2
  5. package/dist/guards/dangerous-cmd-guard.sh +2 -2
  6. package/dist/guards/error-pattern-guard.sh +45 -0
  7. package/dist/guards/notify-telegram.sh +34 -0
  8. package/dist/guards/test-protect-guard.sh +2 -2
  9. package/dist/guards/ui-checklist-guard.sh +1 -1
  10. package/dist/index.js +52 -13
  11. package/dist/{init-S7BKM2N2.js → init-W3XGDQ6D.js} +274 -11
  12. package/dist/llm-YRORUH7E.js +9 -0
  13. package/dist/optimize-UKMAGQQE.js +148 -0
  14. package/dist/setup-AO3MW46W.js +252 -0
  15. package/dist/skills/build-validate/SKILL.md +23 -0
  16. package/dist/skills/code-review/SKILL.md +25 -0
  17. package/dist/skills/context-loader/SKILL.md +25 -0
  18. package/dist/skills/debug-assist/SKILL.md +26 -0
  19. package/dist/skills/deploy-checklist/SKILL.md +61 -0
  20. package/dist/skills/dstudio-design-system/SKILL.md +120 -0
  21. package/dist/skills/figma-workflow/SKILL.md +23 -0
  22. package/dist/skills/fix-issue/SKILL.md +43 -0
  23. package/dist/skills/new-rule/SKILL.md +19 -0
  24. package/dist/skills/notify/SKILL.md +26 -0
  25. package/dist/skills/one-shot/SKILL.md +18 -0
  26. package/dist/skills/pr-review-loop/SKILL.md +48 -0
  27. package/dist/skills/project-init/SKILL.md +45 -0
  28. package/dist/skills/research/SKILL.md +17 -0
  29. package/dist/skills/rex-boot/SKILL.md +64 -0
  30. package/dist/skills/spec-interview/SKILL.md +20 -0
  31. package/dist/skills/token-guard/SKILL.md +26 -0
  32. package/package.json +4 -4
  33. package/dist/optimize-NE47FMOP.js +0 -111
@@ -0,0 +1,252 @@
1
+ #!/usr/bin/env node
2
+
3
+ // src/setup.ts
4
+ import { execSync } from "child_process";
5
+ import { platform, totalmem, homedir } from "os";
6
+ import { readFileSync, writeFileSync } from "fs";
7
+ import { join } from "path";
8
+ import { createInterface } from "readline";
9
+ var COLORS = {
10
+ reset: "\x1B[0m",
11
+ green: "\x1B[32m",
12
+ yellow: "\x1B[33m",
13
+ red: "\x1B[31m",
14
+ bold: "\x1B[1m",
15
+ dim: "\x1B[2m",
16
+ cyan: "\x1B[36m"
17
+ };
18
+ function ok(msg) {
19
+ console.log(` ${COLORS.green}\u2713${COLORS.reset} ${msg}`);
20
+ }
21
+ function info(msg) {
22
+ console.log(` ${COLORS.cyan}\u2139${COLORS.reset} ${msg}`);
23
+ }
24
+ function fail(msg) {
25
+ console.log(` ${COLORS.red}\u2717${COLORS.reset} ${msg}`);
26
+ }
27
+ var OLLAMA_URL = process.env.OLLAMA_URL || "http://localhost:11434";
28
+ async function isOllamaInstalled() {
29
+ try {
30
+ execSync("which ollama", { stdio: "ignore" });
31
+ return true;
32
+ } catch {
33
+ return false;
34
+ }
35
+ }
36
+ async function isOllamaRunning() {
37
+ try {
38
+ const res = await fetch(`${OLLAMA_URL}/api/tags`);
39
+ return res.ok;
40
+ } catch {
41
+ return false;
42
+ }
43
+ }
44
+ async function getInstalledModels() {
45
+ try {
46
+ const res = await fetch(`${OLLAMA_URL}/api/tags`);
47
+ const data = await res.json();
48
+ return data.models.map((m) => m.name);
49
+ } catch {
50
+ return [];
51
+ }
52
+ }
53
+ function pullModel(model) {
54
+ console.log(` ${COLORS.dim}Pulling ${model}...${COLORS.reset}`);
55
+ try {
56
+ execSync(`ollama pull ${model}`, { stdio: "inherit" });
57
+ ok(`${model} installed`);
58
+ } catch {
59
+ fail(`Failed to pull ${model}`);
60
+ }
61
+ }
62
+ async function testEmbed() {
63
+ try {
64
+ const res = await fetch(`${OLLAMA_URL}/api/embed`, {
65
+ method: "POST",
66
+ headers: { "Content-Type": "application/json" },
67
+ body: JSON.stringify({ model: "nomic-embed-text", input: "test embedding" })
68
+ });
69
+ return res.ok;
70
+ } catch {
71
+ return false;
72
+ }
73
+ }
74
+ async function testGenerate(model) {
75
+ try {
76
+ const res = await fetch(`${OLLAMA_URL}/api/generate`, {
77
+ method: "POST",
78
+ headers: { "Content-Type": "application/json" },
79
+ body: JSON.stringify({ model, prompt: 'Say "ok" in one word.', stream: false })
80
+ });
81
+ return res.ok;
82
+ } catch {
83
+ return false;
84
+ }
85
+ }
86
+ function prompt(question) {
87
+ const rl = createInterface({ input: process.stdin, output: process.stdout });
88
+ return new Promise((resolve) => {
89
+ rl.question(` ${COLORS.cyan}?${COLORS.reset} ${question} `, (answer) => {
90
+ rl.close();
91
+ resolve(answer.trim());
92
+ });
93
+ });
94
+ }
95
+ async function setupTelegram() {
96
+ console.log(`
97
+ ${COLORS.bold}Telegram Gateway${COLORS.reset}`);
98
+ const settingsPath = join(homedir(), ".claude", "settings.json");
99
+ let settings = {};
100
+ try {
101
+ settings = JSON.parse(readFileSync(settingsPath, "utf-8"));
102
+ } catch {
103
+ }
104
+ if (!settings.env) settings.env = {};
105
+ const existingToken = settings.env.REX_TELEGRAM_BOT_TOKEN;
106
+ const existingChat = settings.env.REX_TELEGRAM_CHAT_ID;
107
+ if (existingToken && existingChat) {
108
+ try {
109
+ const res = await fetch(`https://api.telegram.org/bot${existingToken}/sendMessage`, {
110
+ method: "POST",
111
+ headers: { "Content-Type": "application/json" },
112
+ body: JSON.stringify({ chat_id: existingChat, text: "\u{1F514} REX Setup \u2014 Telegram gateway verified", parse_mode: "Markdown" })
113
+ });
114
+ if (res.ok) {
115
+ ok("Telegram gateway already configured and working");
116
+ return;
117
+ }
118
+ } catch {
119
+ }
120
+ info("Existing Telegram config found but not working \u2014 reconfiguring");
121
+ }
122
+ const botToken = await prompt("Telegram Bot Token (from @BotFather):");
123
+ if (!botToken) {
124
+ info("Skipped Telegram setup");
125
+ return;
126
+ }
127
+ try {
128
+ const res = await fetch(`https://api.telegram.org/bot${botToken}/getMe`);
129
+ const data = await res.json();
130
+ if (!data.ok) {
131
+ fail("Invalid bot token");
132
+ return;
133
+ }
134
+ ok(`Bot: @${data.result?.username}`);
135
+ } catch {
136
+ fail("Could not validate bot token");
137
+ return;
138
+ }
139
+ console.log(`
140
+ ${COLORS.dim}Send /start to your bot on Telegram, then press Enter...${COLORS.reset}`);
141
+ await prompt("Press Enter when done");
142
+ let chatId = "";
143
+ try {
144
+ const res = await fetch(`https://api.telegram.org/bot${botToken}/getUpdates`);
145
+ const data = await res.json();
146
+ const msg = data.result?.find((u) => u.message);
147
+ if (msg?.message) {
148
+ chatId = String(msg.message.chat.id);
149
+ ok(`Chat ID: ${chatId} (from @${msg.message.from?.username ?? "?"})`);
150
+ }
151
+ } catch {
152
+ }
153
+ if (!chatId) {
154
+ chatId = await prompt("Chat ID (could not auto-detect):");
155
+ }
156
+ if (!chatId) {
157
+ fail("No chat ID \u2014 Telegram setup aborted");
158
+ return;
159
+ }
160
+ settings.env.REX_TELEGRAM_BOT_TOKEN = botToken;
161
+ settings.env.REX_TELEGRAM_CHAT_ID = chatId;
162
+ writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + "\n");
163
+ ok("Telegram credentials saved to settings.json");
164
+ try {
165
+ await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
166
+ method: "POST",
167
+ headers: { "Content-Type": "application/json" },
168
+ body: JSON.stringify({ chat_id: chatId, text: "\u2705 *REX Setup Complete*\nTelegram gateway is active.", parse_mode: "Markdown" })
169
+ });
170
+ ok("Test message sent \u2014 check Telegram!");
171
+ } catch {
172
+ fail("Could not send test message");
173
+ }
174
+ }
175
+ async function setup() {
176
+ const line = "\u2550".repeat(45);
177
+ console.log(`
178
+ ${line}`);
179
+ console.log(`${COLORS.bold} REX SETUP \u2014 Full Configuration${COLORS.reset}`);
180
+ console.log(`${line}
181
+ `);
182
+ const ramGB = Math.round(totalmem() / 1024 ** 3);
183
+ const os = platform();
184
+ info(`System: ${os}, ${ramGB}GB RAM`);
185
+ if (!await isOllamaInstalled()) {
186
+ fail("Ollama not installed");
187
+ console.log(`
188
+ Install: ${COLORS.cyan}https://ollama.com/download${COLORS.reset}`);
189
+ if (os === "darwin") {
190
+ info("Opening download page...");
191
+ try {
192
+ execSync("open https://ollama.com/download", { stdio: "ignore" });
193
+ } catch {
194
+ }
195
+ }
196
+ return;
197
+ }
198
+ ok("Ollama installed");
199
+ if (!await isOllamaRunning()) {
200
+ info("Starting Ollama...");
201
+ try {
202
+ execSync("ollama serve &", { stdio: "ignore" });
203
+ await new Promise((r) => setTimeout(r, 3e3));
204
+ if (await isOllamaRunning()) {
205
+ ok("Ollama started");
206
+ } else {
207
+ fail("Could not start Ollama \u2014 start manually: ollama serve");
208
+ return;
209
+ }
210
+ } catch {
211
+ fail("Could not start Ollama \u2014 start manually: ollama serve");
212
+ return;
213
+ }
214
+ } else {
215
+ ok("Ollama running");
216
+ }
217
+ const models = await getInstalledModels();
218
+ if (models.some((m) => m.includes("nomic-embed-text"))) {
219
+ ok("nomic-embed-text already installed");
220
+ } else {
221
+ pullModel("nomic-embed-text");
222
+ }
223
+ const reasoningModel = ramGB >= 16 ? "qwen3.5:9b" : "qwen3.5:4b";
224
+ info(`Selected reasoning model: ${reasoningModel} (${ramGB}GB RAM)`);
225
+ if (models.some((m) => m.includes(reasoningModel.split(":")[0]))) {
226
+ ok(`${reasoningModel} already installed`);
227
+ } else {
228
+ pullModel(reasoningModel);
229
+ }
230
+ console.log(`
231
+ ${COLORS.dim}Testing...${COLORS.reset}`);
232
+ const embedOk = await testEmbed();
233
+ const genOk = await testGenerate(reasoningModel);
234
+ if (embedOk) ok("Embedding test passed");
235
+ else fail("Embedding test failed");
236
+ if (genOk) ok("Generation test passed");
237
+ else fail("Generation test failed");
238
+ await setupTelegram();
239
+ console.log(`
240
+ ${COLORS.dim}\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${COLORS.reset}`);
241
+ if (embedOk && genOk) {
242
+ console.log(`
243
+ ${COLORS.green}${COLORS.bold}Setup complete!${COLORS.reset} REX is fully configured.`);
244
+ } else {
245
+ console.log(`
246
+ ${COLORS.yellow}Setup partial.${COLORS.reset} Some tests failed \u2014 check Ollama logs.`);
247
+ }
248
+ console.log();
249
+ }
250
+ export {
251
+ setup
252
+ };
@@ -0,0 +1,23 @@
1
+ ---
2
+ name: build-validate
3
+ description: Verify code changes compile, pass tests, and work correctly. Runs build, lint, tests, dev server checks. Reports without modifying code.
4
+ ---
5
+
6
+ # Build Validation
7
+
8
+ Verify the current project state:
9
+
10
+ 1. Run build command (`npm run build` or equivalent)
11
+ 2. Run linter if configured
12
+ 3. Run test suite if exists
13
+ 4. Start dev server, verify it loads (curl for 200)
14
+ 5. For UI changes, take a screenshot
15
+
16
+ Report each step as PASS/FAIL with details. NEVER modify code — only report.
17
+
18
+ ## Auto-Learn
19
+
20
+ If any step FAILS, call `rex_learn` MCP tool:
21
+ - category: `"lesson"`
22
+ - fact: the error message + root cause + fix applied (e.g. "Next.js build fails with X when Y — fix: Z")
23
+ - This builds a knowledge base of project-specific build issues
@@ -0,0 +1,25 @@
1
+ ---
2
+ name: code-review
3
+ description: Thorough code review of staged/changed files. Checks logic errors, security, performance, missing states, TypeScript strictness.
4
+ ---
5
+
6
+ # Code Review
7
+
8
+ Review all changed files (`git diff`):
9
+
10
+ 1. Logic errors and edge cases
11
+ 2. Security vulnerabilities (OWASP top 10)
12
+ 3. Performance (N+1 queries, unbounded loops, missing indexes)
13
+ 4. Missing error handling, loading/empty/error states
14
+ 5. TypeScript strictness (no `any`, no `@ts-ignore` without justification)
15
+ 6. Consistency with existing codebase patterns
16
+
17
+ Rate findings: **critical** / **warning** / **suggestion**. Provide fix snippets.
18
+ Never suggest modifying tests to pass. Focus bugs > security > style.
19
+
20
+ ## Auto-Learn
21
+
22
+ After completing the review, call `rex_learn` MCP tool for each notable finding:
23
+ - category: `"pattern"` for codebase patterns, `"lesson"` for bugs/anti-patterns
24
+ - fact: concise description of the pattern found and why it matters
25
+ - Only learn findings rated **critical** or recurring patterns — skip trivial suggestions
@@ -0,0 +1,25 @@
1
+ ---
2
+ name: context-loader
3
+ description: Load relevant documentation and project context before starting work. Reads local docs cache, project CLAUDE.md, and REX memory. Use at session start or project switch.
4
+ ---
5
+
6
+ # Context Loader
7
+
8
+ Load context for: $ARGUMENTS (project path or framework name)
9
+
10
+ ## If project path given:
11
+ 1. Read project's `CLAUDE.md` if exists
12
+ 2. Read `package.json` / `composer.json` / `pubspec.yaml` to detect stack
13
+ 3. Call `rex_context(project_path)` for past session insights
14
+ 4. For each framework detected, read `~/.claude/docs/{framework}.md` if exists
15
+ 5. Report: stack detected, relevant docs loaded, past context found
16
+
17
+ ## If framework name given:
18
+ 1. Check `~/.claude/docs/{framework}.md` — if exists, read it
19
+ 2. If not exists, fetch via Context7 and save key patterns to `~/.claude/docs/{framework}.md`
20
+ 3. Report: doc loaded/created, key patterns summarized
21
+
22
+ ## Rules
23
+ - NEVER load docs that aren't relevant to the current task
24
+ - Always check local cache before fetching from network
25
+ - Keep doc files under 100 lines — patterns and gotchas only, not full API reference
@@ -0,0 +1,26 @@
1
+ ---
2
+ name: debug-assist
3
+ description: Systematic debugging. Reads error, searches REX memory for past solutions, checks docs, identifies root cause. Use when stuck on an error.
4
+ ---
5
+
6
+ # Debug Assist
7
+
8
+ Debug: $ARGUMENTS (paste the error message or describe the issue)
9
+
10
+ ## Process
11
+ 1. **Parse the error**: extract file, line, error type, stack trace
12
+ 2. **Check REX memory**: `rex_search("error message keywords")` for past solutions
13
+ 3. **Check local docs**: read `~/.claude/docs/{framework}.md` for known gotchas
14
+ 4. **Search codebase**: find the failing code, read surrounding context
15
+ 5. **Identify root cause**: not the symptom — what ACTUALLY caused it
16
+ 6. **Propose fix**: with code snippet and explanation
17
+
18
+ ## Anti-patterns (NEVER do these)
19
+ - Never suppress the error without understanding it
20
+ - Never delete a test to make it pass
21
+ - Never add `@ts-ignore` or `eslint-disable` as a fix
22
+ - Never retry the same approach more than twice — try a different angle
23
+
24
+ ## After fixing
25
+ - Save the pattern to REX: `rex_learn("Error X was caused by Y, fix is Z", "debug")`
26
+ - Update `~/.claude/docs/{framework}.md` if it's a framework gotcha
@@ -0,0 +1,61 @@
1
+ ---
2
+ name: deploy-checklist
3
+ description: Pre-deployment checklist. Use when user says "deploy", "push to prod", "push to beta", "ship it", or before any deployment. Runs verification steps before allowing deploy.
4
+ disable-model-invocation: true
5
+ ---
6
+
7
+ # Deploy Checklist
8
+
9
+ Run this checklist BEFORE any deployment. $ARGUMENTS can specify the target (beta/prod).
10
+
11
+ ## Pre-Deploy Verification
12
+
13
+ 1. **Check git status**:
14
+ - All changes committed? No uncommitted work?
15
+ - On the correct branch?
16
+ - Branch is up to date with remote?
17
+
18
+ 2. **Run tests** (if test suite exists):
19
+ ```bash
20
+ # Detect and run project tests
21
+ # PHP: composer test or vendor/bin/phpunit
22
+ # Node/Angular: npm test
23
+ # Flutter: flutter test
24
+ # Python: pytest
25
+ ```
26
+
27
+ 3. **Run linter/formatter** (if configured):
28
+ ```bash
29
+ # Detect and run linter
30
+ # PHP: composer lint or vendor/bin/phpcs
31
+ # Node: npm run lint
32
+ # Flutter: flutter analyze
33
+ ```
34
+
35
+ 4. **Build check**:
36
+ - Run production build to catch compile errors
37
+ - Verify build output exists and looks correct
38
+
39
+ 5. **Environment check**:
40
+ - Verify environment config points to the correct target (beta vs prod)
41
+ - NEVER deploy with local/dev config pointing to wrong DB or API
42
+ - Check for hardcoded localhost URLs
43
+
44
+ 6. **PR status** (if deploying from a PR):
45
+ - All CI checks passing?
46
+ - Gemini Code Assist review: any critical issues?
47
+ - GitHub Copilot review: any critical issues?
48
+
49
+ ## Deploy Decision
50
+
51
+ - If ANY check fails: STOP and report to user
52
+ - If all checks pass: proceed with deploy and confirm target with user
53
+
54
+ IMPORTANT: Always ask "beta or prod?" if not specified. Never assume prod.
55
+
56
+ ## Auto-Learn
57
+
58
+ If any deploy issue is found, call `rex_learn` MCP tool:
59
+ - category: `"lesson"`
60
+ - fact: the deploy issue + environment + fix (e.g. "Cloudflare deploy failed: missing wrangler.toml env binding for PROD")
61
+ - Helps prevent repeating the same deploy mistakes
@@ -0,0 +1,120 @@
1
+ ---
2
+ name: dstudio-design-system
3
+ description: Load the dstudio-ui design system context — tokens, components, patterns, and import guide. Use when building UI with @dstudio/ui components or design tokens.
4
+ user-invocable: true
5
+ ---
6
+
7
+ # dstudio-ui Design System
8
+
9
+ You are working with the **@dstudio/ui** design system. Use this reference for all UI implementation.
10
+
11
+ ## Architecture
12
+
13
+ - **Repo**: `/Users/keiy/Documents/Developer/dstudio-ui`
14
+ - **Package**: `@dstudio/ui` — exported from `src/index.ts`
15
+ - **Stack**: Next.js 16, Tailwind v4, Framer Motion (`motion/react`), Storybook v8, pnpm
16
+ - **`@` alias** maps to `src/` (NOT project root)
17
+
18
+ ## Using in Another Project
19
+
20
+ ```json
21
+ // package.json
22
+ "@dstudio/ui": "file:../dstudio-ui"
23
+ ```
24
+
25
+ Then `pnpm install` and import:
26
+
27
+ ```tsx
28
+ import { DSButton, MagicCard, KanbanBoard } from "@dstudio/ui"
29
+ ```
30
+
31
+ The consumer project **must** share the same Tailwind v4 setup with CSS vars from `globals.css`. Tokens are CSS variables, not bundled.
32
+
33
+ ## Design Tokens (Style Dictionary v4)
34
+
35
+ - **Format**: W3C DTCG `{ "$value": "...", "$type": "color" }`
36
+ - **Token files**: `tokens/core/*.json` + `tokens/semantic/colors.json`
37
+ - **Build**: `pnpm build:tokens` → `build/css/`, `build/tailwind/`, `build/figma/`, `build/js/`
38
+ - **Config**: `sd.config.ts` at repo root
39
+
40
+ ### Key Semantic Colors
41
+
42
+ | Token | Value | CSS var |
43
+ |-------|-------|---------|
44
+ | background | #000000 | `--color-background` |
45
+ | foreground | #ffffff | `--color-foreground` |
46
+ | card | #080808 | `--color-card` |
47
+ | primary | #18181b | `--color-primary` |
48
+ | secondary | #f4f4f5 | `--color-secondary` |
49
+ | muted | #1a1a1a | `--color-muted` |
50
+ | border | #e4e4e7 | `--color-border` |
51
+ | destructive | #ef4444 | `--color-destructive` |
52
+
53
+ ### Using tokens in Tailwind
54
+
55
+ ```tsx
56
+ // Tokens live in @theme {} block → Tailwind v4 auto-generates utilities
57
+ className="bg-background text-foreground border-border"
58
+ className="text-gray-400 bg-dark-100"
59
+ ```
60
+
61
+ ### Adding a new token
62
+
63
+ 1. Add to `tokens/core/*.json` or `tokens/semantic/colors.json`
64
+ 2. `pnpm build:tokens`
65
+ 3. Copy new var into `src/styles/globals.css` inside `@theme {}` block
66
+ 4. Commit `build/` directory + `globals.css`
67
+
68
+ ## Available Components
69
+
70
+ ### D-Studio branded
71
+ GradientButton, GlassBadge, SmallButton, MultiLayerCard, SlightSeparator, DSButton, SquaredBadge
72
+
73
+ ### Base UI (shadcn-style)
74
+ Badge, Button, Card, Input, Accordion, Dialog, Tabs, OrbitingCircles, Skeleton, Textarea, DropdownMenu
75
+
76
+ ### Motion
77
+ BlurFade, InfiniteSlider, TextEffect, Tilt, GlowEffect, Magnetic, MagicCard, BorderTrail, TextScramble, SpinningText, TextReveal, Cursor
78
+
79
+ ### Bits
80
+ StarBorder, GradualBlur, StackingCards
81
+
82
+ ### PM (Project Management)
83
+ StatusBadge, AvatarStack, BoardTable, KanbanBoard, GanttChart, TimelineCalendar, DatePicker, StatusSelector, Notepad, NeonGlow, AnimatedBlob, PrioritySlider
84
+
85
+ ### AI
86
+ AskAiButton, SuggestionChips
87
+
88
+ ### Contact
89
+ ContactForm, MultiStateButton
90
+
91
+ ### Shared
92
+ ScrambleRevealText, ProgressiveScrambleText, AnimatedSection
93
+
94
+ ## Key Files
95
+
96
+ | File | Purpose |
97
+ |------|---------|
98
+ | `src/index.ts` | Main package export |
99
+ | `sd.config.ts` | Style Dictionary config |
100
+ | `tokens/core/colors.json` | Primitive color palette |
101
+ | `tokens/semantic/colors.json` | Semantic color aliases |
102
+ | `src/styles/globals.css` | `@theme` block (must be inline) |
103
+ | `src/app/components/page.tsx` | Components showcase page |
104
+ | `src/app/docs/components/component-data.ts` | Docs prop tables |
105
+
106
+ ## Gotchas
107
+
108
+ - **`@theme {}` must be inline** in `globals.css` — `@import` of a file containing `@theme` breaks Vite/Storybook
109
+ - **`build/` directory is committed** (generated token outputs)
110
+ - **`Transition` type** import must come from `motion/react`
111
+ - **Framer Motion** — use `motion/react` not `framer-motion` for imports
112
+ - Nav variants: `floating-nav-landing.tsx` (next-intl), `floating-nav.tsx` (no i18n)
113
+
114
+ ## When building UI with this system
115
+
116
+ 1. Read the relevant component source in `dstudio-ui/src/` before using it
117
+ 2. Follow existing Tailwind v4 patterns (CSS vars, not hardcoded colors)
118
+ 3. Use `motion/react` for all animations
119
+ 4. Check `src/index.ts` to see what's exported before importing
120
+ 5. Run `pnpm build` in the consumer project to verify
@@ -0,0 +1,23 @@
1
+ ---
2
+ name: figma-workflow
3
+ description: Implement UI from Figma designs using get_design_context, mapping to dstudio-ui components and project design tokens. Use when given a Figma URL or node ID.
4
+ ---
5
+
6
+ # Figma to Code Workflow
7
+
8
+ Use this skill when implementing UI from Figma designs.
9
+
10
+ ## Process
11
+ 1. Call `get_design_context` with the Figma node ID and file key
12
+ 2. Review the returned code, screenshot, and metadata
13
+ 3. Map to existing dstudio-ui components — NEVER recreate what already exists
14
+ 4. Extract design tokens (colors, spacing, typography) and map to project tokens
15
+ 5. Adapt the reference code to the project's stack and conventions
16
+ 6. Use Code Connect to link Figma components ↔ codebase components
17
+
18
+ ## Rules
19
+ - Always check dstudio-ui for existing components first
20
+ - Use project's design tokens, not raw hex values
21
+ - Responsive: mobile-first approach
22
+ - Accessibility: proper ARIA labels, semantic HTML
23
+ - Loading/empty/error states for dynamic content
@@ -0,0 +1,43 @@
1
+ ---
2
+ name: fix-issue
3
+ description: Fix a GitHub issue end-to-end. Use when user says "/fix-issue 123" or "fix issue #123".
4
+ disable-model-invocation: true
5
+ ---
6
+
7
+ # Fix GitHub Issue
8
+
9
+ Analyze and fix the GitHub issue: $ARGUMENTS
10
+
11
+ 1. **Get issue details**:
12
+ ```bash
13
+ gh issue view $ARGUMENTS
14
+ ```
15
+
16
+ 2. **Understand the problem**:
17
+ - Read the issue description, labels, and comments
18
+ - Identify the affected area of the codebase
19
+ - Search for relevant files using Grep/Glob
20
+
21
+ 3. **Create a feature branch**:
22
+ ```bash
23
+ gh issue view $ARGUMENTS --json title -q .title
24
+ # Branch name: fix/issue-NUMBER-short-description
25
+ git checkout -b fix/issue-$ARGUMENTS-<short-description>
26
+ ```
27
+
28
+ 4. **Implement the fix**:
29
+ - Read relevant code before modifying
30
+ - Follow existing patterns in the codebase
31
+ - Make minimal, focused changes
32
+
33
+ 5. **Verify the fix**:
34
+ - Run tests if they exist
35
+ - Run linter if configured
36
+ - Build the project to check for errors
37
+
38
+ 6. **Commit and create PR**:
39
+ - Commit with message referencing the issue: `fix: <description> (closes #$ARGUMENTS)`
40
+ - Push branch and create PR linking to the issue
41
+ - Wait for Gemini/Copilot reviews
42
+
43
+ 7. **Report to user**: show what was changed and ask for review
@@ -0,0 +1,19 @@
1
+ ---
2
+ name: new-rule
3
+ description: Create a new rule in ~/.claude/rules/ when a recurring error or anti-pattern is identified. Implements "Mistakes become rules" automatically.
4
+ ---
5
+
6
+ # New Rule
7
+
8
+ When an error or anti-pattern has been encountered multiple times (3+), create a permanent rule.
9
+
10
+ 1. **Identify the pattern**: What went wrong? What's the root cause?
11
+ 2. **Check existing rules**: Read `~/.claude/rules/` — does a similar rule already exist?
12
+ 3. **Write the rule**:
13
+ - File: `~/.claude/rules/{topic}.md` (new or append to existing)
14
+ - Format: `JAMAIS X → TOUJOURS Y à la place` (every prohibition MUST have an alternative)
15
+ - Include a concrete code example (good vs bad)
16
+ 4. **Memorize**: Call `rex_learn` with category `"lesson"` and the rule summary
17
+ 5. **Report**: Tell the user what rule was created and why
18
+
19
+ Rules must be actionable, not vague. "Don't do X" is insufficient — always specify what to do instead.
@@ -0,0 +1,26 @@
1
+ ---
2
+ name: notify
3
+ description: Send a Telegram notification to Kevin. Use when user says "/notify", "notify me", "send telegram", or at end of important tasks. Arguments become the message body.
4
+ user_invocable: true
5
+ ---
6
+
7
+ # Notify via Telegram
8
+
9
+ Send a notification to Kevin's Telegram using the notify script. Zero tokens — pure shell.
10
+
11
+ ## Usage
12
+
13
+ ```bash
14
+ bash ~/notify-telegram.sh "$ARGUMENTS"
15
+ ```
16
+
17
+ If `$ARGUMENTS` is empty, auto-generate a one-line summary of what was just accomplished:
18
+ - Project name + branch
19
+ - What changed (brief)
20
+
21
+ Example:
22
+ ```bash
23
+ bash ~/notify-telegram.sh "PR #42 created on rex" "feat/v3 — 33 files, 1800+ lines"
24
+ ```
25
+
26
+ IMPORTANT: This is a shell script call, NOT an LLM task. Do not elaborate. Just call the script.
@@ -0,0 +1,18 @@
1
+ ---
2
+ name: one-shot
3
+ description: Generate a complete production-ready project in one shot. Next.js + Shadcn UI + dstudio-ui. Use for rapid prototyping and SAAS scaffolding.
4
+ ---
5
+
6
+ # One-Shot Project Generator
7
+
8
+ Create a complete project: $ARGUMENTS
9
+
10
+ 1. Read `~/.claude/docs/nextjs.md` and `~/.claude/docs/react.md` for current patterns
11
+ 2. Load dstudio-ui design system context: `/dstudio-design-system`
12
+ 3. Scaffold with: Next.js App Router, TypeScript, Tailwind v4, dstudio-ui components
13
+ 4. Include: auth scaffold, API routes with validation, DB schema, loading/empty/error states
14
+ 5. Apply all defensive engineering rules (pagination, error handling, rate limits)
15
+ 6. Setup: `package.json`, `tsconfig.json`, `.env.example`, `README.md`
16
+ 7. Run `npm install && npm run build` to verify
17
+
18
+ Output a working project, not a template.