Getting Started
Components
Search for a command to run...
Documentation for AI agents helping users integrate the Strongtie Design System. Content is structured for direct consumption by LLMs.
| Resource | URL | Purpose |
|---|---|---|
| Design Standards | /llm/design-standards | Core patterns and rules |
| Code Examples | /llm/design-standards-examples | Implementation templates |
| Code Quality | /llm/getting-started/eslint-setup | ESLint, Prettier, Stylelint |
| Framework Guide | /llm/framework-recommendations | Vite vs Next.js decisions |
| AGENTS Template | /templates/AGENTS_TEMPLATE.md | Project setup template |
Default: Use Vite for all new React projects. Next.js requires management approval and is not recommended for SPAs.
START: New React project?
├─ YES → Use Vite + React
│ └─ Needs SSR/SSG/ISR?
│ ├─ YES → Request management approval for Next.js
│ └─ NO → Use Vite + React
└─ NO (existing project) → What's the current stack?
├─ Blazor → See /framework-recommendations for migration
├─ Create React App → Migrate to Vite
└─ Next.js → Continue with Next.js
| Scenario | Framework | Notes |
|---|---|---|
| New SPA | Vite | Default choice |
| New app needing SSR | Vite + manual SSR | Or request Next.js approval |
| Internal tools | Vite | Always |
| Marketing sites | Request approval | Next.js may be appropriate |
| Existing Next.js | Continue | No migration needed |
See Framework Recommendations for detailed guidance.
| Layer | Technology | Version | Notes |
|---|---|---|---|
| Build | Vite | 7+ | Default for all projects |
| Framework | React | 19+ | With React Compiler |
| Routing | React Router | 7+ | Standard routing |
| UI | shadcn/ui + Tailwind CSS | 4+ | Design system |
| Data Fetching | TanStack Query | 5+ | Server state |
| State (Simple) | React Context | - | Session/UI state |
| State (Complex) | Zustand | 4+ | Cross-component/computed |
| Forms (Simple) | Native useState | - | 1-3 fields, no validation |
| Forms (Complex) | React Hook Form + Zod | 7+ / 3+ | 4+ fields or validation |
| Testing | Vitest | - | Jest-compatible API |
| Linting | @strongtie/eslint | 1.0+ | Extends Ultracite |
This codebase uses React Compiler (babel-plugin-react-compiler).
DO NOT USE:
useMemo() - compiler handles memoizationuseCallback() - compiler optimizes callbacksReact.memo() - rarely needed with compilerDO USE:
React.lazy() for code splittinguseState, useEffect, useRefIs this server data (from API)?
├─ YES → TanStack Query
└─ NO → Is this component-local UI state?
├─ YES → useState
└─ NO → Is this session-level shared state (auth, tenant, theme)?
├─ YES → React Context
└─ NO → Zustand
| Condition | Solution |
|---|---|
| 1-3 fields AND no validation | useState |
| 4+ fields OR validation rules | React Hook Form + Zod |
useStateuseMemo/useCallback (React Compiler handles this)// REQUIRED - use aria-label
<Button variant="ghost" size="icon" aria-label="Delete project">
<Trash2 className="h-4 w-4" />
</Button>
// ALTERNATIVE - use sr-only span
<Button variant="ghost" size="icon">
<Trash2 className="h-4 w-4" />
<span className="sr-only">Delete project</span>
</Button>
// NEVER - no accessible name
<Button variant="ghost" size="icon">
<Trash2 className="h-4 w-4" />
</Button>alt="" for decorative)/src/
main.tsx # App entry, providers
router.tsx # Route configuration
globals.css # Global Tailwind styles
/components/
/ui/ # shadcn/ui primitives (DO NOT EDIT)
/hooks/
query-keys.ts # Centralized query key factory
/lib/
/api/ # API service modules
error-messages.ts # Error code mapping
/schemas/ # Zod validation schemas
/stores/ # Zustand stores
| Type | Convention | Example |
|---|---|---|
| Files | kebab-case.tsx | project-card.tsx |
| Components | PascalCase (named export) | export function ProjectCard() |
| Hooks | use- prefix | use-projects.ts |
| Schemas | -schema.ts suffix | project-schema.ts |
| Stores | -store.ts suffix | project-store.ts |
@/ path aliases../../)import type {} for type-only importsBefore completing any component:
readonly modifieraria-labelcn() for conditional classes@/ import aliases| Asset | Path | Format | Usage |
|---|---|---|---|
| Primary Logo | /SSTLogo.svg | SVG | Header, footer |
| Favicon | /favicon.svg | SVG | Browser tab |
| App Icon (192px) | /android-chrome-192x192.png | PNG | PWA manifest |
| App Icon (512px) | /android-chrome-512x512.png | PNG | PWA manifest |
Pattern: ^(feature|hotfix)\/[a-z0-9\-]+$
| Type | Pattern | Example |
|---|---|---|
| Feature with ticket | feature/ticket-####-description | feature/ticket-1234-add-auth |
| Feature without ticket | feature/description | feature/add-dark-mode |
| Hotfix with ticket | hotfix/ticket-####-description | hotfix/ticket-5678-fix-login |
| Hotfix without ticket | hotfix/description | hotfix/fix-null-pointer |
Use Conventional Commits:
feat: - New featurefix: - Bug fixdocs: - Documentationrefactor: - Code refactoringtest: - Adding testschore: - MaintenanceCore patterns and best practices for React applications.
Comprehensive implementation templates.
ESLint, Prettier, and Stylelint configuration.
Vite vs Next.js decision framework.
Copy-paste template for project setup.
Installation options and setup guides.