Agent skill

Heredoc File Write

by HKUDS in HKUDS/OpenSpace

Use shell heredoc syntax as a workaround when writefile fails on complex TypeScript/JSX/code files with encoding or escaping issues

MITAuto-check passedFrontend & Design

Install Heredoc File Write

skills CLI
$ npx skills add HKUDS/OpenSpace --skill heredoc-file-write -a claude-code

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

GitHub CLI
$ gh skill install HKUDS/OpenSpace heredoc-file-write --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/HKUDS/OpenSpace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/benchmarks/gdpval/skills/heredoc-file-write .claude/skills/heredoc-file-write && 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
heredoc-file-write
GitHub stars
7.8k
Token cost
~945 tokens
SKILL.md length
361 words
Files
2
Skills in repo
199
Repo updated
First seen
Licence
MIT

At a glance

Use shell heredoc syntax as a workaround when writefile fails on complex TypeScript/JSX/code files with encoding or escaping issues

  • Works in 4 steps: Identify Write Failures → Use Heredoc Syntax → Key Heredoc Rules → …
  • Tasks that involve React components
  • SKILL.md covers When to Use This Skill, Core Technique, Step-by-Step Instructions and Example Scenarios, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Heredoc File Write is an agent skill from HKUDS/OpenSpace. Use shell heredoc syntax as a workaround when writefile fails on complex TypeScript/JSX/code files with encoding or escaping issues

Its SKILL.md is about 950 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file.

It sits in Frontend & Design, covering React components. It works with TypeScript. The repository describes itself as: "OpenSpace: The Skill Management Layer for AI Agents" -- https://open-space.cloud/. The licence is MIT.

When your agent uses it

  • Tasks that involve React components

Example prompts

  • “/heredoc-file-write”

Workflow steps

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

  1. Identify Write Failures
  2. Use Heredoc Syntax
  3. Key Heredoc Rules
  4. Verify File Creation

What it can do on your machine

Read from SKILL.md and the folder at commit 3827781. 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 (its code samples are bash).

    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

Heredoc File Write loads about 945 tokens when it runs. Until then it costs about 38 tokens; SKILL.md has 361 words of instructions outside code blocks.

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

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 HKUDS/OpenSpace at commit 3827781, republished under its MIT licence (© HKUDS). 361 words, ~945 tokens.

Download SKILL.mdSave it as .claude/skills/heredoc-file-write/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
heredoc-file-write
description
Use shell heredoc syntax as a workaround when write_file fails on complex TypeScript/JSX/code files with encoding or escaping issues

Heredoc File Write Workaround

When to Use This Skill

Use this pattern when:

  • write_file repeatedly fails with "unknown error" or similar messages
  • The target file contains complex code (TypeScript, JSX, JSON with special characters, etc.)
  • Standard file writing approaches encounter encoding or escaping issues
  • You need a reliable fallback method to create files

Core Technique

Switch from write_file to run_shell using heredoc syntax with cat. The heredoc approach handles special characters, quotes, and complex content more reliably.

Step-by-Step Instructions

Step 1: Identify Write Failures

When write_file fails repeatedly on the same file:

  1. Note the error message (e.g., "unknown error", encoding issues)
  2. Review the file content for special characters, nested quotes, or complex syntax
  3. Attempt the heredoc workaround below
Step 2: Use Heredoc Syntax

Execute shell command with heredoc:

bash
cat > /path/to/file.tsx << 'EOF'
// Your file content here
import React from 'react';
const Component = () => {
  return <div>Hello</div>;
};
export default Component;
EOF
Step 3: Key Heredoc Rules
  1. Use quoted delimiter ('EOF' not EOF) to prevent variable expansion:

    • 'EOF' = literal content (recommended for code files)
    • EOF = allows variable expansion (use only if needed)
  2. Match delimiters exactly: Opening and closing EOF must be on their own lines with no leading/trailing whitespace

  3. No escaping needed: Content between delimiters is taken literally when using quoted delimiter

Step 4: Verify File Creation

After executing the heredoc command:

  1. Check if file exists: ls -la /path/to/file.tsx
  2. Verify content: cat /path/to/file.tsx or head -20 /path/to/file.tsx
  3. Proceed with subsequent tasks once confirmed
Show full SKILL.md (133 more words)Show less

Example Scenarios

TypeScript/JSX Component
bash
cat > src/components/Button.tsx << 'EOF'
import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

export const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return (
    <button onClick={onClick} className="btn-primary">
      {label}
    </button>
  );
};
EOF
JSON Configuration
bash
cat > tsconfig.json << 'EOF'
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}
EOF
Complex Shell Script
bash
cat > deploy.sh << 'EOF'
#!/bin/bash
set -e

echo "Deploying..."
if [ "$ENV" = "production" ]; then
  echo "Production deployment"
fi
EOF

Advantages Over write_file

  1. No escaping complexity: Quotes, backslashes, and special characters work naturally
  2. Preserves formatting: Indentation and line breaks remain exact
  3. Handles multi-line content: No need to concatenate strings or use base64
  4. More reliable: Shell handles file I/O directly with fewer abstraction layers

