Adapts an external skill into project-specific development guidelines in .trellis/spec/. Creates guideline sections, code example templates with .template suffix, and updates spec indexes. Use when integrating an external skill, adding a new skill's patterns to project conventions, or incorporating third-party skill best practices into .trellis/spec/ documentation.
Adapt and integrate a reusable skill into your project's development guidelines (not directly into project code).
$integrate-skill <skill-name>
Examples:
$integrate-skill frontend-design
$integrate-skill mcp-builder
[!] Important: The goal of skill integration is to update development guidelines, not to generate project code directly.
- Guidelines content -> Write to
.trellis/spec/{target}/doc.md.trellis/spec/{target}/examples/skills/<skill-name>/.template suffix (e.g., component.tsx.template) to avoid IDE errorsWhere {target} is frontend or backend, determined by skill type.
Locate and read the skill instructions:
.agents/skills/<skill-name>/SKILL.md in the repositoryAGENTS.md (when available in current context)If the skill cannot be found, ask the user for the source path or repository.
Based on skill type, determine which guidelines to update:
| Skill Category | Integration Target |
|---|---|
UI/Frontend (frontend-design, web-artifacts-builder) | .trellis/spec/frontend/ |
Backend/API (mcp-builder) | .trellis/spec/backend/ |
Documentation (doc-coauthoring, docx, pdf) | .trellis/ or create dedicated guidelines |
Testing (webapp-testing) | .trellis/spec/frontend/ (E2E) |
Extract from the skill:
Add a new section to the corresponding doc.md:
@@@section:skill-<skill-name>
## # <Skill Name> Integration Guide
### Overview
[Core functionality and use cases of the skill]
### Project Adaptation
[How to use this skill in the current project]
### Usage Steps
1. [Step 1]
2. [Step 2]
### Caveats
- [Project-specific constraints]
- [Differences from default behavior]
### Reference Examples
See `examples/skills/<skill-name>/`
@@@/section:skill-<skill-name>
# Directory structure ({target} = frontend or backend)
.trellis/spec/{target}/
|-- doc.md # Add skill-related section
|-- index.md # Update index
+-- examples/
+-- skills/
+-- <skill-name>/
|-- README.md # Example documentation
|-- example-1.ts.template # Code example (use .template suffix)
+-- example-2.tsx.template
File naming conventions:
<name>.<ext>.template (e.g., component.tsx.template)<name>.config.template (e.g., tailwind.config.template)README.md (normal suffix)Add to the Quick Navigation table in index.md:
| <Skill-related task> | <Section name> | `skill-<skill-name>` |
<skill-name>.trellis/spec/{target}/| Skill Requirement | Project Status | Compatibility |
|---|---|---|
| [Tech 1] | [Project tech] | [OK]/[!]/[X] |
| Type | Path |
|---|---|
| Guidelines doc | .trellis/spec/{target}/doc.md (section: skill-<name>) |
| Code examples | .trellis/spec/{target}/examples/skills/<name>/ |
| Index update | .trellis/spec/{target}/index.md |
{target}=frontendorbackend
# Install required dependencies (adjust for your package manager)
npm install <package>
# or
pnpm add <package>
# or
yarn add <package>
@@@section:skill-<name> section to doc.mdindex.mdexamples/skills/<name>/.template suffixIf this skill is frequently used, create a shortcut skill:
$create-command use-<skill-name> Use <skill-name> skill following project guidelines
| Skill | Integration Target | Examples Directory |
|---|---|---|
frontend-design | frontend | examples/skills/frontend-design/ |
mcp-builder | backend | examples/skills/mcp-builder/ |
webapp-testing | frontend | examples/skills/webapp-testing/ |
doc-coauthoring | .trellis/ | N/A (documentation workflow only) |
mcp-builder Skill.trellis/spec/backend/
|-- doc.md # Add MCP section
|-- index.md # Add index entry
+-- examples/
+-- skills/
+-- mcp-builder/
|-- README.md
|-- server.ts.template
|-- tools.ts.template
+-- types.ts.template
@@@section:skill-mcp-builder
## # MCP Server Development Guide
### Overview
Create LLM-callable tool services using MCP (Model Context Protocol).
### Project Adaptation
- Place services in a dedicated directory
- Follow existing TypeScript and type definition conventions
- Use project's logging system
### Reference Examples
See `examples/skills/mcp-builder/`
@@@/section:skill-mcp-builder