prototype-skills

Pi skills for turning rendered web pages into editable Pencil prototypes and adding code-evidence-based workflow annotations.

Included skills

• html-to-pencil-prototype: converts a live page, saved HTML, DOM snapshot, screenshot, or browser-captured UI into an editable Pencil .pen prototype or Pencil MCP draft.
• annotate-prototype-flows: reads frontend/backend code and adds numbered business-flow annotations to an existing Pencil prototype.

Install

After this package is published to npm:

pi install npm:prototype-skills

If you publish under an npm scope, use the scoped package name:

pi install npm:@your-scope/prototype-skills

Publish to npm

Before publishing, verify the package contents:

npm pack --dry-run

Then publish:

npm publish --access public

For an unscoped package such as prototype-skills, --access public is optional. For a scoped public package, it is required.

Package structure

skills/
  html-to-pencil-prototype/
    SKILL.md
    agents/
    references/
    scripts/
  annotate-prototype-flows/
    SKILL.md
    agents/
    references/
package.json
README.md

The package.json declares:

{
  "pi": {
    "skills": ["./skills"]
  }
}

This lets Pi discover both skills from the package-level skills/ directory.