Skip to content

refactor(skills): one definition of the skill fields across every surface#5916

Merged
waleedlatif1 merged 2 commits into
stagingfrom
skills-shared-fields
Jul 24, 2026
Merged

refactor(skills): one definition of the skill fields across every surface#5916
waleedlatif1 merged 2 commits into
stagingfrom
skills-shared-fields

Conversation

@waleedlatif1

Copy link
Copy Markdown
Collaborator

Summary

The skill Name / Description / Content trio was implemented three times — in the canvas SkillModal, and again in each of the /skills/new and /skills/[skillId] pages. They had already drifted:

modal create page detail page
Name hint in the hint slot below the field missing
required markers yes no no
Content min-height 200 260 260

This extracts SkillFields — the DetailSection form both full-page surfaces render — and moves the shared strings into skill-copy.ts.

The modal keeps ChipModalField, because .claude/rules/sim-styling.md requires every labeled field inside a ChipModalBody to be one, so it genuinely cannot share the pages' JSX. It now reads the same placeholder / hint / max-length constants instead, so the wording can no longer diverge.

Also folded in:

  • the detail page's local FieldLockTooltip moves into SkillFields, so both pages get the "why is this locked" tooltip
  • the dynamic rich-editor import drops from three copies to two

−219 / +72.

Behavior

No intended change other than resolving the drift: the name hint now shows on the detail page, matching create. Everything else renders as before — the canvas modal is untouched apart from sourcing its copy from constants.

Type of Change

  • Refactor

Testing

tsc, biome, and the six repo gates (react-query, client-boundary, api-validation, utils, boundaries, migrations) all pass; 1,195 tests in app/workspace pass.

Not visually verified — worth a glance at the three surfaces to confirm the fields render identically.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

…face

The Name / Description / Content trio was implemented three times — once in the
canvas modal and once each in the create and detail pages — and had already
drifted: the name hint appeared on create, was missing entirely on detail, and
sat in a different slot in the modal; the content editor was 260px on the pages
and 200px in the modal; only the modal marked the fields required.

Extract SkillFields, the DetailSection form both full-page surfaces render, and
move the shared copy into skill-copy.ts. The modal keeps ChipModalField — that
is required inside a ChipModalBody, so it cannot share the pages' JSX — but now
reads the same placeholder, hint, and max-length constants, so the wording can
no longer diverge.

The detail page's local FieldLockTooltip moves into SkillFields and is now
available to both pages, and the dynamic rich-editor import drops from three
copies to two.

No behavioral change beyond the drift being resolved: the name hint now shows on
the detail page as it already did on create.
@vercel

vercel Bot commented Jul 24, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Jul 24, 2026 3:10am

Request Review

@cursor

cursor Bot commented Jul 24, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
UI refactor and copy centralization in workspace skills; no API or auth changes, with only minor UX alignment on the detail page.

Overview
Pulls the full-page Name / Description / Content form out of create and detail into shared SkillFields, with placeholders, hints, and max length centralized in skill-copy.ts. The canvas SkillModal still uses ChipModalField but now reads those same constants instead of hard-coded strings.

skill-detail and skill-create drop duplicated markdown editor imports and inline field JSX; detail also picks up the name hint and consistent description error styling via the shared component. FieldLockTooltip lives in SkillFields so read-only detail matches create behavior.

In SkillModal, save pending state comes from createSkill.isPending || updateSkill.isPending instead of a local saving flag.

Reviewed by Cursor Bugbot for commit 210c288. Configure here.

@greptile-apps

greptile-apps Bot commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

Refactors skill editing fields into shared definitions.

  • Extracts the full-page Name, Description, and Content controls into SkillFields.
  • Centralizes skill placeholders, hints, and description length limits.
  • Reuses the shared fields across create and detail pages while preserving modal-specific markup.
  • Moves read-only field tooltips into the shared component and derives modal saving state from mutations.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failures remain.

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/skills/components/skill-fields/skill-fields.tsx Introduces the shared full-page skill field component, including validation messages, read-only tooltips, and rich-editor integration.
apps/sim/app/workspace/[workspaceId]/skills/[skillId]/skill-detail.tsx Replaces duplicated detail-page field markup with the shared SkillFields component.
apps/sim/app/workspace/[workspaceId]/skills/new/skill-create.tsx Replaces duplicated creation-page field markup with the shared SkillFields component.
apps/sim/app/workspace/[workspaceId]/skills/components/skill-modal/skill-modal.tsx Sources field copy from shared constants and derives saving state from create and update mutations.
apps/sim/app/workspace/[workspaceId]/skills/components/skill-copy.ts Centralizes copy and length constraints shared by skill editing surfaces.

Reviews (2): Last reviewed commit: "refactor(skills): derive modal saving st..." | Re-trigger Greptile

…ge line

From the cleanup passes over this branch:

- SkillModal mirrored `mutation.isPending` into a local `saving` useState, which
  .claude/rules/sim-hooks.md forbids. It also carried a latent bug: the
  `finally { setSaving(false) }` ran after `onSave()` had closed the modal, so it
  set state on an unmounting component, and a throw from `onSave()` would leave
  the modal stuck in a saving state. Derived from the two mutations instead.
- The hint/error line under a field was written three times in SkillFields, in
  three slightly different shapes. One FieldMessage helper now renders all three.
- The name hint is an authoring instruction, so it no longer shows under a field
  that cannot be edited (a built-in skill, or a viewer who is not an editor).
@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@cursor review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 210c288. Configure here.

@waleedlatif1
waleedlatif1 merged commit bee4562 into staging Jul 24, 2026
15 checks passed
@waleedlatif1
waleedlatif1 deleted the skills-shared-fields branch July 24, 2026 03:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant