Getting Started
Components
Search for a command to run...
Custom AI agent skills for the Simpson Strong-Tie design system. These skills provide specialized guidance for component development, testing, documentation, and code quality.
Installation: Download the skill files and place them in your ~/.agents/skills/ directory.
Create React components for @strongtie/design-system using shadcn/ui and Radix UI primitives first, following the two-layer architecture with CVA variants and Tailwind CSS v4.
Use when:
Generate comprehensive test suites for React components with accessibility testing.
Use when:
Generate documentation for React components using Storybook, MDX, or JSDoc based on project conventions.
Use when:
Follow React best practices and web interface guidelines for accessibility, performance, forms, animation, and UX patterns.
Use when:
Ensure code style consistency using Ultracite and @strongtie linting packages. Handles setup if not installed, then runs checks and fixes.
Use when:
Migrate React applications from @strongtie/design-system to shadcn/ui with Tailwind CSS. Includes component mapping, CSS token conversion, and breaking change handling.
Use when:
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.
Skills are installed globally in your home directory and shared across all projects. Different AI clients use different directories:
| Client | Skills Directory |
|---|---|
| Universal | ~/.agents/skills/ |
| Claude Code | ~/.claude/skills/ |
| Cursor | ~/.cursor/skills/ |
We recommend using ~/.agents/skills/ for universal compatibility. Most modern AI coding assistants support this location.
# 1. Create the global skills directory (one-time setup)
mkdir -p ~/.agents/skills
# 2. Create a directory for each skill you want to install
mkdir -p ~/.agents/skills/strongtie-component
mkdir -p ~/.agents/skills/strongtie-test
mkdir -p ~/.agents/skills/strongtie-docs
mkdir -p ~/.agents/skills/strongtie-react-practices
mkdir -p ~/.agents/skills/strongtie-style-consistency
mkdir -p ~/.agents/skills/design-system-migration
# 3. Download skills using the buttons above and move them
mv ~/Downloads/SKILL.md ~/.agents/skills/strongtie-component/
# 4. Verify installation
ls ~/.agents/skills/strongtie-*/SKILL.mdSkills activate automatically when the AI agent detects relevant context. You can also explicitly load a skill:
# Load a specific skill
/skill strongtie-component
# List available skills
/skill list| Skill | Activates When |
|---|---|
strongtie-component | Creating or modifying React components |
strongtie-test | Writing or fixing tests |
strongtie-docs | Creating documentation or Storybook stories |
strongtie-react-practices | Writing React code, forms, or data fetching |
strongtie-style-consistency | Running linting or setting up code quality tools |
design-system-migration | Migrating from @strongtie/design-system to shadcn/ui |