Agent skill

Ln 13 Interaction Design Builder

by levnikolaevich in levnikolaevich/claude-code-skills

Designs user flows, interaction states and mockups for a defined product scope; does not implement UI code.

MITAuto-check passedFrontend & Design

Install Ln 13 Interaction Design Builder

skills CLI
$ npx skills add levnikolaevich/claude-code-skills --skill ln-13-interaction-design-builder -a claude-code

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

GitHub CLI
$ gh skill install levnikolaevich/claude-code-skills ln-13-interaction-design-builder --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/levnikolaevich/claude-code-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/product-discovery-suite/skills/ln-13-interaction-design-builder .claude/skills/ln-13-interaction-design-builder && 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
ln-13-interaction-design-builder
GitHub stars
574
Token cost
~1.8k tokens
SKILL.md length
905 words
Files
1
Skills in repo
31
Repo updated
First seen
Licence
MIT

At a glance

Designs user flows, interaction states and mockups for a defined product scope; does not implement UI code.

  • Works in 4 steps: Frame the Experience → Design Flows and States → Make the Design Implementable → …
  • Tasks that involve UX design
  • SKILL.md covers Tool Routing, Domain Rules, Checklist and Verdict, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Ln 13 Interaction Design Builder is an agent skill from levnikolaevich/claude-code-skills. Designs user flows, interaction states and mockups for a defined product scope; does not implement UI code.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UX design. The repository describes itself as: Help your AI agent finish the job: solve the right problem, keep changes focused, and show what was verified. For Claude Code and Codex. The licence is MIT.

When your agent uses it

  • Tasks that involve UX design

Example prompts

  • “Use the ln-13-interaction-design-builder skill to design user flows, interaction states and mockups for a defined product scope; does not implement…”
  • “/ln-13-interaction-design-builder”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Frame the Experience
  2. Design Flows and States
  3. Make the Design Implementable
  4. Validate the Journey

What it can do on your machine

Read from SKILL.md and the folder at commit 0ce8796. 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

Ln 13 Interaction Design Builder loads about 1.8k tokens when it runs. Until then it costs about 35 tokens; SKILL.md has 905 words of instructions outside code blocks.

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

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 levnikolaevich/claude-code-skills at commit 0ce8796, republished under its MIT licence (© levnikolaevich). 905 words, ~1,828 tokens.

