design

Name: design
Author: popmechanic

134stars6forks

How to install design?

popmechanic/vibesos/design

$npx -y skills add popmechanic/VibesOS --skill design

Installs into the current project.

Summary

Self-contained design transformer — invoke directly, do not decompose. Transforms a design reference HTML file into a Vibes app. Use when user provides a design.html, mockup, or static prototype to match exactly.

Files · 1

View on GitHub

SKILL.md

1	> Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:design". Do not decompose the steps below into separate plan tasks.
2
3	Display this ASCII art immediately when starting:
4
5	```
6	░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░▒▓█▓▒░░▒▓██████▓▒░░▒▓███████▓▒░
7	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
8	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░
9	░▒▓█▓▒░░▒▓█▓▒░▒▓██████▓▒░ ░▒▓██████▓▒░░▒▓█▓▒░▒▓█▓▒▒▓███▓▒░▒▓█▓▒░░▒▓█▓▒░
10	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
11	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
12	░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░░▒▓█▓▒░░▒▓██████▓▒░░▒▓█▓▒░░▒▓█▓▒░
13	```
14
15	# Design Reference Transformer
16
17	Transform a complete design reference HTML file into a working Vibes app with TinyBase reactive data.
18
19	---
20
21	## Core Principle
22
23	> Preserve and adapt, don't interpret and recreate.
24
25	The design reference is source code to transform, not inspiration to interpret. When given a complete HTML file with styles, your job is to make minimal surgical changes to connect it to React/TinyBase—not to recreate it from your understanding of its aesthetic.
26
27	---
28
29	## When to Use This Skill
30
31	Use this skill when:
32	- User provides a `design.html`, mockup, or static prototype file
33	- User says "match this design exactly" or "use this as a reference"
34	- User wants their existing HTML converted to a Vibes app
35	- A previous implementation didn't match the design reference
36
37	---
38
39	## The Transformation is Mechanical
40
41	The conversion from design HTML to React/TinyBase is deterministic, not creative:
42
43	\| Transformation \| Rule \| Example \|
44	\|----------------\|------\|---------\|
45	\| Attributes \| `class` → `className` \| `class="btn"` → `className="btn"` \|
46	\| Attributes \| `for` → `htmlFor` \| `for="email"` → `htmlFor="email"` \|
47	\| Attributes \| kebab-case → camelCase \| `stroke-width` → `strokeWidth` \|
48	\| Self-closing \| Add explicit close \| `<input>` → `<input />` \|
49	\| Comments \| HTML → JSX \| `<!-- x -->` → `{/* x */}` \|
50	\| Inline styles \| String → Object \| `style="color: red"` → `style={{ color: 'red' }}` \|
51	\| Event handlers \| Lowercase → camelCase \| `onclick` → `onClick` \|
52
53	CSS requires NO changes. Copy the entire `<style>` block verbatim.
54
55	---
56
57	## Workflow
58
59	### Step 1: Read the Design Reference
60
61	```bash
62	# Read the design file completely
63	Read design.html
64	```
65
66	Note the structure:
67	- `<style>` block (copy verbatim)
68	- HTML structure (preserve exactly)
69	- Any vanilla JavaScript (will be replaced with React)
70
71	### Step 2: Identify Dynamic Content
72
73	Ask: "What content comes from the database?"
74
75	Typical dynamic elements:
76	- List items that repeat (`.map()`)
77	- Text that users enter (controlled inputs)
78	- Counts, totals, timestamps
79	- User-specific content
80
81	Everything else stays static.
82
83	### Step 3: Create the React Component
84
85	```jsx
86	function App() {
87	// TinyBase hooks are globals — no imports, no initialization call needed
88	const rowIds = useRowIds('items');
89	const handleAdd = useAddRowCallback('items', (e) => ({
90	text: '', type: 'item', created: Date.now()
91	}));
92
93	return (
94	<>
95	{/* CSS copied VERBATIM from design.html */}
96	<style>{`
97	/* Paste entire <style> block here unchanged */
98	`}</style>
99
100	{/* HTML structure preserved, only syntax converted */}
101	{/* Dynamic content replaced with {expressions} */}
102	</>
103	);
104	}
105	```
106
107	### Step 4: Handle Dark Mode Override (If Needed)
108
109	The Vibes template has dark mode support. If your design is light-only, add this CSS override:
110
111	```css
112	/* Force light theme regardless of system preference */
113	html, body, #container, #container > div {
114	background-color: var(--your-bg-color) !important;
115	}
116	```
117
118	Note: Avoid targeting `[style*="position: fixed"]` as this will style the VibesSwitch toggle button.
119
120	### Step 4b: Scope CSS to Avoid VibesSwitch/VibesPanel Conflicts
121
122	The template includes a VibesSwitch toggle button and VibesPanel admin menu that sit outside your app container. Broad CSS selectors can accidentally style these components.
123
124	Watch for these problematic patterns:
125
126	\| Problematic \| Why \| Safe Alternative \|
127	\|-------------\|-----\|------------------\|
128	\| `button { ... }` \| Styles VibesSwitch toggle \| `.app button { ... }` or `#container button { ... }` \|
129	\| `* { ... }` (with colors/backgrounds) \| Cascades everywhere \| Scope to specific containers \|
130	\| `[style*="position: fixed"]` \| Targets VibesSwitch \| Target by class/ID instead \|
131	\| `body > div` \| May match menu wrapper \| Use `#container > div` \|
132
133	**If your design has global button/element st

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

