@harnessa-fe/skill

@harnessa-fe/skill

Agent skill / playbook for using the Harnessa-FE MCP toolset. Distribute the same instructions to Claude Code, Cursor, Kiro, or any other MCP-aware AI agent.

This package is just data — a curated SKILL.md plus a tiny installer. It tells the agent when to invoke harnessa-fe tools, how to chain them for common debugging flows, and what the safety boundaries are.

Install

# Drop into Claude Code's project skills dir
npx @harnessa-fe/skill install

# Or pick a target:
npx @harnessa-fe/skill install cursor   # → .cursor/rules/harnessa-fe.mdc
npx @harnessa-fe/skill install kiro     # → .kiro/agents/harnessa-fe.md
npx @harnessa-fe/skill install plain    # → HARNESSA_FE_SKILL.md

Refuses to overwrite. Delete the existing file first if you want to upgrade.

Inspect without installing

npx @harnessa-fe/skill print     # dump SKILL.md to stdout
npx @harnessa-fe/skill where     # print absolute path of the bundled SKILL.md

Programmatic use

import { SKILL_PATH, readSkill } from '@harnessa-fe/skill';

console.log(readSkill());          // markdown body as string
console.log(SKILL_PATH);            // absolute path

What the skill covers

• Mental model: project / build / tab / session — and how same-origin iframe identity inheritance works for micro-frontends.
• MCP tool catalog: page interaction, telemetry tails, rrweb replay, source intelligence, annotation tasks.
• Source-aware selectors: how to target elements by comp (component) / loc (file:line) instead of CSS classes.
• Debugging decision flows: visual bugs, network bugs, micro-frontend bugs, post-crash forensics.
• Safety constraints: page_evaluate is arbitrary JS; project_source is sandboxed; rrweb captures may contain secrets.

See the file itself for the full content: npx @harnessa-fe/skill print.

Prerequisite

The agent's host project must have the harnessa-fe MCP daemon configured. Minimal setup:

npm i -D @harnessa-fe/vite @harnessa-fe/runtime

// vite.config.ts
import { harnessaFE } from '@harnessa-fe/vite';
export default defineConfig({ plugins: [react(), harnessaFE()] });

Then in .mcp.json (or your agent's MCP config):

{
    "mcpServers": {
        "harnessa-fe": { "command": "npx", "args": ["-y", "@harnessa-fe/mcp-server"] }
    }
}

License

MIT