skills.rest
Servoy
ServoyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

spec-sync

Verifies synchronization between Servoy .spec JSON files and Angular component implementations.

2|Updated Jun 5, 2018
Search Tags:#typescript#validation#angular#spec#sync#web components#servoy
One-click install
npx skills add https://github.com/Servoy/custom-rendered-components --skill spec-sync-servoy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spec-sync
Source: https://github.com/Servoy/custom-rendered-components/tree/main/.opencode/skills/spec-sync
Command: npx skills add https://github.com/Servoy/custom-rendered-components --skill spec-sync-servoy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Servoy web components define their contract in .spec JSON files while the actual behavior lives in Angular TypeScript components, and these two layers can silently drift apart during development. This Skill detects mismatches in model properties, handlers, and API methods before they cause runtime failures. ## Core Features & Use Cases - Two-Layer Comparison: Parses .spec JSON files and Angular component TypeScript files to compare model properties, handlers, and API method signatures. - Structured Mismatch Reports: Produces per-component tables categorizing issues as missing in Angular, missing in spec, handler mismatch, API mismatch, or type mismatch. - Optional Auto-Fix Mode: Adds missing inputs, handlers, or API stubs to Angular components, or missing entries to .spec files, then verifies with npm run build and npx ng lint. - Use Case: After adding a new property to the customlist Angular component, ask the Skill to check sync and it reports that the .spec file is missing the corresponding model property, then offers to fix it. ## Quick Start Ask the AI to check whether the customlist component's spec file and Angular implementation are in sync.

Frequently Asked Questions about spec-sync

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if Servoy spec files match Angular components?▼

Provide a component name like customlist or the word all, and the Skill parses the .spec JSON and the Angular .component.ts file, then compares model properties, handlers, and API methods. It reports mismatches in a categorized table per component.

What mismatches does spec sync detection report?▼

It reports five categories: model properties missing in Angular, inputs missing in the spec, handler signature mismatches, API method mismatches, and incompatible types between the two layers. Framework-managed properties like size, location, and visible are excluded.

Can the Skill automatically fix spec and Angular mismatches?▼

Yes, after reporting it offers auto-fix modes. It can add missing signal-based inputs, handler inputs, and API stubs to the Angular component, or add missing properties to the .spec file, then verifies with npm run build and npx ng lint.

Why are some Angular properties not flagged as spec mismatches?▼

Internal implementation signals like _selectedIndex and realContainedForm are intentionally ignored. Properties with pushToServer and a matching Change output, or private-scoped tags with a signal plus output pattern, are treated as valid two-way binding patterns.

Which file is the source of truth for Servoy component contracts?▼

The .spec JSON file is the source of truth for the Servoy contract, and the Angular implementation must satisfy it. The Skill compares model keys, handlers, and API entries from the spec against inputs and methods in the TypeScript component.

Related Skills

Explore More Software Engineering Skills→
joshua3403joshua3403

phase-5-design-system

Create a platform-agnostic design system with token definitions and component scaffolding.

Community
Advanced
VledicFrancoVledicFranco

pre-publish-qa

Run pre-publish QA checks for npm packages with builds, tests, and health gates.

Community
Advanced
rudometkinrudometkin
1

test

Validate implemented features against specification and Definition of Done.

Community
Intermediate
ExpensifyExpensify
5.0k

coding-standards

Enforces React Native coding standards for performance, consistency, and clean component architecture.

Official
Advanced