smyw skill
Before coding the agent draws in HTML what changes in the UI and API: colored frames, before and after, edits on the diagram
- 178 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill reads project code and writes specs and HTML into the `.smyw/` directory
- The build runs a local Node script with no network access
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/smywDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill reads project code and writes specs and HTML into the `.smyw/` directory
- The build runs a local Node script with no network access
This is third-party code. Review the repository files before installing.
What it does
smyw (show me you want) is a skill for coding agents that shows what exactly will change before implementation. The agent reads the code, writes a structured spec and builds from it a single HTML file with a change prototype: wireframes of every screen with modules whose names match code components, on a zoomable canvas. Changed places are numbered and framed: yellow means modified, green added and red removed. Clicking a number opens the before and after states, the list of fields, interaction steps and related functions and API endpoints. Popups and dropdowns are drawn as separate panels linked by a line to the button that triggers them, and a Demo button plays screens like a Figma prototype. There are process swimlanes and a before and after comparison of backend modules. The user can drag components, turn an inline card into a popup, change text and component type, write notes and style preferences, then copy structured feedback and paste it into the chat. The agent applies it with the `apply-feedback.mjs` script, rebuilds the layout and starts writing code only after the "Confirm plan" button. The build needs Node 18 or newer, has no dependencies or server and the file opens offline.
Who it is for. Developers and product teams who work with a coding agent on features that change screens and APIs and want to agree on changes before code is written.
Good fit when
- A new feature adds a screen and changes an API and you want to see changes on a diagram, without reading a long diff
- You need to agree how a popup works and which button triggers it before implementation
- A team wants to discuss a prototype with notes and edits right on the diagram
- After implementation it helps to show the client what changed in a visual form
Not a fit when
- You need a finished visual design: the lines show modules and flow while styling follows the project rules
- You need to work without Node.js: building the HTML requires Node 18 or newer
- The edit would be faster directly in code: a prototype is excessive for tiny changes
Example request
Show a prototype first: add tags to the task card, draw what changes in the list, form and API, and I will edit it on the diagramLimitations
The wireframes convey only module composition, placement and triggering, and they are not visual designs: the final look is set by project rules. Diagram accuracy depends on how well the agent read the code, so check component and API names.
The skill does not replace team agreement and writes no code before plan approval. Tests in the repository check the build and scenarios, but spec quality on real projects depends on the agent model. Node.js 18 or newer is needed to build.
How to disable. Delete the `smyw` link or folder from `~/.claude/skills` or `~/.agents/skills`. Generated specs and layouts live in the project `.smyw/` directory and can be deleted by hand.
FAQ
How do I install smyw?
Clone the repository and link `skills/smyw` to `~/.claude/skills/smyw` with `ln -s`. For the shared skills directory use `~/.agents/skills/smyw`.
Do I need a server?
No, the prototype is one HTML file that opens in a browser offline. Building needs only Node 18 or newer.
What do the frame colors mean?
A yellow frame marks a modification, green a new module and red a removal. The number next to it opens the before and after state.
How do I give edits back to the agent?
On the Feedback page press Copy feedback and paste the text into the chat. The agent applies it with `apply-feedback.mjs` and builds a new version.
Where can I see examples?
`skills/smyw/examples/` has two ready files: a support workspace screen with AI suggestions and a multi-page task tags example.
Discussion
No questions or reviews yet.
Related
SkillsFigma To Code MCP: from Figma layout to code
Figma To Code MCP
Figma to code over MCP: the server gives the agent a layout as compact YAML with CSS property names, resolved variables and SVG exported to disk
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
An agentic design team: it builds tokens and components in Figma and code, then designs screens on them or on an existing library.
A skill for Figma design systems: read-only audits with WCAG checks, component building and token export to code.
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
A skill that builds Framer components with Three.js, WebGL and GSAP: 3D, shaders and scroll animation in a single TSX file.
README in short
The skill describes a path from a request to a spec and an interactive HTML prototype that the user edits and returns to the agent. The author gives the workflow, examples and build commands, and the repository has tests and page screenshot scripts.
README badge
Original SKILL.md
--- name: smyw description: smyw（show me you want）。在做会改动页面、交互流程或前后端接口的功能时，生成一个单文件 HTML「变更预览」：按真实界面画出每一整屏的线框（模块名和代码组件对得上），放在可拖动缩放的画布上，最外层改动的模块按编号画框（黄=修改，绿=新增，红=删除）；点编号查看这一处的改动前后、相关交互步骤和函数/接口。另有流程泳道和后端模块的前后对比。用户可以直接在 HTML 里拖动组件、把内联卡片改成按钮触发的弹窗/下拉菜单、改文字和组件类型、写批注和整体风格意见，然后复制结构化反馈粘贴回对话。纯前端单文件，不需要服务端。默认用于写代码之前的原型阶段，也可用于实现后回顾。 whenToUse: 用户提出新功能、改版或重构，且会新增/删除/修改页面、改变交互流程、或改动前后端接口时；用户说「出个原型」「先给我看看要改什么」「画个前后对比」「展示这次的变化」时；实现完成后需要向用户展示改了什么时。 --- # smyw（show me you want）：变更预览 + 原型反馈 一次功能变化 → 一份 JSON spec → 一个可交互的 HTML。用户在 HTML 上看懂"改哪里、加什么、怎么触发"，直接动手改方案或写批注，再把反馈交回给你。 本 skill 目录（下文称 `$SKILL`）里有： - `scripts/build.mjs`：校验 spec，生成单文件 `preview.html`（纯前端、无外部依赖、离线可开） - `scripts/apply-feedback.mjs`：从用户粘贴回来的反馈里取出修改后的方案，生成下一版 spec - `references/spec-format.md`：spec 完整字段说明，**第一次写 spec 前先读一遍** - `examples/task-tags/spec.json`：完整示例（新增页、删除页、内联卡片、表格列变化、流程、后端） 构建只需要 Node ≥ 18；生成的 HTML 是纯前端的，**不需要也不要启动任何服务**。**不要手写 HTML**：永远写 spec 再 build。 ## 什么时候用 - **默认**：功能会动到页面、交互或接口时，在写代码**之前**先出原型（`stage: "prototype"`），给用户看，等反馈或确认后再实现。 - 很小的改动（改一处文案、加一个字段）先问用户要不要预览；用户说"直接做"就跳过。 - 实现之后：把同一份 spec 改成 `stage: "done"`，按**实际实现**修正，并在 note 里标出和原型的偏差，重新 build 给用户回顾。 ## 工作流 ### 1. 摸清现状：按真实界面画，不按功能点画 读路由、布局、页面组件、接口、模型代码，先弄清**用户实际看到的一整屏长什么样**： - **一个 page = 用户看到的一整屏**，而不是一个组件或一个功能点。比如「左侧侧栏 + 右侧主面板」是同一屏，要画在同一个 page 里（`root.layout: "row"`，侧栏 `w: "1/4"`），不要拆成「侧栏」「详情」两个 page。不同路由或不同模式下的界面才算不同的 page。 - **模块要和代码对得上**：每个区域（侧栏、头部、主面板、列表、对话框……）用它在界面上的名字做 `label`，用 `component` 写代码里的组件或文件（如 `"<TicketQueue> TicketQueue.vue"`）。 - **没改的模块也要画出来**，写 label 和 component，**不展开 children** 就行（预览里会显示「内容不变，未展开」）。不要用「xxx（不变）」这种 placeholder 代替真实模块，build 会警告。 - 顺序、左右、上下要和真实界面一致，这样用户一眼能认出是哪里。 ### 2. 写 spec 在目标项目根目录下： ~~~ .smyw/<YYYYMMDD>-<短名>/spec.json ~~~ （产物都在这个目录：`preview.html`、每轮的 `feedback-v<N>.md`、旧版 `spec-v<N>.json`。第一次创建 `.smyw/` 时问用户是否加进 `.gitignore`。） **省 token 的写法**： - 第一版写完整 spec，用 JSON、缩进 2（不要用 YAML：缩进和引号容易出错，`on` 这类键在一些解析器里会变成布尔值）。 - 之后每一版**用编辑工具只改变动的地方**（改字段、插入/删除节点），不要整份重写，也不要为了改几处把整份 spec 重新读一遍。