claude-design-patterns

Name: claude-design-patterns
Author: codeclawd

16stars6forks

How to install claude-design-patterns?

codeclawd/fable-mode/claude-design-patterns

$npx -y skills add codeclawd/fable-mode --skill claude-design-patterns

Installs into the current project.

Summary

Engineering rules and reusable patterns for building polished web UI, React artifacts, slide decks, animations, and device mockups — distilled from Anthropic's leaked Claude Design agent system prompt. Use ALONGSIDE the frontend-design skill whenever building or iterating on visu

Files · 1

View on GitHub

SKILL.md

1	# Claude Design — portable engineering patterns
2
3	Companion to `frontend-design` (which covers aesthetic direction). This file is the
4	engineering layer: how Anthropic's Claude Design agent actually builds web artifacts.
5	Sourced from the leaked Claude Design system prompt (github.com/asgeirtj/system_prompts_leaks
6	`Anthropic/claude-design.md`); `/mnt`-path and proprietary-tool machinery stripped — only
7	the environment-agnostic rules are kept.
8
9	## React + Babel pinning (single-file artifacts)
10
11	Pin exact versions (never floating ranges like `react@18`) and add Subresource
12	Integrity — fetch current `sha384-…` hashes from srihash.org or the unpkg response,
13	don't hardcode stale ones:
14
15	```html
16	<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"
17	integrity="sha384-…" crossorigin="anonymous"></script>
18	<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"
19	integrity="sha384-…" crossorigin="anonymous"></script>
20	<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"
21	integrity="sha384-…" crossorigin="anonymous"></script>
22	```
23
24	## Style-object collision rule
25
26	Global-scoped style objects MUST have unique, specific names per component — a bare
27	`const styles = {...}` collides the moment two components share scope.
28
29	```js
30	const terminalStyles = { ... } // ✅ not `styles`
31	const inputStyles = { ... }
32	```
33	Or use inline styles to sidestep the problem entirely.
34
35	## Multi-file Babel — window-export pattern
36
37	Each `<script type="text/babel">` transpiles in an isolated scope. To share components
38	across scripts, export explicitly at the end of the defining file, then reference via `window.`:
39
40	```js
41	Object.assign(window, { Terminal, Line, Gray, Blue, Bold });
42	// elsewhere: <window.Terminal />
43	```
44
45	## Live-edit "Tweaks" protocol
46
47	Make ONE main file with in-design controls instead of many variant files. Handshake:
48
49	1. Register the listener before announcing availability:
50	```js
51	window.addEventListener('message', (e) => {
52	if (e.data.type === '__activate_edit_mode') { /* show Tweaks panel */ }
53	else if (e.data.type === '__deactivate_edit_mode') { /* hide it */ }
54	});
55	```
56	2. Then announce: `window.parent.postMessage({type: '__edit_mode_available'}, '*')`
57	3. On change, persist: `window.parent.postMessage({type: '__edit_mode_set_keys', edits: {fontSize: 18}}, '*')`
58	4. Wrap the defaults in JSON markers the host rewrites on disk:
59	```js
60	const TWEAK_DEFAULTS = /EDITMODE-BEGIN/{ "primaryColor": "#D97757", "fontSize": 16 }/EDITMODE-END/;
61	```
62	Label the panel exactly "Tweaks" so it matches the toolbar toggle. Expose the
63	dimensions the user actually cares about (color, copy, layout, features).
64
65	## Starter components (build these patterns when relevant)
66
67	\| Pattern \| Purpose \|
68	\|---\|---\|
69	\| `deck_stage` \| Slide-deck shell: viewport scaling, keyboard nav, slide-count overlay, speaker-notes, localStorage, print-to-PDF. Use for ANY slide presentation. \|
70	\| `design_canvas` \| Present 2+ static options side-by-side in a labeled grid. \|
71	\| `animations` \| Timeline engine: Stage + Sprite + scrubber + Easing + interpolate. \|
72	\| `ios_frame` / `android_frame` \| Phone mockups with status bar + keyboard. \|
73	\| `macos_window` / `browser_window` \| Desktop window / browser chrome. \|
74
75	Fixed-size content (decks, video) scales to the viewport with a letterboxed black
76	background; put controls outside the scaled element. Avoid `scrollIntoView`.
77
78	## Methodology
79
80	- Ask first for ambiguous briefs (~10 questions): starting point (UI kit / design
81	system / codebase / screenshots / Figma), how many variations, which dimensions
82	(visual, interaction, copy), novelty expectations. (One clarifying batch, not drip-fed.)
83	- Plan visually, expose 3+ variations: lead with a short design-assumptions comment,
84	show the user early, then iterate. Mix by-the-book with novel; vary color, layout,
85	typography, iconography, interaction; start basic → get more advanced.
86	- Iterate with Tweaks, not new files.
87
88	## Finishing — verifier pass
89
90	Mirror the `fork_verifier_agent` pattern with this repo's setup: after the build, confirm
91	no console crashes, then spawn an independent screenshot/layout check (the bundled
92	`grounding-verifier` agent or a Playwright/cloakbrowser screenshot pass) rather than
93	self-certifying. Don't proactively screensho

