New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Loft Design Prototyping

by Yeachan-Heo in Yeachan-Heo/oh-my-claudecode

Settles stalled design questions by building a throwaway artifact: either a pure logic module in a clickable shell, or three structurally different UI variants.

MITAuto-check passedDevelopment

Install Loft Design Prototyping

skills CLI
$ npx skills add Yeachan-Heo/oh-my-claudecode --skill loft -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Yeachan-Heo/oh-my-claudecode loft --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/loft .claude/skills/loft && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
loft
GitHub stars
40k
Token cost
~1.4k tokens
SKILL.md length
806 words
Files
1
Skills in repo
47
Repo updated
First seen
Licence
MIT

At a glance

Settles stalled design questions by building a throwaway artifact: either a pure logic module in a clickable shell, or three structurally different UI variants.

  • Works in 3 steps: Isolate the decision-bearing core — the… → Wrap it in a single clickable HTML… → On confirmation the module is ready to…
  • A design question stays stuck after repeated discussion
  • SKILL.md covers When to loft, Choose the fork, The discipline and Fold the answer, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Borrowing a shipbuilding idea, the skill says to loft the shape before cutting steel: when two plausible answers cannot be settled by talk, build a cheap runnable artifact and let the person react to it. The agent builds and you only react, and that reaction becomes the decision. The artifact is an instrument for seeing and never a head start on the deliverable.

It chooses between two forks. The logic fork isolates a state machine, reducer, schema or algorithm as a pure module with no DOM, I/O or framework, wrapped in one clickable HTML shell with a button per scenario and full state shown after every click. The UI fork builds one route with three variants that differ in structure, such as information architecture, navigation and density, because reskins answer nothing. It skips lofting when repo evidence or a question can answer it, when the destination is unclear, when an ADR already settles it, or when the problem is really a bug.

When your agent uses it

  • A design question stays stuck after repeated discussion
  • Checking whether a state model holds at its edge cases
  • Choosing between structural layouts for a page
  • A spec discussion reaches the point of needing to see it

Example prompts

  • “Loft the lesson-gating flow: does it regress when someone retakes a lesson?”
  • “We cannot agree how the path page should look, so build three structural variants.”
  • “Prototype the cart reducer as a pure module with a clickable shell.”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Isolate the decision-bearing core — the state machine, reducer, schema, or algorithm — as a pure module: no DOM, no I/O, no framework…
  2. Wrap it in a single clickable HTML shell: one button per scenario, the tricky edge cases walked through in order, full state visible after…
  3. On confirmation the module is ready to lift — it re-enters as real work through launch. During the loft itself main stays untouched and…

What it can do on your machine

Read from SKILL.md and the folder at commit 454bae0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Loft Design Prototyping loads about 1.4k tokens when it runs. Until then it costs about 118 tokens; SKILL.md has 806 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~118
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Yeachan-Heo/oh-my-claudecode at commit 454bae0, republished under its MIT licence (© Yeachan-Heo). 806 words, ~1,370 tokens.

