Improve AI integration#3423
Draft
jpzwarte wants to merge 33 commits into
Draft
Conversation
|
Contributor
🕸 Preview deploys |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a documented multi-agent “/implement-design” pipeline and supporting repo tooling for deeper Figma/Code Connect integration, plus introduces an examples/ workspace and Storybook support for examples content. It also includes a broad formatting cleanup across multiple changelogs.
Changes:
- Add
/implement-designpipeline docs + Claude agent/skill definitions under.claude/. - Add a
scripts/connect-figma-componentsworkspace with Figma Code Connect templates and a publish script. - Add an
examples/workspace with atsdownbuild config, and extend Storybook to include example stories (incl. a Vite transform for CSSStyleSheet imports).
Reviewed changes
Copilot reviewed 82 out of 91 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| vision.md | Describes the intended /implement-design pipeline vision and stages |
| scripts/package.json | Adds script to publish Figma Code Connect mappings via workspace |
| scripts/connect-figma-components/package.json | Adds private workspace for Code Connect mappings |
| scripts/connect-figma-components/figma.config.json | Configures Code Connect include globs and HTML parsing |
| scripts/connect-figma-components/tsconfig.json | TypeScript config for Code Connect template files |
| scripts/connect-figma-components/src/components.figma.batch.json | Batch publish configuration mapping Figma URLs to template files |
| scripts/connect-figma-components/src/accordion.figma.ts | Code Connect template for <sl-accordion> |
| scripts/connect-figma-components/src/accordion-items.figma.batch.ts | Batch template for <sl-accordion-item> |
| scripts/connect-figma-components/src/avatar.figma.ts | Code Connect template for <sl-avatar> |
| scripts/connect-figma-components/src/badge.figma.ts | Code Connect template for <sl-badge> |
| scripts/connect-figma-components/src/breadcrumb.figma.ts | Code Connect template for breadcrumb link |
| scripts/connect-figma-components/src/breadcrumbs.figma.ts | Code Connect template for <sl-breadcrumbs> |
| scripts/connect-figma-components/src/button.figma.batch.ts | Batch template for <sl-button> |
| scripts/connect-figma-components/src/button-bar.figma.batch.ts | Batch template for <sl-button-bar> |
| scripts/connect-figma-components/src/callout.figma.ts | Code Connect template for <sl-callout> |
| scripts/connect-figma-components/src/card.figma.ts | Code Connect template for <sl-card> |
| scripts/connect-figma-components/src/checkbox.figma.ts | Code Connect template for <sl-checkbox> |
| scripts/connect-figma-components/src/checkbox-group.figma.ts | Code Connect template for <sl-checkbox-group> |
| scripts/connect-figma-components/src/color-mask.figma.batch.ts | Batch metadata template for color-mask variants |
| scripts/connect-figma-components/src/date-field.figma.ts | Code Connect template for <sl-date-field> |
| scripts/connect-figma-components/src/dialog.figma.ts | Code Connect template for <sl-dialog> |
| scripts/connect-figma-components/src/grid.figma.ts | Code Connect template for <sl-grid> |
| scripts/connect-figma-components/src/icon.figma.ts | Code Connect template for <sl-icon> |
| scripts/connect-figma-components/src/menu-item.figma.ts | Code Connect template for <sl-menu-item> |
| scripts/connect-figma-components/src/number-field.figma.ts | Code Connect template for <sl-number-field> |
| scripts/connect-figma-components/src/panel.figma.batch.ts | Batch template for <sl-panel> |
| scripts/connect-figma-components/src/popover.figma.ts | Code Connect template for <sl-popover> |
| scripts/connect-figma-components/src/radio.figma.ts | Code Connect template for <sl-radio> |
| scripts/connect-figma-components/src/radio-group.figma.ts | Code Connect template for <sl-radio-group> |
| scripts/connect-figma-components/src/search-field.figma.batch.ts | Batch template for <sl-search-field> |
| scripts/connect-figma-components/src/select.figma.ts | Code Connect template for <sl-select> |
| scripts/connect-figma-components/src/switch.figma.ts | Code Connect template for <sl-switch> |
| scripts/connect-figma-components/src/tab.figma.batch.ts | Batch template for <sl-tab> |
| scripts/connect-figma-components/src/tab-group.figma.batch.ts | Batch template for <sl-tab-group> |
| scripts/connect-figma-components/src/text-area.figma.ts | Code Connect template for <sl-text-area> |
| scripts/connect-figma-components/src/text-field.figma.ts | Code Connect template for <sl-text-field> |
| scripts/connect-figma-components/src/time-field.figma.ts | Code Connect template for <sl-time-field> |
| scripts/connect-figma-components/src/toggle-button.figma.batch.ts | Batch template for <sl-toggle-button> |
| scripts/connect-figma-components/src/toggle-group.figma.batch.ts | Batch template for <sl-toggle-group> |
| package.json | Registers new workspaces (examples, scripts/connect-figma-components) |
| examples/package.json | Adds @sl-design-system/examples workspace with tsdown build |
| examples/README.md | Documents the examples workspace |
| examples/tsdown.config.mjs | Adds a tsdown plugin for CSS imports with { type: 'css' } |
| .storybook/main.ts | Adds example story glob + Vite transform plugin for CSSStyleSheet imports |
| .storybook/stories/links.stories.ts | Formats link markup for readability |
| .claude/settings.json | Adds MCP tool allowlist for Figma MCP servers |
| .claude/skills/implement-design/SKILL.md | Defines /implement-design coordinator workflow |
| .claude/skills/implement-design/design-manifest.schema.md | Defines the analyst→decomposer manifest contract |
| .claude/skills/implement-design/component-conventions.md | Captures SLDS implementation conventions for agents |
| .claude/skills/implement-design-lit/SKILL.md | Lit-specific checklist for the pipeline |
| .claude/skills/implement-design-angular/SKILL.md | Angular-specific checklist for the pipeline |
| .claude/agents/design-analyst.md | Agent definition for Figma ingestion + manifest creation |
| .claude/agents/component-decomposer.md | Agent definition for decomposition/APIs |
| .claude/agents/component-implementer.md | Agent definition for per-component implementation |
| .claude/agents/visual-validator.md | Agent definition for Playwright-based visual validation |
| .claude/agents/component-author.md | Agent definition for tests/stories/docs/changeset authoring |
| .claude/agents/component-reviewer.md | Agent definition for holistic review/punch list |
| .claude/implement-design/test-cc-1/manifest.md | Sample run manifest artifact committed into the repo |
| packages/components/panel/src/panel.ts | Docstring quoting tweak for @default |
| packages/themes/tig/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/teas/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/sanoma-learning/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/neon/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/myvanin_onhold/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/my-digital-book/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/max/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/magister/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/kampus/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/itslearning/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/editorial-suite/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/clickedu/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/bingel-int/CHANGELOG.md | Changelog formatting cleanup |
| packages/themes/bingel-dc/CHANGELOG.md | Changelog formatting cleanup |
| packages/components/text-field/CHANGELOG.md | Changelog formatting cleanup |
| packages/components/shared/CHANGELOG.md | Changelog formatting cleanup |
| packages/components/paginator/CHANGELOG.md | Changelog formatting cleanup |
| packages/components/menu/CHANGELOG.md | Changelog formatting cleanup |
| packages/components/listbox/CHANGELOG.md | Changelog formatting cleanup |
| packages/components/grid/CHANGELOG.md | Changelog formatting cleanup |
| packages/components/form/CHANGELOG.md | Changelog formatting cleanup |
| packages/components/combobox/CHANGELOG.md | Changelog formatting cleanup |
| packages/components/button/CHANGELOG.md | Changelog formatting cleanup |
Comment on lines
+22
to
+24
| - **Tab panels are separate, lazy-loaded components**: when the design has a tab group (`<sl-tab-group>` / `<sl-tab>`), the _contents_ of each tab panel become their own component (one per tab), not inline children of the page. This keeps each panel independently loadable so the consumer can lazy-load a tab's component only when the user switches to it. Name them after the tab (e.g. a "Settings" tab → `<sl-...-settings-panel>`). **Because the content is lazy-loaded, the root uses `<sl-tab-group>` with only `<sl-tab>` (the tab strip) — never `<sl-tab-panel>`** — and renders the _active_ tab's content component below the strip, on demand (the root tracks the active tab and would dynamically import that tab's module on activation). Note the lazy-load intent in the component's rationale. | ||
| - **One form for the page**: if the design has multiple form controls across panels plus action buttons (Save / Cancel / Submit), they belong to a **single `<sl-form>`** owned by the root — the buttons act on all controls at once. Note this in the root's API (the form-level events it emits: save/cancel) and remember each control needs a `name`. (Controls register with the form across shadow boundaries, so the form-bearing children can still be separate components.) | ||
| - **Data ownership — smart root, presentational children**: decide which component owns the data. By default the **root/page component owns it** — it is responsible for obtaining the data (fetching from an endpoint / data-source) and **passing the appropriate subset down to each child as input properties**. Children are **presentational**: they receive data via properties and render it; they do not fetch their own data. Reflect this in the APIs — the root states the data it owns and where it comes from; each child states the data-input properties it receives from its parent. (Genuinely app-global feature lists that aren't part of the fetched record can stay with the component that renders them — call that out when you make that choice.) Slots remain for arbitrary consumer content, not for the design's own data. |
Comment on lines
+24
to
+34
|
|
||
| const resolvedPath = new URL(cssPath, `file://${id}`).pathname; | ||
|
|
||
| try { | ||
| const cssContent = readFileSync(resolvedPath, 'utf-8'); | ||
|
|
||
| return ` | ||
| const ${varName} = new CSSStyleSheet(); | ||
| ${varName}.replaceSync(${JSON.stringify(cssContent)}); | ||
| `; | ||
| } catch (error: unknown) { |
| "noEmit": true, | ||
| "types": ["@figma/code-connect/figma-types"] | ||
| }, | ||
| "include": ["**/*.figma.ts"] |
Comment on lines
+8
to
+10
| - **i18n:** ON (source locale `en`; design language English) | ||
| - **Screenshot:** `.claude/implement-design/test-cc-1/screenshot.png` (real PNG, 674 × 1024) | ||
| - **Stage reached:** 2 approved → proceeding to Stage 3 (Approve & generate) |
| "noEmit": true, | ||
| "types": ["@figma/code-connect/figma-types"] | ||
| }, | ||
| "include": ["**/*.figma.ts"] |
| } | ||
|
|
||
| return figma.code` | ||
| <a href="javascript:void(0)">${title}</a> |
| --- | ||
| name: visual-validator | ||
| description: Renders a freshly-implemented SLDS component in Storybook, screenshots it at each breakpoint with Playwright MCP, and structurally diffs it against the original Figma screenshot. Stage 4 of /implement-design. Emits actionable, token-specific discrepancy notes; does not edit code. | ||
| tools: mcp__playwright__browser_navigate, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_resize, mcp__playwright__browser_snapshot, mcp__playwright__browser_evaluate, mcp__playwright__browser_wait_for, mcp__claude_ai_Figma__get_screenshot, Read, Bash, Glob |
| --- | ||
| name: component-author | ||
| description: Writes the Vitest tests, Storybook stories, and website documentation for one implemented SLDS component, plus a changeset. Stage 5 of /implement-design. Reads the finished component source as the source of truth; does not change the component implementation. | ||
| tools: Read, Write, Edit, Bash, Glob, Grep, mcp__claude_ai_Figma__get_screenshot |
Comment on lines
+1
to
+14
| { | ||
| "permissions": { | ||
| "allow": [ | ||
| "mcp__figma__get_metadata", | ||
| "mcp__figma__get_code_connect_map", | ||
| "mcp__figma__get_design_context", | ||
| "mcp__figma__get_screenshot", | ||
| "mcp__figma-desktop__get_metadata", | ||
| "mcp__figma-desktop__get_code_connect_map", | ||
| "mcp__figma-desktop__get_design_context", | ||
| "mcp__figma-desktop__get_screenshot" | ||
| ] | ||
| } | ||
| } |
Comment on lines
+11
to
+13
| }, | ||
| "include": ["**/*.figma.ts"] | ||
| } |
Comment on lines
+39
to
+43
| └── src/ | ||
| ├── <name>.ts # the LitElement class | ||
| ├── <name>.css # styles (imported with { type: 'css' } — no build step) | ||
| ├── <name>.spec.ts # Vitest browser tests | ||
| └── <name>.stories.ts # Storybook stories (authored during implementation, see below) |
| const cssPlugin: Plugin = { | ||
| name: 'css-stylesheet', | ||
| transform(code: string, id: string) { | ||
| if (!id.startsWith('/') || !id.includes('/examples/')) return null; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.