People who liked this also viewed

6 picks

Type

claude-design-patterns

16stars6forks

View on GitHub

How to install claude-design-patterns?

codeclawd/fable-mode/claude-design-patterns

$npx -y skills add codeclawd/fable-mode --skill claude-design-patterns

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Claude Design — portable engineering patterns
2
3	Companion to `frontend-design` (which covers aesthetic direction). This file is the
4	engineering layer: how Anthropic's Claude Design agent actually builds web artifacts.
5	Sourced from the leaked Claude Design system prompt (github.com/asgeirtj/system_prompts_leaks
6	`Anthropic/claude-design.md`); `/mnt`-path and proprietary-tool machinery stripped — only
7	the environment-agnostic rules are kept.
8
9	## React + Babel pinning (single-file artifacts)
10
11	Pin exact versions (never floating ranges like `react@18`) and add Subresource
12	Integrity — fetch current `sha384-…` hashes from srihash.org or the unpkg response,
13	don't hardcode stale ones:
14
15	```html
16	<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"
17	integrity="sha384-…" crossorigin="anonymous"></script>
18	<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"
19	integrity="sha384-…" crossorigin="anonymous"></script>
20	<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"
21	integrity="sha384-…" crossorigin="anonymous"></script>
22	```
23
24	## Style-object collision rule
25
26	Global-scoped style objects MUST have unique, specific names per component — a bare
27	`const styles = {...}` collides the moment two components share scope.
28
29	```js
30	const terminalStyles = { ... } // ✅ not `styles`
31	const inputStyles = { ... }
32	```
33	Or use inline styles to sidestep the problem entirely.
34
35	## Multi-file Babel — window-export pattern
36
37	Each `<script type="text/babel">` transpiles in an isolated scope. To share components
38	across scripts, export explicitly at the end of the defining file, then reference via `window.`:
39
40	```js
41	Object.assign(window, { Terminal, Line, Gray, Blue, Bold });
42	// elsewhere: <window.Terminal />
43	```
44
45	## Live-edit "Tweaks" protocol
46
47	Make ONE main file with in-design controls instead of many variant files. Handshake:
48
49	1. Register the listener before announcing availability:
50	```js
51	window.addEventListener('message', (e) => {
52	if (e.data.type === '__activate_edit_mode') { /* show Tweaks panel */ }
53	else if (e.data.type === '__deactivate_edit_mode') { /* hide it */ }
54	});
55	```
56	2. Then announce: `window.parent.postMessage({type: '__edit_mode_available'}, '*')`
57	3. On change, persist: `window.parent.postMessage({type: '__edit_mode_set_keys', edits: {fontSize: 18}}, '*')`
58	4. Wrap the defaults in JSON markers the host rewrites on disk:
59	```js
60	const TWEAK_DEFAULTS = /EDITMODE-BEGIN/{ "primaryColor": "#D97757", "fontSize": 16 }/EDITMODE-END/;
61	```
62	Label the panel exactly "Tweaks" so it matches the toolbar toggle. Expose the
63	dimensions the user actually cares about (color, copy, layout, features).
64
65	## Starter components (build these patterns when relevant)
66
67	\| Pattern \| Purpose \|
68	\|---\|---\|
69	\| `deck_stage` \| Slide-deck shell: viewport scaling, keyboard nav, slide-count overlay, speaker-notes, localStorage, print-to-PDF. Use for ANY slide presentation. \|
70	\| `design_canvas` \| Present 2+ static options side-by-side in a labeled grid. \|
71	\| `animations` \| Timeline engine: Stage + Sprite + scrubber + Easing + interpolate. \|
72	\| `ios_frame` / `android_frame` \| Phone mockups with status bar + keyboard. \|
73	\| `macos_window` / `browser_window` \| Desktop window / browser chrome. \|
74
75	Fixed-size content (decks, video) scales to the viewport with a letterboxed black
76	background; put controls outside the scaled element. Avoid `scrollIntoView`.
77
78	## Methodology
79
80	- Ask first for ambiguous briefs (~10 questions): starting point (UI kit / design
81	system / codebase / screenshots / Figma), how many variations, which dimensions
82	(visual, interaction, copy), novelty expectations. (One clarifying batch, not drip-fed.)
83	- Plan visually, expose 3+ variations: lead with a short design-assumptions comment,
84	show the user early, then iterate. Mix by-the-book with novel; vary color, layout,
85	typography, iconography, interaction; start basic → get more advanced.
86	- Iterate with Tweaks, not new files.
87
88	## Finishing — verifier pass
89
90	Mirror the `fork_verifier_agent` pattern with this repo's setup: after the build, confirm
91	no console crashes, then spawn an independent screenshot/layout check (the bundled
92	`grounding-verifier` agent or a Playwright/cloakbrowser screenshot pass) rather than
93	self-certifying. Don't proactively screensho

People who liked this also viewed

6 picks

Type