component-generate

Generates a component capsule with declaration, five-path implementation, block forms, labels, and tests.

9|Updated Mar 4, 2026
One-click install
npx skills add https://github.com/timcsy/semorphe --skill component-generate-timcsy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component-generate
Source: https://github.com/timcsy/semorphe/tree/main/knowledge/skills/component-generate
Command: npx skills add https://github.com/timcsy/semorphe --skill component-generate-timcsy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a new programming-language component to the Semorphe block editor requires coordinating many files—declaration, lift/generate/execute paths, Blockly block forms, i18n labels, and tests—and mistakes like a wrong owner stamp or missing expression counterpart silently hide blocks from the toolbox. This Skill turns a concept discovery report into a complete, contract-compliant component capsule. ## Core Features & Use Cases - Capsule scaffolding: Creates src/components/<scope>/<name>/ with component.json, lift/generate/execute implementations, forms/blocks.json, i18n labels, and spec.test.ts. - Contract enforcement guidance: Encodes hard-won rules for owner stamps, skipPaths vs null paths, enum declarations, dynamicRules, expressionCounterpart, and color consistency across language families. - Guardrail-driven verification: Directs validation through audit test suites (locality, completeness, block-def parity) instead of unreliable grep checks, plus mandatory in-browser visual inspection of blocks. - Use Case: After running /component-discover for a Python list_comprehension concept, invoke this Skill to produce the full capsule, register it in the curriculum topic list, and verify all five paths pass. ## Quick Start Run /component-generate with the path to a concept discovery report (or a language and component name like "python list_comprehension") to scaffold and validate the new component capsule.

Frequently Asked Questions about component-generate

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

FAQPage Schema
How do I add a new block component to the Semorphe editor?

Create a capsule folder under src/components/<scope>/<name>/ containing component.json, lift and generate implementations, forms/blocks.json, i18n labels, and spec.test.ts. The registry discovers capsules via import.meta.glob scanning, so no manual registration file edits are needed.

Why does my new block not appear in the Blockly toolbox?

The most common cause is a wrong owner stamp in component.json—blocks for a language must be stamped with that language (e.g. (python)), not (core), or the toolbox category query returns empty. Also verify the language's toolbox-categories.ts defines a category sourcing that owner.

What is the difference between skipPaths and null paths in component.json?

A null path with a _why comment tells the contract verifier the file intentionally does not exist, while skipPaths with skipReasons tells the interpreter not to complain about a missing executor. They are orthogonal—skipReasons uses a closed vocabulary: declarative, consumed-by-parent, or degradation-target.

When should lift be implemented as lift-pattern.json versus lift-strategy.ts?

Use lift-pattern.json when AST pattern matching alone suffices with no custom code. Use lift-strategy.ts when discrimination requires real logic, and declare it in both component.json paths and the pattern's liftStrategy field, or loading throws an orphan-implementation error.

Why does an expression render as a gray block after lifting?

The statement form is missing the expressionCounterpart declaration in its renderMapping, so the renderer cannot select the expression form at render time. Add "expressionCounterpart" pointing to the expression block type in forms/blocks.json.