Download SKILL.mdSave it as .claude/skills/ln-13-interaction-design-builder/SKILL.md (or your agent's skills folder).
name
ln-13-interaction-design-builder
description
Designs user flows, interaction states and mockups for a defined product scope; does not implement UI code.

Interaction Design Builder

Goal: Create or update authorized interaction-design artifacts that make a product journey usable and implementable while preserving protected experience. Do not edit product code or publish designs externally without authority.

Execution contract: The checklist defines completion. Track each item internally as PENDING, PROVEN with evidence, CLEARED with evidence its condition is absent, or UNPROVEN with a gap; reading, delegation, tool failure, a zero exit status, or a self-reported success is not proof; only the observed outcome is. Reconcile after each section. Before returning, resolve all PENDING, count only PROVEN and CLEARED, and apply verdict and approval rules to every gap. Preserve intent, scope, and existing authorization. Continue authorized work; ask only for consequential unresolved choices or required external approval. When no one can answer during the run, state the exact question and apply the skill's verdict for the remaining gap instead of waiting or guessing. Scale depth to material risk without skipping checks. Preserve dependency and safety order; otherwise choose an appropriate verification method. Accept equivalent user or repository evidence; no other skill, named artifact, or complete lifecycle is required. Preserve source requirement and decision IDs. Bind reused evidence to relevant source versions, dirty changes, configuration, and environment; invalidate only affected claims. On continuation, reconcile task, authorization, current state, and unresolved evidence. For long work, return a compact continuation record or update an already authorized artifact; read-only skills do not persist it. Distinguish artifact readiness, verified behavior, and external-action authority. Prepare authorized work before required approval. If blocked by an instruction, cite its exact source and unresolved boundary; do not invent approval gates from caution.

Tool Routing

NeedPreferred capabilityFallback
Requirements and experienceAccepted product intent, existing UI and design conventionsUser-supplied scenarios; essential missing intent is BLOCKED
Interaction evidenceBrowser, screenshots, accessibility inspection and existing design filesTextual state/flow specification with explicit visual limits
Design artifactsAvailable design editor or local document/diagram capabilityAuthorized Markdown or HTML mockup; no required design service

Domain Rules

  • Reuse the established design source and system. Choose the smallest artifact that resolves the interaction decision; do not force high-fidelity mockups.
  • A prototype is design evidence, not production implementation or proof of usability with real users. Label simulated data and untested assumptions.
  • Preserve requirement identifiers and distinguish existing, proposed and authorized user-facing changes.

Checklist

1. Frame the Experience
  • Identify actors, journeys, tasks, devices, locales, accessibility needs and approved artifact destinations.
  • Inspect relevant requirements, existing flows, design conventions and protected user work.
  • Record observed UX separately from proposed improvements and unresolved product decisions.
  • Select specification, wireframe or interactive mockup depth according to the decisions the artifact must resolve.
2. Design Flows and States
  • Describe entry, navigation, progress, completion and exit paths for each in-scope journey.
  • Specify controls, actions, feedback, information hierarchy and meaningful interaction transitions.
  • Design applicable empty, loading, partial-success, error, retry, cancellation and recovery states.
  • Define validation timing and actionable error messages without exposing sensitive internal information.
  • Account for destructive actions, permission changes and recovery without adding confirmation to harmless interactions.
  • Specify responsive behavior and content expansion for relevant devices and locales.
3. Make the Design Implementable
  • Define keyboard navigation, focus transitions, accessible names, announcements and non-color cues where applicable.
  • Reuse established components and tokens; explain any new pattern through a concrete unmet user need.
  • Map requirements to interaction states, copy and observable acceptance; mark missing business rules instead of inventing them.
  • Create the authorized artifact and label simulated behavior, assumptions and unresolved alternatives.
Show full SKILL.md (332 more words)Show less
4. Validate the Journey
  • Walk every critical path and meaningful recovery route through the actual artifact; inspect rendered mockups when produced.
  • Check consistency of navigation, state transitions, copy, focus and requirement coverage at the selected fidelity.
  • Separate artifact inspection from usability research; record which claims need real user evidence.
  • Preserve unrelated design content and report implementation constraints and decision-changing gaps.

Verdict

  • READY: critical interactions are specified and verified at the agreed fidelity with no consequential unresolved design decision.
  • INCOMPLETE: the artifact exists but named interaction or acceptance gaps prevent readiness.
  • BLOCKED: essential intent, safe artifact authority or a necessary capability has no credible substitute.

Self-Check

  • Reconcile before returning. Check item-level evidence, requirement coverage, contradictions, scope, verdict, and applicable cleanup. Correct the report or authorized artifacts. Reuse valid evidence; do not automatically rescan the repository or rerun successful commands. Repeat checks only for relevant changes, failures, or unresolved evidence. Disclose remaining gaps.

Output Contract

Report in the user's language, in this order; label all five fields and state each fact once. Use controlled plain language: one fact per sentence, usually under 20 words, active voice, and one term per concept, with no synonyms for verdicts, IDs, or states. Small results may use one line per field; omit empty tables and do not copy linked artifacts:

  1. Result: The exact skill-specific verdict token first, then the supported outcome.
  2. Scope: Reviewed/changed scope, exclusions, baseline, and material assumptions.
  3. Evidence: Skill-specific fields below; distinguish facts, inferences, and unverified claims. Link artifacts; use tables when useful.
  4. Verification: Checks/results, unavailable evidence, and applicable cleanup/external state.
  5. Completion: Checklist: X/Y complete; Incomplete: None or each UNPROVEN item's reason, outcome impact, and exact next action; residual risks and required decisions.

Skill-specific evidence: Artifact and fidelity, requirement-to-flow/state mapping, authorized UX changes, component reuse, accessibility behavior, inspection results and untested usability assumptions. When a flow has more than a few states and the host renders Markdown diagrams, add one Mermaid state or flow diagram; keep the text complete without it.

© levnikolaevich, 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 plugins/product-discovery-suite/skills/ln-13-interaction-design-builder of levnikolaevich/claude-code-skills.

Open the folder on GitHubat commit 0ce8796

Compare with similar skills

Ln 13 Interaction Design Builder 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.

Ln 13 Interaction Design Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ln 13 Interaction Design Builder this skilllevnikolaevich/claude-code-skills574—~1.8kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Interface Design for Dashboards and Appsholaboss-ai/holaOS11k3 repos~6kAutomated safety check: PassMIT
Animategrowupanand/ConvoForm1026 repos~1.9kAutomated safety check: PassApache-2.0
Migrate Content Iadocker/docs4.7k—~5.1kAutomated safety check: PassApache-2.0
UX WalkthroughXiaoMi/hiui879—~1.3kAutomated safety check: PassMIT

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed
  • Pushes an agent past generic defaults when designing dashboards, admin panels, SaaS apps and tools, with attention to structure, type, navigation and how data is shown.

    11k GitHub starsUsed in 3 repos~6k tokens
    Frontend & DesignAuto-check passed
  • Animate

    growupanand/ConvoForm

    Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

    102 GitHub starsUsed in 6 repos~1.9k tokens
    Frontend & DesignAuto-check passed
  • Official

    Handle Hugo docs information-architecture moves: discover old vs new URLs, add front matter aliases (Phase 1), update in-repo links (Phase 2), interactive List 2 resolution and fragment validation…

    4.7k GitHub stars~5.1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • UX Walkthrough

    XiaoMi/hiui

    体验走查 skill。适用于代码库、URL、截图三种输入,输出结构化体验问题报告,并同步生成本地 docx 报告。触发词:体验走查、UX review、交互走查、界面审查、体验问题。

    879 GitHub stars~1.3k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Color Audit

    rome-os/rome

    Audit a design system's color palette against measurable color-science disciplines — WCAG/APCA contrast of declared token pairs, perceptual (OKLCH) ramp uniformity, color-blindness safety of…

    743 GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed

More from levnikolaevich/claude-code-skills

All 31 skills in this repo
  • Ln 53 Documentation Auditor

    levnikolaevich/claude-code-skills

    Audits documentation and comments for trust, coverage, consistency and freshness; read-only.

    574 GitHub stars~3.8k tokensUpdated 4 days ago
    Auto-check passed
  • Ln 81 Skill Reviewer

    levnikolaevich/claude-code-skills

    Reviews skill instructions, trigger boundaries and distribution contracts; not product code.

    574 GitHub stars~3.5k tokensUpdated 4 days ago
    Auto-check passed
  • Ln 11 Opportunity Evaluator

    levnikolaevich/claude-code-skills

    Evaluates new product opportunities through demand, channels and economics before committing to build.

    574 GitHub stars~3k tokensUpdated 4 days ago
    Auto-check passed
  • Ln 12 Product Requirements Builder

    levnikolaevich/claude-code-skills

    Defines product requirements, business rules and acceptance criteria for a committed intent; edits product docs only.

    574 GitHub stars~1.9k tokensUpdated 4 days ago
    Auto-check passed
  • Ln 21 System Design Baseline Builder

    levnikolaevich/claude-code-skills

    Defines measurable architecture drivers and constraints before system design; edits architecture docs only.

    574 GitHub stars~2.5k tokensUpdated 4 days ago
    Auto-check passed
  • Ln 22 Current Architecture Documenter

    levnikolaevich/claude-code-skills

    Documents current architecture from implementation evidence; does not propose a target or audit fitness.

    574 GitHub stars~2.3k tokensUpdated 4 days ago
    Auto-check passed

Questions about Ln 13 Interaction Design Builder

What does Ln 13 Interaction Design Builder do?

Designs user flows, interaction states and mockups for a defined product scope; does not implement UI code. Ln 13 Interaction Design Builder is an agent skill from levnikolaevich/claude-code-skills. Designs user flows, interaction states and mockups for a defined product scope; does not implement UI code.

When should I use Ln 13 Interaction Design Builder?

Ln 13 Interaction Design Builder fits situations like: tasks that involve UX design.

How do I install Ln 13 Interaction Design Builder in Claude Code?

Run `npx skills add levnikolaevich/claude-code-skills --skill ln-13-interaction-design-builder -a claude-code`. Or copy the skill folder (plugins/product-discovery-suite/skills/ln-13-interaction-design-builder in levnikolaevich/claude-code-skills) into .claude/skills/ln-13-interaction-design-builder in your project. Claude Code loads it when a task matches its description.

How do I install Ln 13 Interaction Design Builder in Codex?

Run `npx skills add levnikolaevich/claude-code-skills --skill ln-13-interaction-design-builder -a codex`. Or copy the skill folder (plugins/product-discovery-suite/skills/ln-13-interaction-design-builder in levnikolaevich/claude-code-skills) into .agents/skills/ln-13-interaction-design-builder in your project. Codex loads it when a task matches its description.

Can I use Ln 13 Interaction Design Builder 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 levnikolaevich/claude-code-skills --skill ln-13-interaction-design-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ln-13-interaction-design-builder, .gemini/skills/ln-13-interaction-design-builder, .github/skills/ln-13-interaction-design-builder and .opencode/skills/ln-13-interaction-design-builder in your project.

What does Ln 13 Interaction Design Builder need to run?

SKILL.md names no scripts, command-line tools or credentials: Ln 13 Interaction Design Builder is instructions for the agent only.

Does Ln 13 Interaction Design Builder 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 Ln 13 Interaction Design Builder 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 Ln 13 Interaction Design Builder use?

Ln 13 Interaction Design Builder 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 Ln 13 Interaction Design Builder use?

About 1.8k tokens (SKILL.md is roughly 7.3k 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 Ln 13 Interaction Design Builder?

Skills that share tags, products or a category with Ln 13 Interaction Design Builder: Impeccable (bestofjs/bestofjs, 3.1k stars), Interface Design for Dashboards and Apps (holaboss-ai/holaOS, 11k stars), Animate (growupanand/ConvoForm, 102 stars) and Migrate Content Ia (docker/docs, 4.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ln 13 Interaction Design Builder?

levnikolaevich (a GitHub user) maintains it in levnikolaevich/claude-code-skills, which has 574 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on October 5, 2026.

Source: levnikolaevich/claude-code-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.