Create and update Pencil .pen mockups with layout and style checks.
npx skills add https://github.com/mujtaba3B/gstack-extensions --skill pencil-mockup
Please help me install this Agent Skill. Skill: pencil-mockup Source: https://github.com/mujtaba3B/gstack-extensions/tree/main/design/skills/pencil-mockup Command: npx skills add https://github.com/mujtaba3B/gstack-extensions --skill pencil-mockup
It removes the friction of creating and editing Pencil .pen mockups by turning design requests into disciplined canvas updates with built-in layout rules and style consistency.
Ask the skill to create or update the target Pencil mockup and follow the canvas conventions.
High-intent search queries and answers about installing and using this skill.
To create Pencil mockups without layout overlaps, the skill enforces overlap-safe layout checks and automatically reflows frames when they grow, ensuring convention-safe canvas updates.
You update existing frames and manage state variants on a Pencil canvas by using schema-first Pencil MCP operations that apply bundled wireframe conventions directly to your design.
Yes, you need a required style guide frame to build Pencil .pen mockups. The tool keeps every mockup aligned with this frame and updates it when visual decisions change.
The best way to keep style consistency across Pencil wireframes is to use style guide synchronization, which automatically aligns every mockup edit with the required style guide frame.
Yes, you can use Pencil MCP operations to add new screens to an existing mockup. The workflow applies plugin-based operations to ensure layout safety and note placement checks.
Your Pencil canvas reflows when you edit frames because the skill enforces layout checks that automatically trigger reflow when frames grow, preventing overlapping elements on the canvas.
phrazzldRender design DNA codes into Pencil .pen frames via the MCP backend.
zts212653Convert .pen design files into React/Tailwind components.
d3mingDesign frontend interfaces with visual thesis, interaction plans, and browser automation verification.
SignmanalGenerate single-file HTML demos with dynamic text layout using pretext and Canvas.