Download SKILL.mdSave it as .claude/skills/loft/SKILL.md (or your agent's skills folder).
name
loft
description
Loft the shape before cutting steel — answer a design question that prose cannot settle by building a throwaway artifact: a pure logic module in a clickable shell, or structurally different UI variants behind one route. The captain reacts to the artifact; the answer folds into the decision; the artifact never docks. Use when a design question stalls in words, when a navigator map carries a loft ticket, or when a spec discussion reaches "we would have to see it".
level
3

Loft

Cut no steel until the shape is fair. Shipwrights loft the hull's lines full-scale and fair them before a single plate is cut. Loft applies the same order to design questions: when words have run out — two plausible answers, neither falsifiable by talk — build a cheap runnable artifact, let the captain react to it, and fold that reaction into the decision.

The role contract. The crew builds the artifact; the captain's only job is to react — and that reaction is the decision. The artifact is an instrument for seeing, never a head start on the deliverable.

When to loft

  • a design question stalls in prose: repeatedly rephrased, still not settleable ("how should the path page look", "does this state model feel right")
  • a navigator map carries a loft ticket
  • a spec discussion reaches "we would have to see it first"

Do not loft when:

  • the question is answerable from repo evidence or by asking the captain (that is interviewing, not lofting)
  • the destination itself is unclear (that is fog — /oh-my-claudecode:ask-navigator)
  • the answer already lives in an ADR (do not re-loft settled decisions)
  • the "design question" is actually a bug (that is the debugger's jurisdiction)

Choose the fork

Pick by what the question is asking. A wrong fork wastes the whole artifact.

Logic fork — is the model right?

For questions about state, business rules, data shape, or algorithms ("does unlocking regress on a retake?", "does this reducer hold at the edges?"):

  1. Isolate the decision-bearing core — the state machine, reducer, schema, or algorithm — as a pure module: no DOM, no I/O, no framework. Written so that, once the shape is confirmed, it moves into the real codebase unchanged.
  2. Wrap it in a single clickable HTML shell: one button per scenario, the tricky edge cases walked through in order, full state visible after every click.
  3. On confirmation the module is ready to lift — it re-enters as real work through launch. During the loft itself main stays untouched and the shell stays behind on the branch.
UI fork — what should it look like?

For questions of shape and arrangement ("steps or cards?", "where does progress live?"):

  1. One route, three variants that differ in structure — information architecture, navigation model, density. Variants that differ only in styling answer nothing: three reskins are wallpaper.
  2. A switcher on the page cycles the variants; embed into the existing product where possible, so real data density stresses the design instead of three tidy fake rows.
  3. On confirmation, the decision transfers and the variants stay behind on the branch as the record of why it looks this way.
Show full SKILL.md (372 more words)Show less

The discipline

  • One command to run — the repo's simplest existing serve command; inline the module into the shell if file:// module CORS would bite. Loads in seconds; no build step beyond what the repo already has.
  • No persistence, no tests, no abstractions, no error handling beyond the happy path. The artifact should be something you would not want to ship — the rules exist to keep it that way.
  • Expect the first shape to be argued with: revise on the branch within the same session. The captain confirming the final shape is the decision; an artifact nobody argues with usually answered a question nobody had.
  • The artifact's whole life is minutes to build and one session to decide. If it starts growing into production code, stop: that work is a launch effort, not a loft. Sunk cost is the failure mode this skill exists to prevent.
  • One loft answers one question. Two questions are two lofts — or one question that was actually two.

Fold the answer

The artifact is evidence, not a landing. When the captain reacts:

  1. Record the decision where it lives — the issue comment, the spec's Implementation Decisions, or the pending-decision note — in the captain's own words plus one line of why. A fragment more precise than prose (the reducer, the state machine, the schema) may be inlined there, marked as lofted.
  2. Push the artifact to a loft/<name> branch. It never merges: it stays as the primary source a future reader can open when the decision's "why" matters.
  3. Nothing from the artifact lands in main — for the logic fork the confirmed module re-enters as real work through launch, for the UI fork the real page is built fresh from the decision.

Scope and non-goals

  • Loft produces answers, not deliverables: no runtime, no state files, nothing always-on.
  • It does not diagnose (debugger), does not chart fog (/oh-my-claudecode:ask-navigator), does not approve its own answer (the captain's reaction is the only acceptance).
  • It does not replace seam approval: a lofted UI shows the shape; the test seams for it are still approved at C2.

Completion definition

The captain reacted, the answer sits where the decision lives, the artifact sits on its branch — and no line of the artifact is in main.

© Yeachan-Heo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/loft of Yeachan-Heo/oh-my-claudecode.

Open the folder on GitHubat commit 454bae0

Compare with similar skills

Loft Design Prototyping next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Loft Design Prototyping compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Loft Design Prototyping this skillYeachan-Heo/oh-my-claudecode40k—~1.4kAutomated safety check: PassMIT
Reviewmag123c/toktrack195—~1.2kAutomated safety check: PassMIT
Product Design Workflow BundleXiaomiMiMo/MiMo-Code14k—~721Automated safety check: PassMIT
Compound Engineering PrototypeEveryInc/compound-engineering-plugin25k—~1.9kAutomated safety check: PassMIT
Fast Agent Designevalstate/fast-agent3.9k—~220Automated safety check: PassApache-2.0
Gen DocsMoonshotAI/kimi-code7.8k—~1.2kAutomated safety check: PassMIT

Similar skills

  • Review

    mag123c/toktrack

    Multi-agent code review for Rust CLI/TUI. An agent skill from mag123c/toktrack.

    195 GitHub stars~1.2k tokensUpdated 8 days ago
    DevelopmentAuto-check passed

  • Product Design Workflow Bundle

    XiaomiMiMo/MiMo-Code

    Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.

    14k GitHub stars~721 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Compound Engineering Prototype

    EveryInc/compound-engineering-plugin

    Builds a throwaway prototype at just the fidelity needed to settle a specific how-it-should-work-or-feel question, before committing to an approach other work will treat as fixed.

    25k GitHub stars~1.9k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Fast Agent Design

    evalstate/fast-agent

    A skill your agent uses to generate well-branded interfaces and assets for fast-agent, either for production or throwaway prototypes/mocks/etc.

    3.9k GitHub stars~220 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Gen Docs

    MoonshotAI/kimi-code

    Update Kimi Code CLI user documentation after meaningful code changes that affect product behavior or user experience.

    7.8k GitHub stars~1.2k tokensUpdated today
    DevelopmentAuto-check passed

  • S2 Docs

    adobe/spectrum-design-data

    Look up Spectrum 2 (S2) component documentation, design guidelines, and usage patterns when building with React Spectrum or Spectrum Web Components.

    155 GitHub stars~868 tokensUpdated today
    DevelopmentAuto-check passed

More from Yeachan-Heo/oh-my-claudecode

All 47 skills in this repo

  • Ask Advisor Routing

    Yeachan-Heo/oh-my-claudecode

    Sends a question or task to another locally installed agent CLI, such as Codex or Gemini, through omc ask and saves the answer as a file.

    40k GitHub stars~572 tokensUpdated yesterday
    Auto-check passed

  • Ask Navigator

    Yeachan-Heo/oh-my-claudecode

    Charts a foggy effort into a map of decision tickets on the repo's issue tracker and works through them one per session, producing decisions rather than deliverables.

    40k GitHub stars~4.1k tokensUpdated yesterday
    Auto-check passed

  • Self-Improve Evolutionary Loop

    Yeachan-Heo/oh-my-claudecode

    Runs an autonomous improvement loop on a repository: agents propose and execute plans, a tournament picks the winner by benchmark, and each round is recorded and plotted.

    40k GitHub stars~5.3k tokensUpdated yesterday
    Auto-check: warnings

  • Autopilot

    Yeachan-Heo/oh-my-claudecode

    Takes a short product idea through requirements, design, planning, parallel implementation, QA cycles and multi-reviewer validation to produce working code.

    40k GitHub stars~4.4k tokensUpdated yesterday
    Auto-check passed

  • OMC Mode Cancellation

    Yeachan-Heo/oh-my-claudecode

    Detects and gracefully cancels whichever OMC mode, autopilot, ralph, swarm, pipeline, or team, is currently active, then clears its state.

    40k GitHub stars~4.6k tokensUpdated yesterday
    Auto-check passed

  • Hierarchical AGENTS.md Generator

    Yeachan-Heo/oh-my-claudecode

    Maps a codebase directory by directory and writes linked AGENTS.md files, each pointing to its parent, to document what each area contains.

    40k GitHub stars~2.3k tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Loft Design Prototyping

What does Loft Design Prototyping do?

Settles stalled design questions by building a throwaway artifact: either a pure logic module in a clickable shell, or three structurally different UI variants. Borrowing a shipbuilding idea, the skill says to loft the shape before cutting steel: when two plausible answers cannot be settled by talk, build a cheap runnable artifact and let the person react to it. The agent builds and you only react, and that reaction becomes the decision.

When should I use Loft Design Prototyping?

Loft Design Prototyping fits situations like: A design question stays stuck after repeated discussion; checking whether a state model holds at its edge cases; choosing between structural layouts for a page; A spec discussion reaches the point of needing to see it.

How do I install Loft Design Prototyping in Claude Code?

Run `npx skills add Yeachan-Heo/oh-my-claudecode --skill loft -a claude-code`. Or copy the skill folder (skills/loft in Yeachan-Heo/oh-my-claudecode) into .claude/skills/loft in your project. Claude Code loads it when a task matches its description.

How do I install Loft Design Prototyping in Codex?

Run `npx skills add Yeachan-Heo/oh-my-claudecode --skill loft -a codex`. Or copy the skill folder (skills/loft in Yeachan-Heo/oh-my-claudecode) into .agents/skills/loft in your project. Codex loads it when a task matches its description.

Can I use Loft Design Prototyping in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Yeachan-Heo/oh-my-claudecode --skill loft -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/loft, .gemini/skills/loft, .github/skills/loft and .opencode/skills/loft in your project.

What does Loft Design Prototyping need to run?

SKILL.md names no scripts, command-line tools or credentials: Loft Design Prototyping is instructions for the agent only.

Does Loft Design Prototyping access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Loft Design Prototyping safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Loft Design Prototyping use?

Loft Design Prototyping is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Loft Design Prototyping use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Loft Design Prototyping?

Skills that share tags, products or a category with Loft Design Prototyping: Review (mag123c/toktrack, 195 stars), Product Design Workflow Bundle (XiaomiMiMo/MiMo-Code, 14k stars), Compound Engineering Prototype (EveryInc/compound-engineering-plugin, 25k stars) and Fast Agent Design (evalstate/fast-agent, 3.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Loft Design Prototyping?

Yeachan-Heo (a GitHub user) maintains it in Yeachan-Heo/oh-my-claudecode, which has 39,720 GitHub stars. The repository holds 47 skills in this directory. The repository was last updated on October 8, 2026.

Source: Yeachan-Heo/oh-my-claudecode on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.