Skip to content

feat(desktop): add design reference to html skill#376

Merged
Sun-sunshine06 merged 1 commit into
mainfrom
feat/design-reference-to-html-skill
Jun 6, 2026
Merged

feat(desktop): add design reference to html skill#376
Sun-sunshine06 merged 1 commit into
mainfrom
feat/design-reference-to-html-skill

Conversation

@Sun-sunshine06

Copy link
Copy Markdown
Collaborator

Summary

  • add the built-in design-reference-to-html method skill for recreating screenshots/mockups as App.jsx, HTML, or CSS
  • adapt the workflow to Open CoDesign primitives: workspace files, DESIGN.md, preview(), and optional gen_image()
  • avoid vendoring external skill directories, reference docs, or browser scripts; this is an Open CoDesign-native rewrite suitable for bundled resources
  • cover the new bundled skill in the core skill loader test

Testing

  • pnpm lint
  • pnpm --filter @open-codesign/core test -- src/skills/loader.test.ts src/resource-manifest.test.ts src/tools/skill.test.ts
  • pnpm --filter @open-codesign/core test -- src/skills/loader.test.ts
  • pnpm --filter @open-codesign/ui test
  • pre-push typecheck + lint passed; full pre-push test hit a transient Vitest worker startup timeout in @open-codesign/ui, then @open-codesign/ui passed standalone

@github-actions github-actions Bot added docs Documentation area:desktop apps/desktop (Electron shell, renderer) area:core packages/core (generation orchestration) labels Jun 6, 2026

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review mode: initial

Findings

  • [Minor] The skill file references craft-polish in its dependencies list, but the craft-polish skill was not found in the public skills directory under apps/desktop/resources/templates/skills/. The loader test does not check for it, and the existing skill set (from the test) does not include craft-polish. This may cause confusion if the agent or loader attempts to resolve the dependency at runtime. Either add the missing craft-polish skill, remove the dependency, or document that skill dependencies are advisory only.
    Suggested fix: Add craft-polish as a companion skill, or change dependencies to an empty list if it isn't required.

  • [Nit] The CSS example in the skill uses var(--reference-ratio) and var(--page-bg) without defining or referencing where those CSS custom properties come from. Consider adding a brief note that the agent should define these variables in the workspace stylesheet or DESIGN.md.

Summary

This PR adds a new built-in design-reference-to-html skill for recreating UI screenshots/mockups as HTML or App.jsx. The skill is well-structured, follows the project's architectural conventions (workspace files, preview(), gen_image(), etc.), and avoids vendoring external resources. A changeset is included, and the existing skill loader test is updated to verify the new skill is loaded. No security, license, or data-loss concerns. The craft-polish dependency is a minor gap that should be addressed before or shortly after merging.

Testing

  • Added one assertion to verify the skill is loaded by loadSkillsFromDir() (line 72 of loader.test.ts). This is sufficient for a new skill file.
  • Not checked: a test that the skill content parses correctly and that validationHints / dependencies are handled properly by the loader.

Open-CoDesign Bot

@Sun-sunshine06 Sun-sunshine06 force-pushed the feat/design-reference-to-html-skill branch from 2b82eb9 to 619a413 Compare June 6, 2026 11:31

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review mode: follow-up after new commits

Findings

  • [Major] The test in packages/core/src/skills/loader.test.ts now asserts that craft-polish is loaded (line 72), but this PR did not add a craft-polish.md skill file to apps/desktop/resources/templates/skills/. The test will fail because the skill is not present in the builtin directory. Either add the missing craft-polish.md skill or remove the assertion from the test. The previous minor finding is not resolved and is now escalated.
    Suggested fix: Create a craft-polish.md skill with the expected frontmatter, or remove expect(ids).toContain('craft-polish'); from the test if the dependency is only advisory.

  • [Minor] The dependencies field in the skill frontmatter still includes craft-polish. If the dependency is not actually required or not yet implemented, remove it or add a comment that dependencies are advisory only. The test change does not fix the missing skill.
    Suggested fix: Remove craft-polish from the dependencies list in the skill frontmatter if it is not a real dependency, or add the skill file.

Resolved from previous review

  • The CSS custom properties note (--page-bg, --reference-ratio) is addressed: the skill body now says "Define --page-bg and --reference-ratio in the artifact stylesheet".

Summary
The PR adds a well-structured design-reference-to-html skill with a changeset and test coverage. However, the test now expects a craft-polish skill that does not exist in this PR's file set, causing a test failure. This must be fixed before merging. No security, license, or data-loss concerns.

Testing

  • The loader test now includes a passing assertion for design-reference-to-html but a failing assertion for craft-polish. The test will not pass as-is.
  • No additional skill content tests were added.

Open-CoDesign Bot

Signed-off-by: Sun-sunshine06 <Sun-sunshine06@users.noreply.github.com>
@Sun-sunshine06 Sun-sunshine06 force-pushed the feat/design-reference-to-html-skill branch from 619a413 to cc9b1fe Compare June 6, 2026 11:32

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review mode: follow-up after new commits

Findings

No new issues found. All prior findings have been resolved.

  • [Major (resolved)] The previous test assertion for craft-polish that would have caused a test failure has been removed from the diff. The current test only adds the correct design-reference-to-html assertion.
  • [Minor (resolved)] The skill dependencies field now correctly lists only [responsive-layout]. The craft-polish dependency has been removed.

Summary

This PR adds a well-structured design-reference-to-html method skill, a corresponding changeset (@open-codesign/desktop minor), and a minimal test update. The skill is self-contained, uses only permissive text content, and follows the project's skill conventions (frontmatter, aliases, validation hints). No security, license, data-loss, or performance concerns. The PR is ready to merge.

Residual observations

  • None.

Testing

  • The existing loader test now asserts that design-reference-to-html is loaded among builtin skills.
  • No additional skill-specific tests were added (e.g., testing that the skill is parseable and validates). This is acceptable given the existing test coverage for skill loading and the small scope of this change.

Open-CoDesign Bot

@Sun-sunshine06 Sun-sunshine06 merged commit b94d715 into main Jun 6, 2026
7 checks passed
@Sun-sunshine06 Sun-sunshine06 deleted the feat/design-reference-to-html-skill branch June 6, 2026 11:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:core packages/core (generation orchestration) area:desktop apps/desktop (Electron shell, renderer) docs Documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant