AI agent skills

Custom AI agent skills for the Simpson Strong-Tie design system. These skills provide specialized guidance for component development, testing, documentation, and code quality.

Available skills

strongtie-component

Create React components for @strongtie/design-system by reusing existing Strongtie primitives first, then applying Radix UI, CVA variants, and Tailwind CSS v4 through the package's two-layer architecture.

Use when:

• Creating new components
• Modifying existing components
• Adding component variants

strongtie-test

Write Vitest + Testing Library test suites for @strongtie/design-system components, covering rendering, variants, prop forwarding, ref forwarding, interaction, and accessibility.

Use when:

• Creating tests for a new component
• Adding tests to an existing component
• Fixing a failing component test

This skill bundles multiple files. Download each into ~/.agents/skills/strongtie-test/, keeping the references/ subfolder:

Copymkdir -p ~/.agents/skills/strongtie-test/references
curl -L -o ~/.agents/skills/strongtie-test/SKILL.md \
  https://design.strongtie.io/skills/strongtie-test/SKILL.md
curl -L -o ~/.agents/skills/strongtie-test/references/test-patterns.md \
  https://design.strongtie.io/skills/strongtie-test/references/test-patterns.md

strongtie-docs

Document a @strongtie/design-system component across its four surfaces: wrapper JSDoc, a Storybook story, an MDX page, and a registry example.

Use when:

• Documenting a new component
• Updating existing component documentation
• Adding a Storybook story

This skill bundles multiple files. Download each into ~/.agents/skills/strongtie-docs/, keeping the references/ subfolder:

Copymkdir -p ~/.agents/skills/strongtie-docs/references
curl -L -o ~/.agents/skills/strongtie-docs/SKILL.md \
  https://design.strongtie.io/skills/strongtie-docs/SKILL.md
curl -L -o ~/.agents/skills/strongtie-docs/references/mdx-and-registry.md \
  https://design.strongtie.io/skills/strongtie-docs/references/mdx-and-registry.md

strongtie-react-practices

Apply React best practices and web-interface guidelines when building apps that consume @strongtie/design-system — accessibility, focus, forms UX, animation, performance, loading states, and dark mode.

Use when:

• Building or reviewing an app that consumes the design system
• Implementing forms or data fetching in a consuming app
• Ensuring accessibility and interaction quality

This skill bundles multiple files. Download each into ~/.agents/skills/strongtie-react-practices/, keeping the references/ subfolder:

Copymkdir -p ~/.agents/skills/strongtie-react-practices/references
curl -L -o ~/.agents/skills/strongtie-react-practices/SKILL.md \
  https://design.strongtie.io/skills/strongtie-react-practices/SKILL.md
curl -L -o ~/.agents/skills/strongtie-react-practices/references/data-and-forms.md \
  https://design.strongtie.io/skills/strongtie-react-practices/references/data-and-forms.md

strongtie-style-consistency

Set up and run code-style linting for Simpson Strong-Tie projects using Ultracite and the @strongtie linting packages.

Use when:

• Setting up linting in a project
• Running lint checks
• Fixing lint errors

What are skills?

Skills are reusable prompt instructions that provide AI coding assistants with domain-specific knowledge. They contain patterns, conventions, and best practices that help AI agents generate code consistent with your team's standards.

When installed, skills are automatically loaded by compatible AI agents (like Claude Code, Cursor, or OpenCode) based on context matching. For example, when you ask to "create a new Button component," the strongtie-component skill activates to guide the AI through your team's two-layer architecture pattern.

Some skills bundle a references/ folder alongside their SKILL.md. Those files hold the longer checklists and boilerplate the skill loads on demand, so keep the folder structure intact when you install them.

Installation

Skills are installed globally in your home directory and shared across all projects. Different AI clients use different directories:

Manual installation

Copy# 1. Create the global skills directory and per-skill references folders
mkdir -p ~/.agents/skills/strongtie-test/references
mkdir -p ~/.agents/skills/strongtie-docs/references
mkdir -p ~/.agents/skills/strongtie-react-practices/references
mkdir -p ~/.agents/skills/strongtie-component
mkdir -p ~/.agents/skills/strongtie-style-consistency
 
# 2. Download each skill file into its target directory
curl -L -o ~/.agents/skills/strongtie-component/SKILL.md \
  https://design.strongtie.io/skills/strongtie-component/SKILL.md
 
curl -L -o ~/.agents/skills/strongtie-test/SKILL.md \
  https://design.strongtie.io/skills/strongtie-test/SKILL.md
curl -L -o ~/.agents/skills/strongtie-test/references/test-patterns.md \
  https://design.strongtie.io/skills/strongtie-test/references/test-patterns.md
 
curl -L -o ~/.agents/skills/strongtie-docs/SKILL.md \
  https://design.strongtie.io/skills/strongtie-docs/SKILL.md
curl -L -o ~/.agents/skills/strongtie-docs/references/mdx-and-registry.md \
  https://design.strongtie.io/skills/strongtie-docs/references/mdx-and-registry.md
 
curl -L -o ~/.agents/skills/strongtie-react-practices/SKILL.md \
  https://design.strongtie.io/skills/strongtie-react-practices/SKILL.md
curl -L -o ~/.agents/skills/strongtie-react-practices/references/data-and-forms.md \
  https://design.strongtie.io/skills/strongtie-react-practices/references/data-and-forms.md
 
curl -L -o ~/.agents/skills/strongtie-style-consistency/SKILL.md \
  https://design.strongtie.io/skills/strongtie-style-consistency/SKILL.md
 
# 3. Verify installation
ls ~/.agents/skills/*/SKILL.md
ls ~/.agents/skills/*/references/*.md

Usage

Skills activate automatically when the AI agent detects relevant context. You can also explicitly load a skill:

Copy# Load a specific skill
/skill strongtie-component
 
# List available skills
/skill list

When skills activate

Related