You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// Card summary sentences — see "Canvas Sentences" below
56
+
canvasPresentation: {
57
+
defaultTitle: '{Default Operation}',
58
+
sentences: { byOperation: { /* one per operation dropdown option id */ } },
59
+
},
60
+
55
61
subBlocks: [
56
62
// Define all UI fields here
57
63
],
@@ -945,6 +951,35 @@ Derive templates from the service's real use cases. Each prompt should name a co
945
951
-**Ground every skill in operations the block actually exposes** — cross-check each skill's steps against `tools.access`. Never describe an action the integration cannot perform.
946
952
-**Derive skills from real, popular use cases found online — never invent them.** Web-search the service's documented use cases (vendor use-case/solutions pages, official docs describing the workflow, reputable "top automations for X" articles) and only add a skill you can source as something people genuinely do with the service. Do not hallucinate skills.
947
953
954
+
## Canvas Sentences
955
+
956
+
Every block declares a one-line prose summary that replaces its card's field rows:
957
+
958
+
```
959
+
Slack ← header (already names the block)
960
+
Posts ⟨Ship it 🚀⟩ to ⟨#eng⟩ ← the sentence; ⟨…⟩ are live value chips
961
+
```
962
+
963
+
Write one `byOperation` entry per operation dropdown option (or a single `default`
964
+
when the block has no operation dropdown).
965
+
966
+
**The full authoring contract — voice, structure, and the two mistakes that break
967
+
cards silently — is `apps/sim/blocks/AGENTS.md` → "Canvas sentences". Read it
968
+
before writing any.** The two failures worth repeating here, because both are
969
+
invisible at runtime:
970
+
971
+
1. A clause naming only one member of a `canonicalParamId` pair drops the sentence
972
+
for every advanced-mode user. List all members:
973
+
`field: ['channelSelector', 'manualChannel']`.
974
+
2. A clause referencing a subblock whose `condition` excludes that operation can
975
+
never render.
976
+
977
+
Validate before finishing:
978
+
979
+
```bash
980
+
bun run apps/sim/scripts/check-canvas-sentences.ts --block={service}
981
+
```
982
+
948
983
## Generated artifacts
949
984
950
985
Adding a block on its own needs no **tool metadata** regeneration — a block references existing
@@ -963,7 +998,6 @@ bun run integration-catalog:check
963
998
The catalog check independently derives deployment metadata from the executable block registry and
964
999
compares it with the committed `apps/sim/lib/integrations/integrations.json`. Review the generated
965
1000
diff and keep only intentional changes.
966
-
967
1001
## Checklist Before Finishing
968
1002
969
1003
-[ ]`integrationType` is set to the correct `IntegrationType` enum value
@@ -991,6 +1025,7 @@ diff and keep only intentional changes.
991
1025
-[ ] Exported `{Service}BlockMeta` with at least 7 templates
992
1026
-[ ]`url` set on `{Service}BlockMeta` to the external service's verified homepage (omit only for first-party blocks with no external service)
993
1027
-[ ]`skills` added to `{Service}BlockMeta`, each grounded in `tools.access` and sourced from a real online use case (not invented)
1028
+
-[ ]`canvasPresentation.sentences` covers every operation, and `bun run apps/sim/scripts/check-canvas-sentences.ts --block={service}` passes with 100% coverage
description: Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
description: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
// Card summary sentences — see "Canvas Sentences" below
55
+
canvasPresentation: {
56
+
defaultTitle: '{Default Operation}',
57
+
sentences: { byOperation: { /* one per operation dropdown option id */ } },
58
+
},
59
+
54
60
subBlocks: [
55
61
// Define all UI fields here
56
62
],
@@ -944,6 +950,35 @@ Derive templates from the service's real use cases. Each prompt should name a co
944
950
-**Ground every skill in operations the block actually exposes** — cross-check each skill's steps against `tools.access`. Never describe an action the integration cannot perform.
945
951
-**Derive skills from real, popular use cases found online — never invent them.** Web-search the service's documented use cases (vendor use-case/solutions pages, official docs describing the workflow, reputable "top automations for X" articles) and only add a skill you can source as something people genuinely do with the service. Do not hallucinate skills.
946
952
953
+
## Canvas Sentences
954
+
955
+
Every block declares a one-line prose summary that replaces its card's field rows:
956
+
957
+
```
958
+
Slack ← header (already names the block)
959
+
Posts ⟨Ship it 🚀⟩ to ⟨#eng⟩ ← the sentence; ⟨…⟩ are live value chips
960
+
```
961
+
962
+
Write one `byOperation` entry per operation dropdown option (or a single `default`
963
+
when the block has no operation dropdown).
964
+
965
+
**The full authoring contract — voice, structure, and the two mistakes that break
966
+
cards silently — is `apps/sim/blocks/AGENTS.md` → "Canvas sentences". Read it
967
+
before writing any.** The two failures worth repeating here, because both are
968
+
invisible at runtime:
969
+
970
+
1. A clause naming only one member of a `canonicalParamId` pair drops the sentence
971
+
for every advanced-mode user. List all members:
972
+
`field: ['channelSelector', 'manualChannel']`.
973
+
2. A clause referencing a subblock whose `condition` excludes that operation can
974
+
never render.
975
+
976
+
Validate before finishing:
977
+
978
+
```bash
979
+
bun run apps/sim/scripts/check-canvas-sentences.ts --block={service}
980
+
```
981
+
947
982
## Generated artifacts
948
983
949
984
Adding a block on its own needs no **tool metadata** regeneration — a block references existing
@@ -962,7 +997,6 @@ bun run integration-catalog:check
962
997
The catalog check independently derives deployment metadata from the executable block registry and
963
998
compares it with the committed `apps/sim/lib/integrations/integrations.json`. Review the generated
964
999
diff and keep only intentional changes.
965
-
966
1000
## Checklist Before Finishing
967
1001
968
1002
-[ ]`integrationType` is set to the correct `IntegrationType` enum value
@@ -990,6 +1024,7 @@ diff and keep only intentional changes.
990
1024
-[ ] Exported `{Service}BlockMeta` with at least 7 templates
991
1025
-[ ]`url` set on `{Service}BlockMeta` to the external service's verified homepage (omit only for first-party blocks with no external service)
992
1026
-[ ]`skills` added to `{Service}BlockMeta`, each grounded in `tools.access` and sourced from a real online use case (not invented)
1027
+
-[ ]`canvasPresentation.sentences` covers every operation, and `bun run apps/sim/scripts/check-canvas-sentences.ts --block={service}` passes with 100% coverage
Copy file name to clipboardExpand all lines: .claude/rules/emcn-components.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from
11
11
12
12
Never hand-roll the chip pill from raw class strings (they go stale). Compose from the canonical sources:
13
13
14
-
-**Surface, typography + content tokens:**`chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, and `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
14
+
-**Surface, typography + content tokens:**`chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells), and the row-state pair `chipHoverSurfaceClass` / `chipActiveSurfaceClass` (hover vs. selected — mutually exclusive, so a selected row holds its surface through hover; every hand-rolled row imports these rather than restating the literals). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
15
15
-**Pill geometry:**`chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipDropdown`, `ChipSelect`, `ChipSwitch`) reuses it for visual parity.
16
16
17
17
Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border-1` border.
// Card summary sentences — see "Canvas Sentences" below
50
+
canvasPresentation: {
51
+
defaultTitle: '{Default Operation}',
52
+
sentences: { byOperation: { /* one per operation dropdown option id */ } },
53
+
},
54
+
49
55
subBlocks: [
50
56
// Define all UI fields here
51
57
],
@@ -939,6 +945,35 @@ Derive templates from the service's real use cases. Each prompt should name a co
939
945
-**Ground every skill in operations the block actually exposes** — cross-check each skill's steps against `tools.access`. Never describe an action the integration cannot perform.
940
946
-**Derive skills from real, popular use cases found online — never invent them.** Web-search the service's documented use cases (vendor use-case/solutions pages, official docs describing the workflow, reputable "top automations for X" articles) and only add a skill you can source as something people genuinely do with the service. Do not hallucinate skills.
941
947
948
+
## Canvas Sentences
949
+
950
+
Every block declares a one-line prose summary that replaces its card's field rows:
951
+
952
+
```
953
+
Slack ← header (already names the block)
954
+
Posts ⟨Ship it 🚀⟩ to ⟨#eng⟩ ← the sentence; ⟨…⟩ are live value chips
955
+
```
956
+
957
+
Write one `byOperation` entry per operation dropdown option (or a single `default`
958
+
when the block has no operation dropdown).
959
+
960
+
**The full authoring contract — voice, structure, and the two mistakes that break
961
+
cards silently — is `apps/sim/blocks/AGENTS.md` → "Canvas sentences". Read it
962
+
before writing any.** The two failures worth repeating here, because both are
963
+
invisible at runtime:
964
+
965
+
1. A clause naming only one member of a `canonicalParamId` pair drops the sentence
966
+
for every advanced-mode user. List all members:
967
+
`field: ['channelSelector', 'manualChannel']`.
968
+
2. A clause referencing a subblock whose `condition` excludes that operation can
969
+
never render.
970
+
971
+
Validate before finishing:
972
+
973
+
```bash
974
+
bun run apps/sim/scripts/check-canvas-sentences.ts --block={service}
975
+
```
976
+
942
977
## Generated artifacts
943
978
944
979
Adding a block on its own needs no **tool metadata** regeneration — a block references existing
@@ -957,7 +992,6 @@ bun run integration-catalog:check
957
992
The catalog check independently derives deployment metadata from the executable block registry and
958
993
compares it with the committed `apps/sim/lib/integrations/integrations.json`. Review the generated
959
994
diff and keep only intentional changes.
960
-
961
995
## Checklist Before Finishing
962
996
963
997
-[ ]`integrationType` is set to the correct `IntegrationType` enum value
@@ -985,6 +1019,7 @@ diff and keep only intentional changes.
985
1019
-[ ] Exported `{Service}BlockMeta` with at least 7 templates
986
1020
-[ ]`url` set on `{Service}BlockMeta` to the external service's verified homepage (omit only for first-party blocks with no external service)
987
1021
-[ ]`skills` added to `{Service}BlockMeta`, each grounded in `tools.access` and sourced from a real online use case (not invented)
1022
+
-[ ]`canvasPresentation.sentences` covers every operation, and `bun run apps/sim/scripts/check-canvas-sentences.ts --block={service}` passes with 100% coverage
0 commit comments