/input — direct in-browser editing for AI work

input

Get human feedback on AI-generated web work. Use when the user wants reviewers (or themselves) to edit copy directly in the browser and apply those edits back to source.

JDerekLomas/getinput·0installs0stars

SKILL.md

Full skill instructions

/input — direct in-browser editing for AI work

This skill installs and operates the getinput widget — a floating Edit/Comment overlay that lets anyone fix copy on a live page. The edits land in input.json, and /input apply rewrites the source files to match.

/input page setup

Install the widget into the project at the current working directory.

If it's a Next.js (App Router) project, run:

npx -y getinput-page

This copies components/InputWidget.tsx, adds an app/api/input route, mounts <InputWidget /> in the root layout, creates input.json, and gitignores it. Then tell the user to run their dev server.

For other projects (plain HTML, Vite, Astro, etc.), add the script tag to the page:

<script src="https://getinput.io/widget.js"></script>

Edits save to localStorage by default; the user clicks the count badge → Copy JSON to export.

/input check

Show the current pending feedback.

cat input.json

Parse and summarize:

Text edits: "original" → "edited" with the selector
Comments: comment text with the element it points at

/input apply

For each text-edit entry in input.json:

Search the source tree (app/, src/, components/, pages/, public/*.html) for the exact original string
Replace with edited
Report each file changed

Skip entries where the original text appears more than once — surface those to the user for manual disambiguation.

After applying, ask whether to clear the feedback file (/input clear).

/input clear

echo '[]' > input.json

/input share

Print the share URL: take the current dev/preview URL and append ?getinput. Tell the user that anyone who opens that link will see the widget, can leave edits, and clicks Copy feedback to paste the JSON back. No server needed on their side.

Notes for Claude

When pasted feedback JSON arrives via chat, write it to input.json then run the apply step.
If a project has neither app/ nor a static HTML file, ask whether the user wants the npm install (Next.js) or the script-tag install (everything else).
The widget only shows on localhost/127.0.0.1 by default, or when ?getinput is in the URL. Production safety.

Source

npm: https://www.npmjs.com/package/getinput-page
GitHub: https://github.com/JDerekLomas/getinput
Web: https://getinput.io

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/JDerekLomas/getinput --skill input

View on GitHub

skill.md

Wellbeing Psychometrics & Measurement
Design and interpret validated psychometric instruments for measuring wellbeing outcomes. Use when creating measurement frameworks, selecting assessment tools, designing surveys, or analyzing wellbeing data. Covers reliable scales with strong psychometric properties for research and evaluation.
0 installs
Design Methods for Wellbeing (TU Delft & Tongji)
Apply systematic design methodologies from leading institutions for wellbeing-centered design. Use when structuring design processes, facilitating stakeholder engagement, creating emotional resonance, integrating values, or evaluating design decisions. Combines TU Delft's rigorous human-centered ...
0 installs
Agent Reasoning & Decision-Making
Design effective reasoning processes for AI agents and optimize decision-making strategies. Use when designing agent prompts, improving decision quality, implementing specialized reasoning modes, creating reasoning traces, or debugging agent mistakes. Covers prompting, chain-of-thought, reasoning...
0 installs
Agent Human-AI Collaboration
Design effective collaboration between humans and AI agents where strengths combine and weaknesses complement. Use when building agent systems that require human judgment, creating effective handoff processes, designing agent transparency, building trust through explainability, or optimizing huma...
0 installs

More skills from JDerekLomas

JDerekLomas/codevibing

Wellbeing Design with Desmet's 13 Needs

Design interfaces and products that foster human wellbeing using Pieter Desmet's 13 fundamental human needs framework. Use when evaluating design decisions, creating user experiences, or ensuring products support psychological and emotional flourishing. Covers autonomy, competence, relatedness, h...

0 0

View

JDerekLomas/codevibing

Agent Design Architecture

Design effective AI agent systems with clear architecture, capability planning, and tool integration. Use when building agent systems, designing agent workflows, planning tool ecosystems, defining agent roles and boundaries, or architecting multi-agent systems. Covers agent patterns, agentic loop...

0 0

View

JDerekLomas/codevibing

Agent Reliability & Safety

Design reliable, safe, and trustworthy agent systems that fail gracefully and operate within bounds. Use when building guardrails, handling edge cases, preventing harmful outputs, monitoring for failures, implementing safety constraints, or designing error recovery. Covers failure modes, constrai...

0 0

View

JDerekLomas/codevibing

Qualitative Research-Through-Design

Apply research-through-design (RtD) methodology to investigate wellbeing in design contexts. Use when conducting user research, creating prototypes for understanding user needs, iteratively validating design decisions, or documenting lived experiences. Combines qualitative inquiry with iterative ...

0 0

View