skills/stack-extend/SKILL.md
Add a new tool to the project stack at runtime. Reads the tool catalog for known configs, installs the package, updates stacks.yml and .env, generates boilerplate, creates a tracking Issue, and posts an investor update. Use when an agent discovers it needs a new integration (analytics, payments, auth, email, monitoring, etc.) or when the user requests adding a tool.
npx skillsauth add Cheggin/skill-chain stack-extendInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Add a new tool or integration to the running project stack. Handles everything from package installation to configuration to tracking.
Read .harness/tool-catalog.yml and search for tool_name across all categories.
package, env_vars, setup, docs, description, when.Store the resolved config as resolved_config for subsequent steps.
Read .harness/stacks.yml and check if the tool is already listed under any category.
Also check package.json to see if the npm package is already installed. If installed but not in stacks.yml, skip to step 4 (configuration).
Run the setup command from the resolved config:
# For npm packages
npm install <resolved_config.package>
# If there's a dedicated setup command (e.g., npx @sentry/wizard)
<resolved_config.setup>
If the tool has no npm package (e.g., BetterUptime is SaaS-only), skip installation and note this in the output.
Verify installation succeeded by checking the exit code. On failure, read the error output and attempt to resolve (common fixes: clear node_modules, retry with --legacy-peer-deps).
Read the current .env file. For each entry in resolved_config.env_vars:
.env, leave it unchanged.# Added by stack-extend: <tool_name>
<VAR_NAME>=your_<var_name_lowercase>_here
Never overwrite existing environment variable values.
Read .harness/stacks.yml. Add the tool under the appropriate top-level category:
analytics tools go under website.analytics or a new analytics keypayments tools go under backend.paymentsauth tools go under backend.authenticationemail tools go under backend.emailerror-tracking tools go under quality.error_trackingmonitoring tools go under quality.monitoringfile-storage tools go under backend.file_storagecms tools go under backend.cmsFormat: <category_key>: <tool_name> # <description>
If the category key does not exist in stacks.yml, add it under the most logical parent section.
Create initialization code based on the tool type. Place files in the project source directory.
For tools with MCP servers (check resolved_config.mcp_server):
.mcp.jsonFor npm packages, generate a provider/init file:
lib/<tool_name>.ts
The file should:
For React providers (auth, analytics):
components/providers/<tool_name>-provider.tsxCreate a GitHub Issue to track the integration:
Title: [Stack] Add <tool_name> integration
Labels: stack, integration
Body:
## Tool Added
- **Name**: <tool_name>
- **Package**: <resolved_config.package>
- **Category**: <category>
- **Reason**: <reason>
## Setup Checklist
- [x] Package installed
- [x] Environment variables added to .env
- [x] stacks.yml updated
- [x] Boilerplate config generated
- [ ] API keys configured with real values
- [ ] Integration tested end-to-end
- [ ] Documentation updated
## Docs
<resolved_config.docs>
Use gh issue create to create the issue.
Invoke the investor-updates skill pattern to post a Slack message:
Stack Update: Added <tool_name>
Reason: <reason>
Category: <category>
Status: Installed and configured, pending API key setup
If Slack is not configured, write the update to .harness/updates/stack-extend-<tool_name>-<timestamp>.md instead.
Perform a basic validation that the tool is properly integrated:
.env (even as placeholders).Report the validation results.
To remove a tool, reverse the process:
.harness/stacks.yml.env (only if they still have placeholder values — never remove configured keys)npm uninstall <package>lib/<tool_name>.ts, components/providers/<tool_name>-provider.tsx).mcp.json if applicable.harness/stacks.yml after execution.envpackage.json dependenciesdevelopment
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
documentation
Agentic memory system for writers - track characters, relationships, scenes, and themes
documentation
LLM Wiki — persistent markdown knowledge base that compounds across sessions (Karpathy model)
development
Build production-quality SaaS websites with opinionated design presets. Use when creating any startup website. The user MUST pick a design style before building. Enforces shadcn/ui, Figma design principles, specific CSS values per style, and anti-AI-writing. Load alongside anti-ai-writing skill. LIGHT MODE ONLY.