Limitations

  • Creates files in shell execution context (ensure correct working directory)
  • Less programmatic than write_file for dynamic content generation
  • Requires shell access (may not work in restricted environments)

Troubleshooting

Problem: File not created at expected path

  • Solution: Use absolute paths or verify current working directory with pwd

Problem: Content appears corrupted

  • Solution: Ensure delimiter is quoted ('EOF') and closing delimiter has no trailing whitespace

Problem: Permission denied

  • Solution: Ensure target directory exists and you have write permissions

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

Files

SKILL.md and 1 other file in benchmarks/gdpval/skills/heredoc-file-write of HKUDS/OpenSpace.

  • SKILL.md
  • .skill_id

Open the folder on GitHubat commit 3827781

Compare with similar skills

Heredoc File Write 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.

Heredoc File Write compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Heredoc File Write this skillHKUDS/OpenSpace7.8k—~945Automated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
Dify Component Writing Guidelanggenius/dify158k—~626Automated safety check: PassCustom licence
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase10k2 repos~2.9kAutomated safety check: PassMIT
Formik Form PatternsChrisWiles/claude-code-showcase6.1k3 repos~2.1kAutomated safety check: PassNone
Animated React Component LibrariesHainrixz/editor-pro-max2641 repos~5.7kAutomated safety check: PassCustom licence

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed
  • Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated today
    Frontend & DesignAuto-check passed
  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed
  • Formik Form Patterns

    ChrisWiles/claude-code-showcase

    Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.

    6.1k GitHub starsUsed in 3 repos~2.1k tokens
    Frontend & DesignAuto-check passed
  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    264 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed
  • Phoenix Frontend

    Arize-ai/phoenix

    Frontend development guidelines for the Phoenix AI observability platform.

    12k GitHub stars~709 tokensUpdated today
    Frontend & DesignAuto-check passed

More from HKUDS/OpenSpace

All 199 skills in this repo
  • Walks through producing a master audio track plus stems in Python, from checking a reference file and timing sections by BPM to effects, a zip archive and final verification.

    7.8k GitHub stars~2.9k tokensUpdated 1 mo ago
    Auto-check passed
  • Handle cascading data retrieval tool failures by falling back to embedded knowledge generation

    7.8k GitHub stars~765 tokensUpdated 1 mo ago
    Auto-check passed
  • Gives an agent a workaround when its code-execution sandbox keeps failing: save the Python script to a file and run it through the shell instead.

    7.8k GitHub stars~588 tokensUpdated 1 mo ago
    Auto-check passed
  • A recovery routine for agents whose sandboxed code runner keeps failing: save the Python script to disk, then run it through the shell and read the output.

    7.8k GitHub stars~652 tokensUpdated 1 mo ago
    Auto-check passed
  • Fallback ladder for failed sandboxed code runs, plus the habit of fixing the working directory first so generated files land in the right place.

    7.8k GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check passed
  • Fallback workflow for executing Python code when executecodesandbox fails repeatedly

    7.8k GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Questions about Heredoc File Write

What does Heredoc File Write do?

Use shell heredoc syntax as a workaround when writefile fails on complex TypeScript/JSX/code files with encoding or escaping issues. Heredoc File Write is an agent skill from HKUDS/OpenSpace.

When should I use Heredoc File Write?

Heredoc File Write fits situations like: tasks that involve React components.

How do I install Heredoc File Write in Claude Code?

Run `npx skills add HKUDS/OpenSpace --skill heredoc-file-write -a claude-code`. Or copy the skill folder (benchmarks/gdpval/skills/heredoc-file-write in HKUDS/OpenSpace) into .claude/skills/heredoc-file-write in your project. Claude Code loads it when a task matches its description.

How do I install Heredoc File Write in Codex?

Run `npx skills add HKUDS/OpenSpace --skill heredoc-file-write -a codex`. Or copy the skill folder (benchmarks/gdpval/skills/heredoc-file-write in HKUDS/OpenSpace) into .agents/skills/heredoc-file-write in your project. Codex loads it when a task matches its description.

Can I use Heredoc File Write 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 HKUDS/OpenSpace --skill heredoc-file-write -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/heredoc-file-write, .gemini/skills/heredoc-file-write, .github/skills/heredoc-file-write and .opencode/skills/heredoc-file-write in your project.

What does Heredoc File Write need to run?

SKILL.md names no scripts, command-line tools or credentials: Heredoc File Write is instructions for the agent only.

Does Heredoc File Write 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 Heredoc File Write 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 Heredoc File Write use?

Heredoc File Write 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 Heredoc File Write use?

About 945 tokens (SKILL.md is roughly 3.8k 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 Heredoc File Write?

Skills that share tags, products or a category with Heredoc File Write: Web Artifacts Builder (anthropics/skills, 180k stars), Dify Component Writing Guide (langgenius/dify, 158k stars), React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars) and Formik Form Patterns (ChrisWiles/claude-code-showcase, 6.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Heredoc File Write?

HKUDS (a GitHub organization) maintains it in HKUDS/OpenSpace, which has 7,750 GitHub stars. The repository holds 199 skills in this directory. The repository was last updated on August 12, 2026.

Source: HKUDS/OpenSpace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.