skills.rest
likec4
likec4OFFICIAL
Explore all skills by this author →
WebsiteGitHub

add-new-element-shape

Implements new element shapes across the LikeC4 codebase through a phased agentic workflow.

5.6k|377|Updated Mar 24, 2023
Search Tags:#svg#diagram#LikeC4#architecture modeling#langium#Code generation#element shape
One-click install
npx skills add https://github.com/likec4/likec4 --skill add-new-element-shape
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-new-element-shape
Source: https://github.com/likec4/likec4/tree/main/.agents/skills/add-new-element-shape
Command: npx skills add https://github.com/likec4/likec4 --skill add-new-element-shape

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Adding a new element shape to LikeC4 requires touching many scattered files — core types, Langium grammar, TextMate syntax files, SVG rendering, icon mapping, four export generators, and tests — and missing any one of them breaks the build. This Skill guides an agent through the entire process with checkpoints and self-healing verification.

Core Features & Use Cases

  • Interactive Sketch Phase: Hijacks an existing shape's render case to prototype the new SVG visually and iterate with user approval before any wiring.
  • Automated Wiring: Registers the shape in ElementShapes types, Langium grammar, three tmLanguage files (via helper script), IconRenderer, and DrawIO/PlantUML/Mermaid/D2 generators.
  • Self-Healing Verification: Runs pnpm generate, typecheck, test, and build, using nonexhaustive() type errors to locate and fix missing switch cases.
  • Use Case: A user drops a reference image of a hexagon shape and asks to add it; the agent sketches the SVG, gets approval, wires it across the codebase, and delivers a changeset with all checks passing.

Quick Start

Add a new hexagon element shape to LikeC4 based on this reference image and walk me through the sketch before wiring it up.

Frequently Asked Questions about add-new-element-shape

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

FAQPage Schema
How do I add a new element shape to LikeC4?▼

Adding a shape requires updating the ElementShapes array in styled-system types, the Langium grammar, three tmLanguage files, ElementShape.tsx rendering, IconRenderer mapping, and four export generators. This Skill walks through each file with checkpoints and runs pnpm generate, typecheck, test, and build to verify.

How to create a custom SVG shape for LikeC4 diagrams?▼

Start by sketching the SVG inside an existing shape's case block in ElementShape.tsx to preview it in a running app. After visual approval, move it to its own case and register it across types, grammar, and generators.

What naming rules apply to LikeC4 element shapes?▼

Shape names must be a single lowercase word with no hyphens or underscores, such as hexagon, cloud, or diamond. The name is added to the ElementShapes array, which is the single source of truth for the ElementShape type and PandaCSS conditions.

Why does pnpm typecheck fail after adding a new shape?▼

Typecheck failures come from nonexhaustive() calls in @likec4/core that enforce exhaustive switch coverage. Each error points to a file with a switch statement missing the new shape case; add the case and re-run typecheck until clean.

Which export formats support custom LikeC4 shapes?▼

The generators cover DrawIO, PlantUML, Mermaid, and D2. Each generator has a shape switch where you add a case for the new shape; if the target format has no native equivalent, the shape falls through to rectangle.

Related Skills

Explore More Software Engineering Skills→
ReadyStateChangeReadyStateChange

framing-problems

Capture stakeholder intent, constraints, and context into a validated frame artifact.

Official
Advanced
agentpatternsagentpatterns
5

diagram

Generate architecture diagrams from system models using LikeC4 and Mermaid.

Official
Advanced
wcyganwcygan
193

ghostty-config

Configure Ghostty terminal themes, fonts, keybindings, and performance settings.

Community
Intermediate
encounterplusencounterplus
16

pixijs-scene-graphics

Construct and style vector shapes for PixiJS scene graphs.

Official
Advanced