Skill System Architecture

The Skill System is the knowledge engine of the Agent Board. It allows the agent to acquire specialized, domain-specific expertise—such as the nuances of high-performance video rendering or 3D scene management—that goes beyond general programming knowledge.

By organizing expertise into modular "Skills," the agent can autonomously apply complex patterns, avoid common pitfalls, and utilize pre-built reference implementations during the development process.

Skill Structure

Each skill is encapsulated within a dedicated directory under .agent/skills/. This modular structure ensures that the agent only loads relevant context for the task at hand.

.agent/skills/[skill-name]/
├── SKILL.md              # The entry point and metadata manifest
├── rules/                # Domain-specific constraints and patterns
│   ├── 3d.md
│   ├── animations.md
│   └── ...
└── assets/               # Reference implementations and code snippets

The Skill Manifest (SKILL.md)

The SKILL.md file serves as the discovery layer. It defines the skill's identity and provides a map for the agent to navigate the specific rules within the domain.

• Metadata: Contains the name, description, and tags (e.g., remotion, react, animation). The agent uses these tags to trigger the skill when relevant files are edited.
• Usage Guidelines: Provides high-level instructions on when the agent should consult the skill (e.g., "Use this skill whenever dealing with Remotion code").
• Rule Mapping: A curated list of links to specific rule files, allowing the agent to perform granular lookups.

Rule Definitions

Rules are Markdown-based documents that dictate "do's and don'ts" for a specific sub-domain. Unlike general documentation, these are optimized for agent consumption:

• Constraints: Explicitly state forbidden patterns (e.g., "CSS transitions are FORBIDDEN - they will not render correctly").
• Code Patterns: Provide standardized boilerplate for common tasks, such as initializing a ThreeCanvas or calculating dynamic metadata.
• Dependencies: List required packages and installation commands (e.g., npx remotion add @remotion/three).

Integrated Reference Assets

The architecture supports an assets/ directory containing complete, functional code examples (e.g., .tsx files). This allows the agent to:

1. Extract Patterns: Analyze a working implementation of a complex feature, like a "Typewriter" animation or a "Bar Chart."
2. Scaffold Components: Use the assets as templates to accelerate the creation of new features.
3. Visual Reference: Understand the "Ideal composition size" and layout constraints defined in the asset's comments.

Skill Selection Logic

The agent board utilizes the metadata within the skill system to manage context window efficiency:

1. Context Detection: When a user provides a prompt or opens a file, the agent scans for keywords and metadata tags defined in the SKILL.md files.
2. Skill Loading: If a match is found (e.g., the user mentions "Three.js" and the remotion-best-practices skill contains the 3d tag), the relevant rules are injected into the agent's active context.
3. Autonomous Application: The agent cross-references its proposed code changes against the "Rules" to ensure compliance with framework-specific best practices before presenting them to the user.

Example Usage: Adding a New Skill

To extend the agent's capabilities, you can define a new skill by following the standard interface:

1. Create the Manifest: Define .agent/skills/my-new-skill/SKILL.md.
2. Define Rules: Add specific logic in .agent/skills/my-new-skill/rules/logic.md.
3. Usage:

# Rule: API Integration
Whenever calling the internal API, you MUST use the `useQuery` hook.

```tsx
import { useQuery } from './hooks';
const { data } = useQuery('endpoint');

By adhering to this structure, the Agent Board can seamlessly integrate your custom domain knowledge into its autonomous workflow.