Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .agents/skills/emil-design-eng/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: This skill encodes Emil Kowalski's philosophy on UI polish, compone

# Design Engineering

> **In this repo:** emcn owns component chrome (press states, tooltip/popover/menu animation, easing): apply these principles by proposing changes in `packages/emcn`, not per call site, and add no global CSS variables or keyframes (CLAUDE.md "Styling and EMCN"). Animation uses `import { motion } from 'framer-motion'`. Gate touch-unsafe hover with the `hover-hover:` Tailwind variant (plain `hover:` is intentionally ungated). `.claude/rules/sim-styling.md` and `.claude/rules/emcn-components.md` win on any conflict.
> **In this repo:** emcn owns component chrome (press states, tooltip/popover/menu animation, easing): apply these principles by proposing changes in `packages/emcn`, not per call site, and add no global CSS variables or keyframes (`.claude/rules/sim-styling.md`). Animation uses `import { motion } from 'framer-motion'`. Gate touch-unsafe hover with the `hover-hover:` Tailwind variant (plain `hover:` is intentionally ungated). `.claude/rules/sim-styling.md` and `.claude/rules/emcn-components.md` win on any conflict.

You are a design engineer with the craft sensibility. You build interfaces where every detail compounds into something that feels right. You understand that in a world where everyone's software is good enough, taste is the differentiator.

Expand Down
2 changes: 1 addition & 1 deletion .agents/skills/make-interfaces-feel-better/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Animate contextual icons with opacity, scale, and blur instead of toggling visib

### 8. Font Smoothing

Apply `-webkit-font-smoothing: antialiased` to the root layout on macOS for crisper text. In this repo, do not add root-level smoothing or other global styles (CLAUDE.md "Styling and EMCN"); raise it as a design-system proposal instead.
Apply `-webkit-font-smoothing: antialiased` to the root layout on macOS for crisper text. In this repo, do not add root-level smoothing or other global styles (`.claude/rules/sim-styling.md`); raise it as a design-system proposal instead.

### 9. Tabular Numbers

Expand Down
3 changes: 3 additions & 0 deletions .claude/rules/sim-styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ description: Tailwind CSS and styling conventions
paths:
- "apps/sim/**/*.tsx"
- "apps/sim/**/*.css"
- "packages/workflow-renderer/**/*.tsx"
---

# Styling Rules
Expand Down Expand Up @@ -89,6 +90,8 @@ Draw a line with a real `border-*` utility. Never hand-roll one as `shadow-[inse

## Chip Components (consumer usage)

The chip family is the canonical chrome: `ChipInput`, `ChipTextarea`, `ChipModal`/`ChipModalField`, `ChipSelect`/`ChipCombobox`/`ChipDropdown`, `ChipSwitch` (a segmented choice; a boolean toggle stays `Switch`), `ChipDatePicker`, `Chip`/`ChipLink`, `ChipTag`; `DropdownMenu` for context/action menus. Import components, `cn`, and tokens from the `@sim/emcn` barrel and icons from `@sim/emcn/icons`; never deep-import other component subpaths. Never update global styles; keep styling local to the component.

`ChipInput`, `ChipTextarea`, `ChipModal*` own their full chrome. Consumers describe intent through PROPS; they never re-style the chrome. The canonical chrome lives in `packages/emcn/src/components/chip/chrome.ts` (all tokens are re-exported from the `@sim/emcn` barrel — no subpath import needed) — never hand-roll `rounded-lg`/`border`/`bg-[var(--surface-5)]`/`h-[30px]`/`px-2`/`text-sm`/focus rings.

### Props over className
Expand Down
1 change: 1 addition & 0 deletions .claude/rules/sim-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ paths:
- "**/*.test.tsx"
- "**/*.integration.ts"
- "**/e2e/**"
- "apps/sim/scripts/test-*-e2e.ts"
---

# Testing
Expand Down
4 changes: 3 additions & 1 deletion .cursor/rules/sim-styling.mdc
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
description: "Tailwind CSS and styling conventions"
globs: ["apps/sim/**/*.tsx","apps/sim/**/*.css"]
globs: ["apps/sim/**/*.tsx","apps/sim/**/*.css","packages/workflow-renderer/**/*.tsx"]
---

<!-- Generated from .claude/rules/sim-styling.md by `bun run skills:sync`. Edit the source, not this file. -->
Expand Down Expand Up @@ -89,6 +89,8 @@ Draw a line with a real `border-*` utility. Never hand-roll one as `shadow-[inse

## Chip Components (consumer usage)

The chip family is the canonical chrome: `ChipInput`, `ChipTextarea`, `ChipModal`/`ChipModalField`, `ChipSelect`/`ChipCombobox`/`ChipDropdown`, `ChipSwitch` (a segmented choice; a boolean toggle stays `Switch`), `ChipDatePicker`, `Chip`/`ChipLink`, `ChipTag`; `DropdownMenu` for context/action menus. Import components, `cn`, and tokens from the `@sim/emcn` barrel and icons from `@sim/emcn/icons`; never deep-import other component subpaths. Never update global styles; keep styling local to the component.
Comment thread
waleedlatif1 marked this conversation as resolved.
Resolved

`ChipInput`, `ChipTextarea`, `ChipModal*` own their full chrome. Consumers describe intent through PROPS; they never re-style the chrome. The canonical chrome lives in `packages/emcn/src/components/chip/chrome.ts` (all tokens are re-exported from the `@sim/emcn` barrel — no subpath import needed) — never hand-roll `rounded-lg`/`border`/`bg-[var(--surface-5)]`/`h-[30px]`/`px-2`/`text-sm`/focus rings.

### Props over className
Expand Down
2 changes: 1 addition & 1 deletion .cursor/rules/sim-testing.mdc
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
description: "Test layers, naming, and Vitest mechanics for Sim"
globs: ["**/*.test.ts","**/*.test.tsx","**/*.integration.ts","**/e2e/**"]
globs: ["**/*.test.ts","**/*.test.tsx","**/*.integration.ts","**/e2e/**","apps/sim/scripts/test-*-e2e.ts"]
Comment thread
waleedlatif1 marked this conversation as resolved.
Resolved
---

<!-- Generated from .claude/rules/sim-testing.md by `bun run skills:sync`. Edit the source, not this file. -->
Expand Down
Loading
Loading