design

134stars6forks

View on GitHub

How to install design?

popmechanic/vibesos/design

$npx -y skills add popmechanic/VibesOS --skill design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	> Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:design". Do not decompose the steps below into separate plan tasks.
2
3	Display this ASCII art immediately when starting:
4
5	```
6	░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░▒▓█▓▒░░▒▓██████▓▒░░▒▓███████▓▒░
7	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
8	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░
9	░▒▓█▓▒░░▒▓█▓▒░▒▓██████▓▒░ ░▒▓██████▓▒░░▒▓█▓▒░▒▓█▓▒▒▓███▓▒░▒▓█▓▒░░▒▓█▓▒░
10	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
11	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
12	░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░░▒▓█▓▒░░▒▓██████▓▒░░▒▓█▓▒░░▒▓█▓▒░
13	```
14
15	# Design Reference Transformer
16
17	Transform a complete design reference HTML file into a working Vibes app with TinyBase reactive data.
18
19	---
20
21	## Core Principle
22
23	> Preserve and adapt, don't interpret and recreate.
24
25	The design reference is source code to transform, not inspiration to interpret. When given a complete HTML file with styles, your job is to make minimal surgical changes to connect it to React/TinyBase—not to recreate it from your understanding of its aesthetic.
26
27	---
28
29	## When to Use This Skill
30
31	Use this skill when:
32	- User provides a `design.html`, mockup, or static prototype file
33	- User says "match this design exactly" or "use this as a reference"
34	- User wants their existing HTML converted to a Vibes app
35	- A previous implementation didn't match the design reference
36
37	---
38
39	## The Transformation is Mechanical
40
41	The conversion from design HTML to React/TinyBase is deterministic, not creative:
42
43	\| Transformation \| Rule \| Example \|
44	\|----------------\|------\|---------\|
45	\| Attributes \| `class` → `className` \| `class="btn"` → `className="btn"` \|
46	\| Attributes \| `for` → `htmlFor` \| `for="email"` → `htmlFor="email"` \|
47	\| Attributes \| kebab-case → camelCase \| `stroke-width` → `strokeWidth` \|
48	\| Self-closing \| Add explicit close \| `<input>` → `<input />` \|
49	\| Comments \| HTML → JSX \| `<!-- x -->` → `{/* x */}` \|
50	\| Inline styles \| String → Object \| `style="color: red"` → `style={{ color: 'red' }}` \|
51	\| Event handlers \| Lowercase → camelCase \| `onclick` → `onClick` \|
52
53	CSS requires NO changes. Copy the entire `<style>` block verbatim.
54
55	---
56
57	## Workflow
58
59	### Step 1: Read the Design Reference
60
61	```bash
62	# Read the design file completely
63	Read design.html
64	```
65
66	Note the structure:
67	- `<style>` block (copy verbatim)
68	- HTML structure (preserve exactly)
69	- Any vanilla JavaScript (will be replaced with React)
70
71	### Step 2: Identify Dynamic Content
72
73	Ask: "What content comes from the database?"
74
75	Typical dynamic elements:
76	- List items that repeat (`.map()`)
77	- Text that users enter (controlled inputs)
78	- Counts, totals, timestamps
79	- User-specific content
80
81	Everything else stays static.
82
83	### Step 3: Create the React Component
84
85	```jsx
86	function App() {
87	// TinyBase hooks are globals — no imports, no initialization call needed
88	const rowIds = useRowIds('items');
89	const handleAdd = useAddRowCallback('items', (e) => ({
90	text: '', type: 'item', created: Date.now()
91	}));
92
93	return (
94	<>
95	{/* CSS copied VERBATIM from design.html */}
96	<style>{`
97	/* Paste entire <style> block here unchanged */
98	`}</style>
99
100	{/* HTML structure preserved, only syntax converted */}
101	{/* Dynamic content replaced with {expressions} */}
102	</>
103	);
104	}
105	```
106
107	### Step 4: Handle Dark Mode Override (If Needed)
108
109	The Vibes template has dark mode support. If your design is light-only, add this CSS override:
110
111	```css
112	/* Force light theme regardless of system preference */
113	html, body, #container, #container > div {
114	background-color: var(--your-bg-color) !important;
115	}
116	```
117
118	Note: Avoid targeting `[style*="position: fixed"]` as this will style the VibesSwitch toggle button.
119
120	### Step 4b: Scope CSS to Avoid VibesSwitch/VibesPanel Conflicts
121
122	The template includes a VibesSwitch toggle button and VibesPanel admin menu that sit outside your app container. Broad CSS selectors can accidentally style these components.
123
124	Watch for these problematic patterns:
125
126	\| Problematic \| Why \| Safe Alternative \|
127	\|-------------\|-----\|------------------\|
128	\| `button { ... }` \| Styles VibesSwitch toggle \| `.app button { ... }` or `#container button { ... }` \|
129	\| `* { ... }` (with colors/backgrounds) \| Cascades everywhere \| Scope to specific containers \|
130	\| `[style*="position: fixed"]` \| Targets VibesSwitch \| Target by class/ID instead \|
131	\| `body > div` \| May match menu wrapper \| Use `#container > div` \|
132
133	**If your design has global button/element st

People who liked this also viewed

6 picks

Type