메뉴
TEMPLATE — copy into your content overlay and rename to np-kb-<yourname>. Captures your project's visual identity (colors, type, spacing, components) so the agent defaults to your system instead of inventing values. Use when making any UI/design decision.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
How to add real images and icons to a project by pulling them from a source — stock photos via a provider API (Pexels default, Unsplash swap) behind one swappable constant, and icons via Iconify/astro-icon (Lucide) — with a dormant-safe fetch-script pattern, Astro src/assets optimization, and an images[] content field. Use when a site/blog needs real photos or proper SVG icons instead of emoji/gradient placeholders, or when wiring per-post imagery.
Defensive patterns for Chrome MV3 content scripts that have to survive host-app surprises — extension reloads orphaning the chrome.* namespace, host frameworks recycling DOM elements between component instances. Use when writing or debugging any content script that injects into a third-party page or holds long-lived observers/listeners.
Rules for organizing assets in a Chrome MV3 extension repo and the Chrome Web Store submission asset checklist. Use when adding icons or promo art, packaging a build for upload, or auditing whether a repo is ready for store submission.
Gotchas for driving the `claude` CLI headlessly (`-p`/`--print`) from shell scripts, hooks, and crons, AND for writing Claude Code lifecycle hooks safely. Pass the prompt via stdin — the variadic `--allowedTools <tools...>` silently eats a trailing positional prompt and aborts the CLI. SessionStart fires repeatedly (startup/resume/clear/compact) so guard GUI/side-effects to once-per-boot or they can loop. Use when writing or debugging any script, SessionStart/SessionEnd/PreCompact/UserPromptSubmit hook, or cron wrapper (nervepack's own episodic capture/maintain/evaluator/recall hooks and the dashboard-launch hook all rely on this).
Framework-level UI implementation gotchas (Preact/React and similar) that bite repeatedly — focusing/selecting dynamically-mounted inputs, making inline-edit commit exactly once, and silencing ResizeObserver loop warnings. Use when building editable/inline-rename fields, doing focus management, wiring a ResizeObserver, or debugging "the input won't focus", "typing doesn't replace the text", "it saved twice / didn't save", or "ResizeObserver loop completed with undelivered notifications", or a CSS bar/progress "fill" that renders invisibly because an inline element ignores width/height.
Gotchas when committing/inspecting changes with git via a shell (esp. the Bash tool) that lead to wrong commits or wrong conclusions. Chiefly — a file MOVE split across two commits is NOT detected as a rename, so a `D old/path` in `git status` can be a move (content still exists elsewhere), not a deletion; and backticks/`$(...)` inside a double-quoted `git commit -m "..."` trigger shell command substitution and silently mangle the message. Use before writing a commit message that says "deleted/removed/retired", before `git add -A` in a dirty/reorg tree, or when a commit message came out garbled.
| name | np-kb-example-design-system |
| description | TEMPLATE — copy into your content overlay and rename to np-kb-<yourname>. Captures your project's visual identity (colors, type, spacing, components) so the agent defaults to your system instead of inventing values. Use when making any UI/design decision. |
This is a template, not a live skill. This whole repo is an example content overlay. To use it for real: copy this dir into your own (private) content overlay (
$NP_CONTENT_DIR/skills/), rename tonp-kb-<something>, replace the placeholders with your real values, and re-runengine/setup/30-link-skills.sh. Keep your real one private — it captures your brand.
This shows the shape of a np-kb- design/branding skill. Replace every <…>.
<#hex>, surface <#hex>, text <#hex>, accent <#hex>,
border <#hex>. (List the few you actually reuse — not a full palette dump.)<font stack>, headings <font stack>, mono <font stack>; base
size <px>, scale <ratio>.<px>; radii <sm/md/lg>; shadow <value>.Describe the 2–4 components you reuse most (button, card, input…) as decisions, not
code — e.g. "Buttons: <radius> radius, <padding>, accent fill on primary, never
pure-black text (use the text token)."
The agent reads this before designing, so it picks your values instead of generic
defaults. Keep it lean (the decision belongs here; long rationale → references/).