feat: ✨ Agent-Optimized Engineering Workflows (PoC)

[mariohamann]

User Story

As a maintainer of the Solid Design System, I would like agent-optimized workflows for development, to improve quality of agentic engineering internally.

Suggested Solution

Establish the technical and process foundation: Figma MCP setup, Copilot subagents/skills per workflow task, and documented learnings as a blueprint for future projects.

This should be setup based on real tickets having the label "good for agent". Goal is to have PRs for many of these tickets and refining skills etc. on the way.

Acceptance Criteria (proposal)

• Developer Setup
  • Figma MCP server configured in .vscode/mcp.json if needed
  • Recommended extensions in .vscode/extensions.json if needed
  • Setup instructions in AGENTS.md if needed
• Potential Skills
  • tickets-reader: Read the description and all comments, ask questions before implementing, clarify uncertainties, clarify if things maybe should updated regarding Definition-of-ready etc.
  • docs-story-writer: Clear description how and when stories should be written (e. g. for every design changing attribute usually one story), how the copy and title should sound like, including examples Dos and Don'ts
  • components-writer: Clear description how we plan components (enforcing parts, providing flexibility with slots instead of nested props etc., methods, events), add path to example best practice component
  • styles-writer: Clear description how we build styles, which conepts to follow, how to write JSDocs like documentation that it appears in Storybook, add path to example best practice style
  • playwright-test-writer: Clear description how to write Playwright tests, what should be covered, what's a minimum test, how to handle a11y tests, how to run tests with single components etc.
  • visual-regression-test-writer: Clear description how we do VRT with Chromatic, how to do use the "Variant Multiplier", how to do the Combination Stories
  • changeset-writer: How changesets should be written, extracting what is in the Contribution guidelines etc.
  • pr-creator: Describe your changes according to the PR template, describe what you changed according the original plan
• Potential Agents
  • Component Specialist: use plop for new components, use components-writer, docs-story-writer, playwright-test-writer, visual-regression-test-writer, changeset-writer; use Red-Green-TDD for non-visual bugfixes, use Figma MCP to get Figma designs, link to specific components that are well-made, run A11y tests etc.
  • Styles Specialist: use plop for new styles, use styles-writer, docs-story-writer, visual-regression-test-writer, changeset-writer, use Figma MCP to get designs, link to specific styles that are well-made
  • Templates Specialist: use Figma MCP to get designs from Figma, use internal Solid MCP to build templates, understand how stories should be written (self-contained, own IDs per eleemnt because of shared window context)
• Documentation
  • PoC learnings written up as a shareable report
•  Potential MCP
  • Solid MCP for template usage

DoR

• Item has business value
• Item all subtasks have been estimated by the team
• Item is clear and well-defined
• Item dependencies have been identified

DoD

• All subtasks have been closed