agents-ui

What problem does it solve?

UI layering and component rules for SolidJS work, including a mandatory 3-tier model to align primitives, components, and feature UIs, improving accessibility, styling consistency, and maintainability across codebases.

Core Features & Use Cases

• Tier 1 Primitives: Behavior + A11y only; use existing primitive libraries; primitives must be unstyled, contain no business logic, and hold no user-facing copy; primitives should reside in stable locations like shared/ui/primitives; avoid introducing new primitive libraries without approval.
• Tier 2 Shared Components: Wrap Tier 1 primitives; centralize copy; standardize spacing/typography using design tokens; avoid data fetching and business logic; suggested location: shared/ui/components; when patterns exist (Solid UI / shadcn-solid), copy them into the codebase and adapt to project boundaries.
• Tier 3 Feature UI: Composition only; bind server state; must not import Tier 1 primitives; must not implement custom accessibility patterns; must not reimplement common UI patterns (dialogs, menus, toasts).
• Tailwind & Design Tokens: Prefer tokens from Tailwind config; avoid arbitrary values unless justified; keep styling out of primitives.
• Accessibility: All interactive elements must be keyboard accessible; inputs must have labels; dialogs/menus/popovers must manage focus.
• Common Anti-Patterns: Do not import primitives in feature code; avoid inline user-facing strings; avoid data fetching in shared UI components; avoid duplicating UI patterns; do not show raw server errors to users.
• UI Review Checklist: Ensure loading/empty/error/success states are handled; copy centralized; errors are actionable; interactions are accessible; patterns are extracted to Tier 2; styling aligns with design tokens.

Quick Start

Begin by establishing a 3-tier UI model in your SolidJS project and implement primitives, then wrap them into shared components and compose feature UIs.