One comprehensive skill with deep expertise, plus 17 commands that form the language of design.
One comprehensive skill with deep expertise, plus 19 commands that form the language of design.
diff --git a/public/js/components/framework-viz.js b/public/js/components/framework-viz.js
index bac0e0bda..a20455872 100644
--- a/public/js/components/framework-viz.js
+++ b/public/js/components/framework-viz.js
@@ -42,7 +42,9 @@ const commandSymbols = {
delight: 'De',
bolder: 'Bo',
quieter: 'Qu',
- onboard: 'On'
+ onboard: 'On',
+ typeset: 'Ty',
+ arrange: 'Ar'
};
// Atomic numbers (just for visual interest)
@@ -63,7 +65,9 @@ const commandNumbers = {
delight: 13,
bolder: 14,
quieter: 15,
- onboard: 16
+ onboard: 16,
+ typeset: 17,
+ arrange: 18
};
export class PeriodicTable {
diff --git a/public/js/data.js b/public/js/data.js
index 15f3f6cab..2e0c49cde 100644
--- a/public/js/data.js
+++ b/public/js/data.js
@@ -53,7 +53,9 @@ export const commandProcessSteps = {
'delight': ['Identify', 'Design', 'Implement'],
'extract': ['Identify', 'Abstract', 'Document'],
'adapt': ['Analyze', 'Adjust', 'Optimize'],
- 'onboard': ['Map', 'Design', 'Guide']
+ 'onboard': ['Map', 'Design', 'Guide'],
+ 'typeset': ['Assess', 'Select', 'Scale', 'Refine'],
+ 'arrange': ['Assess', 'Grid', 'Rhythm', 'Balance']
};
export const commandCategories = {
@@ -73,7 +75,9 @@ export const commandCategories = {
'delight': 'enhancement',
'extract': 'system',
'adapt': 'adaptation',
- 'onboard': 'enhancement'
+ 'onboard': 'enhancement',
+ 'typeset': 'enhancement',
+ 'arrange': 'enhancement'
};
// Skill relationships - now consolidated into frontend-design skill
@@ -88,7 +92,7 @@ export const skillRelationships = {
export const commandRelationships = {
'teach-impeccable': { flow: 'Setup: One-time project context gathering' },
'audit': { leadsTo: ['normalize', 'harden', 'optimize', 'adapt', 'clarify'], flow: 'Diagnostic: Technical quality audit' },
- 'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter'], flow: 'Diagnostic: UX and design review' },
+ 'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter', 'typeset', 'arrange'], flow: 'Diagnostic: UX and design review' },
'normalize': { combinesWith: ['clarify', 'adapt'], flow: 'Quality: Align with design system' },
'polish': { flow: 'Quality: Final pass before shipping' },
'optimize': { flow: 'Quality: Performance improvements' },
@@ -102,6 +106,8 @@ export const commandRelationships = {
'delight': { combinesWith: ['bolder', 'animate'], flow: 'Enhancement: Add personality' },
'extract': { flow: 'System: Create design system elements' },
'adapt': { combinesWith: ['normalize', 'clarify'], flow: 'Adaptation: Different devices/contexts' },
- 'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Enhancement: Onboarding & empty states' }
+ 'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Enhancement: Onboarding & empty states' },
+ 'typeset': { combinesWith: ['bolder', 'normalize'], flow: 'Enhancement: Fix typography' },
+ 'arrange': { combinesWith: ['distill', 'adapt'], flow: 'Enhancement: Fix layout & spacing' }
};
diff --git a/public/js/demos/commands/arrange.js b/public/js/demos/commands/arrange.js
new file mode 100644
index 000000000..e9299c6a8
--- /dev/null
+++ b/public/js/demos/commands/arrange.js
@@ -0,0 +1,50 @@
+// Arrange command demo - shows monotonous equal spacing becoming rhythmic and intentional
+export default {
+ id: 'arrange',
+ caption: 'Equal spacing everywhere → Intentional rhythm and hierarchy',
+
+ before: `
+
+
+
+
+
+
Alice Chen
+
Designer
+
+
+
+
Bob Park
+
Engineer
+
+
+
+ `,
+
+ after: `
+
+
+
+
+
AC
+
+
Alice Chen
+
Designer
+
+
+
+
+
+ `
+};
diff --git a/public/js/demos/commands/index.js b/public/js/demos/commands/index.js
index 95c30f12a..f57744725 100644
--- a/public/js/demos/commands/index.js
+++ b/public/js/demos/commands/index.js
@@ -16,6 +16,8 @@ import delight from "./delight.js";
import extract from "./extract.js";
import adapt from "./adapt.js";
import onboard from "./onboard.js";
+import typeset from "./typeset.js";
+import arrange from "./arrange.js";
export const commandDemos = {
normalize,
@@ -34,6 +36,8 @@ export const commandDemos = {
extract,
adapt,
onboard,
+ typeset,
+ arrange,
};
export function getCommandDemo(commandId) {
diff --git a/public/js/demos/commands/typeset.js b/public/js/demos/commands/typeset.js
new file mode 100644
index 000000000..2f226e054
--- /dev/null
+++ b/public/js/demos/commands/typeset.js
@@ -0,0 +1,23 @@
+// Typeset command demo - shows generic typography becoming intentional and hierarchical
+export default {
+ id: 'typeset',
+ caption: 'Generic system fonts → Intentional type hierarchy',
+
+ before: `
+
+
Project Update
+
Q1 Design Sprint
+
The team completed the redesign of the dashboard. All components have been reviewed and approved by stakeholders.
+
Updated 2 hours ago
+
+ `,
+
+ after: `
+
+
Project Update
+
Q1 Design Sprint
+
The team completed the redesign of the dashboard. All components reviewed and approved.
+
Updated 2 hours ago
+
+ `
+};