@buttonschool/create-wireframe 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/README.md +21 -0
- package/index.js +38 -0
- package/package.json +17 -0
- package/template/AGENTS.md +16 -0
- package/template/index.html +12 -0
- package/template/package.json +18 -0
- package/template/src/kit/tokens.css +46 -0
- package/template/src/main.js +6 -0
- package/template/src/style.css +13 -0
- package/template/vite.config.js +3 -0
package/README.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# @buttonschool/create-wireframe
|
|
2
|
+
|
|
3
|
+
Scaffold a **Vite (vanilla)** wireframe prototype with design tokens, Comic Neue font, and Lucide icons. Light setup, code-gen friendly.
|
|
4
|
+
|
|
5
|
+
## Create a project
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm create @buttonschool/wireframe my-app
|
|
9
|
+
cd my-app
|
|
10
|
+
pnpm dev
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## What’s included
|
|
14
|
+
|
|
15
|
+
- **Vite** – dev server with HMR, `pnpm dev` / `pnpm build` / `pnpm preview`
|
|
16
|
+
- **Design tokens** – `src/kit/tokens.css`: grayscale palette, semantic color aliases, spacing scale, border radius, typography (Comic Neue)
|
|
17
|
+
- **Comic Neue** – via [@fontsource/comic-neue](https://fontsource.org/fonts/comic-neue) (OFL-1.1)
|
|
18
|
+
- **Lucide** – dependency only; [Lucide icons](https://lucide.dev) – import and render as SVG as needed
|
|
19
|
+
- **AGENTS.md** – short instructions for AI/code-gen (tokens location, dev server, icons)
|
|
20
|
+
|
|
21
|
+
First version: tokens + font + icons only, no component CSS. Not opinionated; add your own structure.
|
package/index.js
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import { cpSync, existsSync, readFileSync, writeFileSync } from "fs";
|
|
4
|
+
import { dirname, join } from "path";
|
|
5
|
+
import { fileURLToPath } from "url";
|
|
6
|
+
import { spawn } from "child_process";
|
|
7
|
+
|
|
8
|
+
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
9
|
+
const templateDir = join(__dirname, "template");
|
|
10
|
+
|
|
11
|
+
const projectName = process.argv[2];
|
|
12
|
+
if (!projectName) {
|
|
13
|
+
console.error("Usage: pnpm create @buttonschool/wireframe <project-name>");
|
|
14
|
+
process.exit(1);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const targetDir = join(process.cwd(), projectName);
|
|
18
|
+
if (existsSync(targetDir)) {
|
|
19
|
+
console.error(`Error: directory "${projectName}" already exists.`);
|
|
20
|
+
process.exit(1);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
cpSync(templateDir, targetDir, { recursive: true });
|
|
24
|
+
|
|
25
|
+
const pkgPath = join(targetDir, "package.json");
|
|
26
|
+
const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
|
|
27
|
+
pkg.name = projectName;
|
|
28
|
+
writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
|
|
29
|
+
|
|
30
|
+
const child = spawn("pnpm", ["install"], {
|
|
31
|
+
cwd: targetDir,
|
|
32
|
+
stdio: "inherit",
|
|
33
|
+
shell: true,
|
|
34
|
+
});
|
|
35
|
+
child.on("close", (code) => {
|
|
36
|
+
if (code !== 0) process.exit(code);
|
|
37
|
+
console.log(`\nDone. Run:\n cd ${projectName}\n pnpm dev\n`);
|
|
38
|
+
});
|
package/package.json
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@buttonschool/create-wireframe",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Scaffold a Vite-based wireframe prototype with tokens, Comic Neue, and Lucide",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": "index.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"template",
|
|
9
|
+
"index.js"
|
|
10
|
+
],
|
|
11
|
+
"engines": {
|
|
12
|
+
"node": ">=18"
|
|
13
|
+
},
|
|
14
|
+
"publishConfig": {
|
|
15
|
+
"access": "public"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# Wireframe prototype project
|
|
2
|
+
|
|
3
|
+
This is a **wireframe prototype** scaffold. Stack: **Vite** (vanilla JS), design tokens, **Comic Neue** font, and **Lucide** icons. Keep structure minimal; suitable for code-gen and rapid iteration.
|
|
4
|
+
|
|
5
|
+
## Tokens
|
|
6
|
+
|
|
7
|
+
- **Location:** `src/kit/tokens.css`
|
|
8
|
+
- **Usage:** CSS custom properties on `:root` with `--wire-*` prefix: colors (grayscale + semantic aliases), spacing (`--wire-space-*`), radius (`--wire-radius-*`), typography (`--wire-font-family`, `--wire-line-height`). Use them in your CSS, e.g. `color: var(--wire-text-primary);`, `padding: var(--wire-space-md);`.
|
|
9
|
+
|
|
10
|
+
## Dev server
|
|
11
|
+
|
|
12
|
+
- **Run:** `pnpm dev` — starts Vite dev server with HMR.
|
|
13
|
+
|
|
14
|
+
## Icons
|
|
15
|
+
|
|
16
|
+
- **Lucide** is installed. Import icons and render as SVG (e.g. use the `lucide` package API or copy SVGs from [Lucide](https://lucide.dev)). Prefer semantic icon names; keep icons consistent with wireframe style.
|
|
@@ -0,0 +1,12 @@
|
|
|
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>Wireframe</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="/src/main.js"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "wireframe-app",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"lucide": "^0.468.0"
|
|
13
|
+
},
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"@fontsource/comic-neue": "^5.1.0",
|
|
16
|
+
"vite": "^6.0.0"
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* Wireframe Kit – design tokens only. Comic Neue via @fontsource (OFL-1.1). */
|
|
2
|
+
|
|
3
|
+
@import "@fontsource/comic-neue/400.css";
|
|
4
|
+
@import "@fontsource/comic-neue/700.css";
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* Colors – grayscale palette */
|
|
8
|
+
--wire-black: #111111;
|
|
9
|
+
--wire-dark: #444444;
|
|
10
|
+
--wire-mid: #888888;
|
|
11
|
+
--wire-light: #bbbbbb;
|
|
12
|
+
--wire-lighter: #eeeeee;
|
|
13
|
+
--wire-bg: #fafafa;
|
|
14
|
+
--wire-white: #ffffff;
|
|
15
|
+
|
|
16
|
+
/* Semantic color aliases */
|
|
17
|
+
--wire-text-primary: var(--wire-black);
|
|
18
|
+
--wire-text-secondary: var(--wire-dark);
|
|
19
|
+
--wire-text-muted: var(--wire-mid);
|
|
20
|
+
--wire-text-placeholder: var(--wire-light);
|
|
21
|
+
--wire-border: var(--wire-light);
|
|
22
|
+
--wire-border-light: var(--wire-lighter);
|
|
23
|
+
--wire-surface: var(--wire-white);
|
|
24
|
+
--wire-surface-alt: var(--wire-bg);
|
|
25
|
+
|
|
26
|
+
/* Typography */
|
|
27
|
+
--wire-font-family: "Comic Neue", system-ui, sans-serif;
|
|
28
|
+
--wire-font-weight-normal: 400;
|
|
29
|
+
--wire-font-weight-bold: 700;
|
|
30
|
+
--wire-line-height: 1.4;
|
|
31
|
+
|
|
32
|
+
/* Spacing scale */
|
|
33
|
+
--wire-space-xs: 4px;
|
|
34
|
+
--wire-space-sm: 8px;
|
|
35
|
+
--wire-space-md: 12px;
|
|
36
|
+
--wire-space-lg: 16px;
|
|
37
|
+
--wire-space-xl: 20px;
|
|
38
|
+
--wire-space-2xl: 24px;
|
|
39
|
+
--wire-space-3xl: 32px;
|
|
40
|
+
|
|
41
|
+
/* Border radius */
|
|
42
|
+
--wire-radius-sm: 4px;
|
|
43
|
+
--wire-radius-md: 6px;
|
|
44
|
+
--wire-radius-lg: 8px;
|
|
45
|
+
--wire-radius-full: 50%;
|
|
46
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@import "./kit/tokens.css";
|
|
2
|
+
|
|
3
|
+
body {
|
|
4
|
+
font-family: var(--wire-font-family);
|
|
5
|
+
line-height: var(--wire-line-height);
|
|
6
|
+
color: var(--wire-text-primary);
|
|
7
|
+
background-color: var(--wire-surface);
|
|
8
|
+
margin: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
#app {
|
|
12
|
+
padding: var(--wire-space-xl);
|
|
13
|
+
}
|