create-dstack 0.1.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.
- package/LICENSE +21 -0
- package/README.md +34 -0
- package/dist/index.js +1419 -0
- package/package.json +31 -0
- package/templates/.claude/.gitkeep +0 -0
- package/templates/.claude/settings.json +32 -0
- package/templates/.cursor/hooks.json +10 -0
- package/templates/.cursor/skills/api/SKILL.md +198 -0
- package/templates/.cursor/skills/api-timing-logs/SKILL.md +77 -0
- package/templates/.cursor/skills/brand-styling/SKILL.md +104 -0
- package/templates/.cursor/skills/create-pr/SKILL.md +138 -0
- package/templates/.cursor/skills/frontend-design/SKILL.md +45 -0
- package/templates/.cursor/skills/make-interfaces-feel-better/SKILL.md +122 -0
- package/templates/.cursor/skills/make-interfaces-feel-better/animations.md +381 -0
- package/templates/.cursor/skills/make-interfaces-feel-better/performance.md +88 -0
- package/templates/.cursor/skills/make-interfaces-feel-better/surfaces.md +245 -0
- package/templates/.cursor/skills/make-interfaces-feel-better/typography.md +125 -0
- package/templates/.cursor/skills/react-doctor/SKILL.md +19 -0
- package/templates/.cursor/skills/ux-writing/SKILL.md +453 -0
- package/templates/CLAUDE.md +61 -0
- package/templates/agents.md +61 -0
- package/templates/convex/auth.config.ts +7 -0
- package/templates/globals.css +122 -0
- package/templates/oxfmt.json +14 -0
- package/templates/oxlint.json +22 -0
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "create-dstack",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Create a new dstack project — Next.js, Bun, Convex, Shadcn, Oxlint, Oxfmt",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/devanshg03/dstack.git"
|
|
9
|
+
},
|
|
10
|
+
"bin": {
|
|
11
|
+
"create-dstack": "./dist/index.js"
|
|
12
|
+
},
|
|
13
|
+
"scripts": {
|
|
14
|
+
"build": "bun build ./src/index.ts --outfile ./dist/index.js --target node --banner '#!/usr/bin/env node'",
|
|
15
|
+
"start": "bun run ./src/index.ts",
|
|
16
|
+
"prepublishOnly": "bun run build"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist",
|
|
20
|
+
"templates"
|
|
21
|
+
],
|
|
22
|
+
"keywords": ["create-next-app", "nextjs", "convex", "shadcn", "oxlint", "bun"],
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@clack/prompts": "^1.2.0",
|
|
26
|
+
"picocolors": "^1.1.1"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@types/bun": "^1.3.11"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"permissions": {
|
|
3
|
+
"allow": [
|
|
4
|
+
"WebFetch(domain:ai-sdk.dev)",
|
|
5
|
+
"Bash(curl*localhost*)",
|
|
6
|
+
"Bash(curl -s -X POST http://localhost:3000/api/test)"
|
|
7
|
+
],
|
|
8
|
+
"deny": ["Bash(rm -rf *)", "Bash(curl *)", "Read(./.env)", "Read(./.env.*)"]
|
|
9
|
+
},
|
|
10
|
+
"sandbox": {
|
|
11
|
+
"enabled": true,
|
|
12
|
+
"autoAllowBashIfSandboxed": true
|
|
13
|
+
},
|
|
14
|
+
"attribution": {
|
|
15
|
+
"commit": "",
|
|
16
|
+
"pr": ""
|
|
17
|
+
},
|
|
18
|
+
"hooks": {
|
|
19
|
+
"Stop": [
|
|
20
|
+
{
|
|
21
|
+
"hooks": [
|
|
22
|
+
{
|
|
23
|
+
"type": "command",
|
|
24
|
+
"command": "cd <project-dir> && ./node_modules/.bin/oxfmt . 2>/dev/null || true",
|
|
25
|
+
"statusMessage": "Formatting..."
|
|
26
|
+
}
|
|
27
|
+
]
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: api
|
|
3
|
+
description: Whenever designing or working on API routes
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# API Development Rules
|
|
7
|
+
|
|
8
|
+
Every API route is either user-authenticated or system-authenticated. No exceptions.
|
|
9
|
+
|
|
10
|
+
## 1. Route Handlers
|
|
11
|
+
|
|
12
|
+
- Use standard Next.js `NextRequest` and `NextResponse` types only
|
|
13
|
+
- No custom middleware that wraps handlers
|
|
14
|
+
|
|
15
|
+
## 2. Authentication
|
|
16
|
+
|
|
17
|
+
### User APIs (browser/app requests)
|
|
18
|
+
|
|
19
|
+
Resolve the signed-in user with **StackAuth on the server**. In Route Handlers and Server Actions, use Stack's server-side session APIs—**not** the React `useUser` hook (that is client-only).
|
|
20
|
+
|
|
21
|
+
After auth, read and write data through **Convex** (`fetchQuery`, `fetchMutation`, `fetchAction` from `convex/nextjs`) so authorization can rely on `ctx.auth` inside Convex functions. Pass the Convex auth token when your setup requires it (same pattern as other OIDC providers: token option on `fetch*`).
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import { fetchMutation } from "convex/nextjs";
|
|
25
|
+
import { api } from "@/convex/_generated/api";
|
|
26
|
+
import type { NextRequest } from "next/server";
|
|
27
|
+
|
|
28
|
+
export async function PATCH(request: NextRequest) {
|
|
29
|
+
// 1. Resolve user with StackAuth server APIs; return 401 if missing
|
|
30
|
+
// 2. Build Convex token if your Stack+Convex integration uses JWT forwarding
|
|
31
|
+
const token = await getConvexAuthTokenFromRequest(request);
|
|
32
|
+
const args = await request.json();
|
|
33
|
+
await fetchMutation(api.example.updateThing, args, { token });
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Cron/System APIs
|
|
38
|
+
|
|
39
|
+
Use Bearer token + trusted Convex entry points:
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
const authHeader = request.headers.get("authorization");
|
|
43
|
+
if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
|
|
44
|
+
return new Response("Unauthorized", { status: 401 });
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
await fetchMutation(api.jobs.runScheduled, payload);
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Use **deployment-appropriate** Convex access for system jobs (e.g. internal mutations or HTTP actions that validate the same secret). Never reuse a "god mode" client for user-initiated work.
|
|
51
|
+
|
|
52
|
+
### Access shape
|
|
53
|
+
|
|
54
|
+
| Caller | Auth | Data layer |
|
|
55
|
+
| ----------------- | ----------------- | ----------------------------------- |
|
|
56
|
+
| User API route | StackAuth session | Convex via `fetch*` + user token |
|
|
57
|
+
| System / cron API | Bearer secret | Convex mutation/action for batch/system work |
|
|
58
|
+
|
|
59
|
+
Never bypass user-level Convex auth for operations that should be scoped to a single user.
|
|
60
|
+
|
|
61
|
+
## 3. Validation
|
|
62
|
+
|
|
63
|
+
**Every API route MUST validate with Zod.** No exceptions.
|
|
64
|
+
|
|
65
|
+
### Validation Order: Fail Fast
|
|
66
|
+
|
|
67
|
+
1. Authenticate
|
|
68
|
+
2. Parse and validate request body immediately
|
|
69
|
+
3. Then do expensive operations (Convex calls, external APIs)
|
|
70
|
+
|
|
71
|
+
### Schema Patterns
|
|
72
|
+
|
|
73
|
+
- Use `.trim()` for strings, `.email()` for emails
|
|
74
|
+
- Use `.refine()` for custom business logic
|
|
75
|
+
- Use `z.discriminatedUnion()` for conditional validation
|
|
76
|
+
|
|
77
|
+
## 4. Error Response Format
|
|
78
|
+
|
|
79
|
+
All errors use Stripe-style format:
|
|
80
|
+
|
|
81
|
+
```typescript
|
|
82
|
+
{
|
|
83
|
+
error: {
|
|
84
|
+
type: string; // Required: validation_error, authentication_error, api_error, etc.
|
|
85
|
+
message: string; // Required: Human-readable
|
|
86
|
+
code?: string; // Optional: MISSING_EMAIL, QUOTA_EXCEEDED, etc.
|
|
87
|
+
param?: string; // Optional: Field name for validation errors
|
|
88
|
+
details?: unknown; // Optional: Zod errors array
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Error Types by Status
|
|
94
|
+
|
|
95
|
+
- `400` validation_error - Invalid input
|
|
96
|
+
- `401` authentication_error - Not authenticated
|
|
97
|
+
- `403` authorization_error - Not authorized
|
|
98
|
+
- `404` not_found_error - Resource missing
|
|
99
|
+
- `429` rate_limit_error - Quota exceeded
|
|
100
|
+
- `500` api_error - Internal error
|
|
101
|
+
- `503` service_unavailable_error - External service down
|
|
102
|
+
|
|
103
|
+
### Forbidden Formats
|
|
104
|
+
|
|
105
|
+
```typescript
|
|
106
|
+
// NEVER use these:
|
|
107
|
+
{ success: false, error: "message" }
|
|
108
|
+
{ error: "string" } // Must be object
|
|
109
|
+
{ message: "..." } // Must use error.message
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## 5. Standard API Template
|
|
113
|
+
|
|
114
|
+
```typescript
|
|
115
|
+
import { NextRequest, NextResponse } from "next/server";
|
|
116
|
+
import { z } from "zod";
|
|
117
|
+
import { fetchMutation } from "convex/nextjs";
|
|
118
|
+
import { api } from "@/convex/_generated/api";
|
|
119
|
+
|
|
120
|
+
const schema = z.object({
|
|
121
|
+
email: z.string().email(),
|
|
122
|
+
name: z.string().min(1),
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
export async function POST(request: NextRequest) {
|
|
126
|
+
const user = await getStackAuthUserFromRequest(request);
|
|
127
|
+
if (!user) {
|
|
128
|
+
return NextResponse.json(
|
|
129
|
+
{
|
|
130
|
+
error: { type: "authentication_error", message: "Unauthorized" },
|
|
131
|
+
},
|
|
132
|
+
{ status: 401 },
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
try {
|
|
137
|
+
const rawBody = await request.json();
|
|
138
|
+
const data = schema.parse(rawBody);
|
|
139
|
+
|
|
140
|
+
const token = await getConvexAuthTokenFromRequest(request, user);
|
|
141
|
+
const result = await fetchMutation(api.example.createProfile, data, { token });
|
|
142
|
+
|
|
143
|
+
return NextResponse.json({ success: true, data: result });
|
|
144
|
+
} catch (error) {
|
|
145
|
+
if (error instanceof z.ZodError) {
|
|
146
|
+
return NextResponse.json(
|
|
147
|
+
{
|
|
148
|
+
error: {
|
|
149
|
+
type: "validation_error",
|
|
150
|
+
message: "Validation failed",
|
|
151
|
+
details: error.issues,
|
|
152
|
+
},
|
|
153
|
+
},
|
|
154
|
+
{ status: 400 },
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
console.error("API Error:", error);
|
|
158
|
+
return NextResponse.json(
|
|
159
|
+
{
|
|
160
|
+
error: { type: "api_error", message: "Internal server error" },
|
|
161
|
+
},
|
|
162
|
+
{ status: 500 },
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
Replace `getStackAuthUserFromRequest` / `getConvexAuthTokenFromRequest` with the project's StackAuth server helpers and Convex token bridge.
|
|
169
|
+
|
|
170
|
+
## 6. Security
|
|
171
|
+
|
|
172
|
+
- Always sanitize inputs: `.trim()`, `.toLowerCase()` for emails
|
|
173
|
+
- Check user quotas before expensive operations via `user.clientReadOnlyMetadata`
|
|
174
|
+
- Use Supabase query builders, never raw SQL with user input
|
|
175
|
+
- Validate environment variables exist before using
|
|
176
|
+
- There is no SQL layer; do not concatenate user input into query strings for external services
|
|
177
|
+
|
|
178
|
+
## 7. Database Best Practices (Convex)
|
|
179
|
+
|
|
180
|
+
- Define schema and indexes in `convex/schema.ts`; query with indexed fields
|
|
181
|
+
- Limit list reads (e.g. `.take(n)` / bounded queries); avoid unbounded scans
|
|
182
|
+
- Use Convex argument validators on every function; keep Zod at the HTTP boundary
|
|
183
|
+
- Use `Promise.allSettled()` for concurrent operations that can fail independently
|
|
184
|
+
- Use `pLimit` for controlled concurrency against external APIs
|
|
185
|
+
|
|
186
|
+
## 8. Logging
|
|
187
|
+
|
|
188
|
+
- Use `console.error()` for errors with context (userId, error message, stack)
|
|
189
|
+
- Use `console.log()` sparingly for important business events
|
|
190
|
+
- Never log sensitive data (passwords, tokens, PII)
|
|
191
|
+
- Logs are auto-captured by Vercel
|
|
192
|
+
|
|
193
|
+
## 9. Testing
|
|
194
|
+
|
|
195
|
+
- Test files in `__tests__/` within API route folders
|
|
196
|
+
- Mock StackAuth server user resolution and Convex `fetch*` helpers when testing handlers in isolation
|
|
197
|
+
- Mock `request.json()` for body parsing
|
|
198
|
+
- Use `{} as NextRequest` if handler doesn't use request object
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: api-timing-logs
|
|
3
|
+
description: Adds readable one-line phase timing logs for API routes and server handlers (local debugging and production correlation). Use when instrumenting slow routes, debugging latency, adding request tracing, or when the user asks for timing logs, speed stats, or structured server logging.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# API phase timing logs (gold standard)
|
|
7
|
+
|
|
8
|
+
## Goals
|
|
9
|
+
|
|
10
|
+
- **Scannable in a terminal**: one line per phase, aligned columns, no nested objects on the happy path.
|
|
11
|
+
- **Grep-friendly**: fixed bracket tag per feature (e.g. `[ck-gen]`, `[mail-send]`).
|
|
12
|
+
- **Minimal PII**: log `user=…` **once** at start; repeat **only** on error lines that need correlation.
|
|
13
|
+
|
|
14
|
+
## Log line shape
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
[TAG] begin user=<full-user-id>
|
|
18
|
+
[TAG] <step> <ms>ms <optional key=value ...>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
- **`TAG`**: short, stable, unique within the codebase (2–8 chars after the bracket is enough if unambiguous).
|
|
22
|
+
- **`step`**: lowercase, use **dots** for sub-phases (`db.company_row`, `storage.sign`, `llm`). Pad `step` to a fixed width (e.g. 18 chars) so `ms` columns line up.
|
|
23
|
+
- **`ms`**: wall time for **that phase only** (`Date.now() - phaseStart`), not cumulative unless the step name says `total`.
|
|
24
|
+
- **Detail tail**: space-separated `key=value`. Prefer counts and compact units over raw dumps.
|
|
25
|
+
|
|
26
|
+
## Helpers (TypeScript pattern)
|
|
27
|
+
|
|
28
|
+
Copy/adapt per route; keep helpers **file-local** unless three+ routes need the same tag.
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
const TAG = "[feature-tag]";
|
|
32
|
+
|
|
33
|
+
function elapsedMs(start: number) {
|
|
34
|
+
return Date.now() - start;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function phaseLog(step: string, ms: number, detail?: string) {
|
|
38
|
+
const tail = detail ? ` ${detail}` : "";
|
|
39
|
+
console.info(`${TAG} ${step.padEnd(18)} ${String(ms).padStart(5)}ms${tail}`);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function phaseWarn(bucket: string, detail: string) {
|
|
43
|
+
console.warn(`${TAG} ${bucket} ${detail}`);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function phaseErr(step: string, userId: string, detail: string) {
|
|
47
|
+
console.error(`${TAG} ${step} user=${userId} ${detail}`);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
After auth (or once `userId` is known): `console.info(\`${TAG} begin user=${userId}\`);`then use`phaseLog`for every subsequent phase **without** repeating`userId`.
|
|
52
|
+
|
|
53
|
+
## What to log per phase
|
|
54
|
+
|
|
55
|
+
- **External I/O**: hub pull, DB reads/writes, storage sign/download, HTTP fetches, LLM calls—each gets its own line with duration.
|
|
56
|
+
- **CPU-ish work** only if it can be large (parse/format of huge payloads); otherwise merge with the phase that produced the bytes.
|
|
57
|
+
- **Final line**: `done` or `total` with end-to-end `ms` plus 1–3 summary stats (`docs=`, `llmIn=34500ch`, etc.).
|
|
58
|
+
|
|
59
|
+
## Units and compaction
|
|
60
|
+
|
|
61
|
+
- Prefer **`kch`** (thousands of **characters**) when approximating payload size from string length. Do **not** label char counts as `kB` (misleading).
|
|
62
|
+
- Rough token hints are OK: `~8676tok` with a comment in code that it is approximate (e.g. chars/4).
|
|
63
|
+
- For multiple similar items, one compact tail beats an array of objects:
|
|
64
|
+
`ok=3/3 raw~1200kch [a.json:400kch@800ms, b.pdf:…]`
|
|
65
|
+
- Cap list length in logs (e.g. first 3 files + `+2 more`) if noise gets large.
|
|
66
|
+
|
|
67
|
+
## Errors
|
|
68
|
+
|
|
69
|
+
- Use **`phaseErr`** for failures where you need to find the user in logs: include `user=<id>` and a **short** reason (message string, not full stack objects).
|
|
70
|
+
- Keep generic `console.error` for unexpected exceptions if you already logged `begin` with `user=`.
|
|
71
|
+
|
|
72
|
+
## Anti-patterns
|
|
73
|
+
|
|
74
|
+
- Repeating `userId` on every `info` line.
|
|
75
|
+
- Dumping **full prompts**, document bodies, or tokens in logs.
|
|
76
|
+
- Large **JSON blobs** for routine success paths—use one line + counts.
|
|
77
|
+
- Inconsistent tags (e.g. mixing `console.info("feature: …")` and `[tag] …` styles) in the same route.
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: brand-styling
|
|
3
|
+
description: dstack brand identity, colors, typography, and visual styling guidelines. Use when creating UI components, pages, or any visual elements.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# dstack branding
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
To access dstack's official brand identity and style resources, use this skill.
|
|
12
|
+
|
|
13
|
+
Keywords: branding, corporate identity, visual identity, styling, brand colors, typography, dstack brand, visual formatting, visual design, dstack
|
|
14
|
+
|
|
15
|
+
## Brand Guidelines
|
|
16
|
+
|
|
17
|
+
### Colors
|
|
18
|
+
|
|
19
|
+
Main Colors:
|
|
20
|
+
|
|
21
|
+
Teal:
|
|
22
|
+
#0da5a1 - Primary brand color, calls to action, active states
|
|
23
|
+
|
|
24
|
+
Background:
|
|
25
|
+
#f7f7f4 - Page background (warm off-white, not pure white)
|
|
26
|
+
|
|
27
|
+
Foreground:
|
|
28
|
+
#26251e - Primary text and dark elements
|
|
29
|
+
|
|
30
|
+
Card:
|
|
31
|
+
#f2f1ed - Card surfaces and elevated containers
|
|
32
|
+
|
|
33
|
+
Muted:
|
|
34
|
+
#6e6c5e - Secondary text and subdued labels
|
|
35
|
+
|
|
36
|
+
Border:
|
|
37
|
+
#d5d4cd - Borders, dividers, and separators
|
|
38
|
+
|
|
39
|
+
Accent Colors:
|
|
40
|
+
|
|
41
|
+
Teal Gradient Start:
|
|
42
|
+
#0da5a1 - Brand gradient start (287deg angle)
|
|
43
|
+
|
|
44
|
+
Teal Gradient End:
|
|
45
|
+
#00d4cf - Brand gradient end (lighter teal)
|
|
46
|
+
|
|
47
|
+
Semantic Colors:
|
|
48
|
+
|
|
49
|
+
Success:
|
|
50
|
+
#25935f - Success states and positive indicators
|
|
51
|
+
|
|
52
|
+
Warning:
|
|
53
|
+
#ec9c13 - Warning states and caution indicators
|
|
54
|
+
|
|
55
|
+
Error:
|
|
56
|
+
#dc2828 - Error states and destructive actions
|
|
57
|
+
|
|
58
|
+
Card Hierarchy (light to dark):
|
|
59
|
+
|
|
60
|
+
#f2f1ed - Card (base surface)
|
|
61
|
+
#f0efeb - Card-01 (slightly elevated)
|
|
62
|
+
#ebeae5 - Card-02 (mid elevation)
|
|
63
|
+
#e6e5e0 - Card-03 (high elevation)
|
|
64
|
+
#e1e0db - Card-04 (highest elevation)
|
|
65
|
+
|
|
66
|
+
### Typography
|
|
67
|
+
|
|
68
|
+
Display/Brand: Manrope (with system sans-serif fallback)
|
|
69
|
+
Body Text: Inter (with system sans-serif fallback)
|
|
70
|
+
Data/Labels: System monospace (SF Mono, Menlo, Consolas)
|
|
71
|
+
|
|
72
|
+
## Features
|
|
73
|
+
|
|
74
|
+
### Smart Font Application
|
|
75
|
+
|
|
76
|
+
- Applies Manrope to brand and display text (logo, hero sections, loading screens, onboarding)
|
|
77
|
+
- Applies Inter at light weight to all body text
|
|
78
|
+
- Applies monospace to data labels, statistics, tabular numbers, status badges, and micro-labels
|
|
79
|
+
- Manrope should use tight letter-spacing for brand moments
|
|
80
|
+
- Standard UI text (form labels, table cells, body copy) stays on Inter
|
|
81
|
+
|
|
82
|
+
### Text Styling
|
|
83
|
+
|
|
84
|
+
- Headings and brand moments: Manrope, tight tracking
|
|
85
|
+
- Body text: Inter, light weight
|
|
86
|
+
- Data and metrics: Monospace, small size (10-11px), uppercase, wide tracking
|
|
87
|
+
- Tabular numbers always use monospace for alignment
|
|
88
|
+
- Smart color selection based on surface — darker text on light surfaces, lighter text on dark
|
|
89
|
+
- Preserves text hierarchy and formatting
|
|
90
|
+
|
|
91
|
+
### Color Application
|
|
92
|
+
|
|
93
|
+
- Warm neutral palette throughout — cream and off-white tones, never stark white
|
|
94
|
+
- Brand teal used for primary actions, focus rings, and interactive highlights
|
|
95
|
+
- Brand gradient reserved for premium or highlight elements — use sparingly
|
|
96
|
+
- Card hierarchy provides layered depth through progressively darker warm neutrals
|
|
97
|
+
- Semantic colors (success, warning, error) only for their intended status meaning
|
|
98
|
+
|
|
99
|
+
### Shape and Accent Colors
|
|
100
|
+
|
|
101
|
+
- Non-text elements use the brand teal or card hierarchy colors
|
|
102
|
+
- Brand gradient cycles from #0da5a1 to #00d4cf at a 287deg angle
|
|
103
|
+
- Maintains visual interest while staying on-brand
|
|
104
|
+
- No emojis anywhere — not in UI, copy, or documentation
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: create-pr
|
|
3
|
+
description: Turn current workspace changes into a published GitHub pull request by creating or reusing a branch, committing the changes, pushing the branch, and opening a PR with gh.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
## 1. Trigger this skill
|
|
7
|
+
|
|
8
|
+
- Use when the user asks to run end-to-end PR publishing for current local changes.
|
|
9
|
+
- Use when the user asks for branch creation + commit + push + PR in one command.
|
|
10
|
+
|
|
11
|
+
## 2. Required tooling
|
|
12
|
+
|
|
13
|
+
- `git` and `gh` are available and authenticated.
|
|
14
|
+
- `scripts/create-pr.sh` exists at repo root.
|
|
15
|
+
- Git remote `origin` is configured.
|
|
16
|
+
|
|
17
|
+
## 3. Inputs you can pass
|
|
18
|
+
|
|
19
|
+
- `TARGET_BRANCH`: desired branch name.
|
|
20
|
+
- `COMMIT_MESSAGE`: commit message used for the commit.
|
|
21
|
+
- `PR_TITLE`: PR title shown in GitHub.
|
|
22
|
+
- `PR_BODY_FILE`: optional markdown file path for PR body.
|
|
23
|
+
- `BASE_BRANCH`: PR base branch (default `main`).
|
|
24
|
+
- `GIT_REMOTE`: git remote name (default `origin`).
|
|
25
|
+
|
|
26
|
+
## 4. Process
|
|
27
|
+
|
|
28
|
+
Run the workflow via script:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
TARGET_BRANCH=<branch-name> \
|
|
32
|
+
COMMIT_MESSAGE="<message>" \
|
|
33
|
+
PR_TITLE="<PR title>" \
|
|
34
|
+
BASE_BRANCH=<base branch> \
|
|
35
|
+
scripts/create-pr.sh
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Workflow order:
|
|
39
|
+
|
|
40
|
+
- Create or checkout `TARGET_BRANCH`.
|
|
41
|
+
- Add all local changes and create one commit with `COMMIT_MESSAGE`.
|
|
42
|
+
- Push branch with upstream tracking to `GIT_REMOTE`.
|
|
43
|
+
- Open a PR from `TARGET_BRANCH` to `BASE_BRANCH`.
|
|
44
|
+
- Print PR URL on success.
|
|
45
|
+
|
|
46
|
+
## 5. Safety and failure behavior
|
|
47
|
+
|
|
48
|
+
- Abort with clear error when no changes are present.
|
|
49
|
+
- Abort when required commands are unavailable.
|
|
50
|
+
- If PR creation fails after push, return a message with the pushed remote branch and stop cleanly.
|
|
51
|
+
|
|
52
|
+
## 6. PR description guidelines
|
|
53
|
+
|
|
54
|
+
# Pull Request Guide
|
|
55
|
+
|
|
56
|
+
This document describes how we write PRs for this project. The goal is for a reviewer — or anyone reading the PR months later — to understand what problem existed, what decision was made, and why, without having to read the code.
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## Structure
|
|
61
|
+
|
|
62
|
+
Every non-trivial PR should follow this structure:
|
|
63
|
+
|
|
64
|
+
### 1. Summary
|
|
65
|
+
|
|
66
|
+
One short paragraph stating what this PR does and why it matters. No bullet lists here — write in prose.
|
|
67
|
+
|
|
68
|
+
### 2. Before vs After
|
|
69
|
+
|
|
70
|
+
For architectural or flow changes, show the old and new as ASCII diagrams or code blocks. Label the problems with the old approach explicitly. The diagram should make the improvement self-evident.
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
# Example
|
|
74
|
+
Before:
|
|
75
|
+
raw snapshot (~50K tokens)
|
|
76
|
+
└─ agent A → agent B → agent C (sequential)
|
|
77
|
+
|
|
78
|
+
After:
|
|
79
|
+
formatted input (~1.5K tokens)
|
|
80
|
+
├─ agent A
|
|
81
|
+
├─ agent B (parallel)
|
|
82
|
+
└─ agent C
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### 3. Key Improvements
|
|
86
|
+
|
|
87
|
+
Bullet list of the specific wins. Be concrete — use numbers.
|
|
88
|
+
|
|
89
|
+
- "~97% token reduction" not "significant token reduction"
|
|
90
|
+
- "MAE dropped from 3.5 to 2.1" not "improved accuracy"
|
|
91
|
+
- "removed one sequential LLM hop" not "made it faster"
|
|
92
|
+
|
|
93
|
+
### 4. Deep-dive Sections
|
|
94
|
+
|
|
95
|
+
For anything non-obvious — evaluation methodology, format design, data shape changes, model selection — give it its own titled section. Reviewers who want detail can read it; others can skip.
|
|
96
|
+
|
|
97
|
+
### 5. New Data Shape
|
|
98
|
+
|
|
99
|
+
Whenever the output schema of a service or database record changes, show the new shape as a TypeScript snippet or JSON example.
|
|
100
|
+
|
|
101
|
+
### 6. Open TODOs
|
|
102
|
+
|
|
103
|
+
Explicitly list what is **not** in this PR but should be done. Bold the item name, one sentence of context. This prevents follow-up questions and captures intent before it gets lost.
|
|
104
|
+
|
|
105
|
+
- **Item name** — why it matters and what needs to happen
|
|
106
|
+
|
|
107
|
+
### 7. Test Plan
|
|
108
|
+
|
|
109
|
+
Checkboxes with specific commands and specific things to verify. Not "test it works" but:
|
|
110
|
+
|
|
111
|
+
- [ ] Run `doppler run -- npx tsx scripts/foo.ts` — verify output X
|
|
112
|
+
- [ ] Process a new profile end-to-end — confirm data shape matches Y
|
|
113
|
+
- [ ] Retry a partially-failed job — confirm only failed steps re-run
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## Tone and Style
|
|
118
|
+
|
|
119
|
+
- No emojis
|
|
120
|
+
- No tool attribution footers (e.g. "Generated with X")
|
|
121
|
+
- Write in plain declarative sentences: "Personality runs in parallel" not "We made personality run in parallel"
|
|
122
|
+
- Use exact numbers where available
|
|
123
|
+
- For model or approach comparisons, use a table
|
|
124
|
+
- Don't hedge: say what happened
|
|
125
|
+
|
|
126
|
+
## Title Format
|
|
127
|
+
|
|
128
|
+
Use [Conventional Commits](https://www.conventionalcommits.org/). Use title case for PR titles (capitalize principal words; lowercase short conjunctions like `and`, `or`, `for` unless they start the title). Preserve identifiers as they appear in code (`Cluster.AgentId`, API names, etc.).
|
|
129
|
+
|
|
130
|
+
Keep titles under 72 characters. Use the description/body for details, not the title.
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
## PR Size
|
|
135
|
+
|
|
136
|
+
- Prefer one focused PR over several small ones for tightly coupled changes
|
|
137
|
+
- If a PR touches both a refactor and a new feature, split them unless they are inseparable
|
|
138
|
+
- Infrastructure changes (schema, DB migrations) should be their own PR
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-design
|
|
3
|
+
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
|
|
4
|
+
license: Complete terms in LICENSE.txt
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
|
|
8
|
+
|
|
9
|
+
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
|
|
10
|
+
|
|
11
|
+
## Design Thinking
|
|
12
|
+
|
|
13
|
+
Before coding, understand the context and commit to a BOLD aesthetic direction:
|
|
14
|
+
|
|
15
|
+
- **Purpose**: What problem does this interface solve? Who uses it?
|
|
16
|
+
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
|
|
17
|
+
- **Constraints**: Technical requirements (framework, performance, accessibility).
|
|
18
|
+
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
|
|
19
|
+
|
|
20
|
+
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
|
|
21
|
+
|
|
22
|
+
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
|
|
23
|
+
|
|
24
|
+
- Production-grade and functional
|
|
25
|
+
- Visually striking and memorable
|
|
26
|
+
- Cohesive with a clear aesthetic point-of-view
|
|
27
|
+
- Meticulously refined in every detail
|
|
28
|
+
|
|
29
|
+
## Frontend Aesthetics Guidelines
|
|
30
|
+
|
|
31
|
+
Focus on:
|
|
32
|
+
|
|
33
|
+
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
|
|
34
|
+
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
|
|
35
|
+
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
|
|
36
|
+
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
|
|
37
|
+
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
|
|
38
|
+
|
|
39
|
+
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
|
|
40
|
+
|
|
41
|
+
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
|
|
42
|
+
|
|
43
|
+
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
|
|
44
|
+
|
|
45
|
+
Remember: You is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
|