skills.rest
yanun0323
yanun0323COMMUNITY
Explore all skills by this author →
GitHub

agents-ui

Codifies a three-tier UI architecture for SolidJS projects, including primitives, shared components, feature UIs, accessibility, styling, design tokens, and review checklist.

1|Updated Jan 6, 2026
Search Tags:#ui#architecture#a11y#components#tailwind#design-tokens#solidjs
One-click install
npx skills add https://github.com/yanun0323/.codex --skill agents-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agents-ui
Source: https://github.com/yanun0323/.codex/tree/main/skills/agents-ui
Command: npx skills add https://github.com/yanun0323/.codex --skill agents-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about agents-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure SolidJS components for scalable UI architecture?▼

SolidJS projects should structure UI components using a three-tier layering model: unstyled primitives at Tier 1, shared components wrapping primitives at Tier 2, and feature UIs composing components at Tier 3. This separation enforces accessibility, design-token usage, and maintainability.

What is the three-tier UI layering model in SolidJS?▼

The three-tier model organizes SolidJS code into Tier 1 unstyled primitives with behavior and accessibility, Tier 2 shared components that centralize copy and tokens, and Tier 3 feature UIs that handle composition and server state binding without reimplementing patterns.

How do I apply design tokens and Tailwind in SolidJS shared components?▼

Apply design tokens in SolidJS by preferring Tailwind configuration values over arbitrary values, standardizing spacing and typography within Tier 2 shared components, and keeping all styling out of unstyled Tier 1 primitives to maintain consistency.

Why should feature UIs in SolidJS avoid importing primitives directly?▼

Feature UIs should avoid importing primitives directly to maintain a disciplined three-tier architecture, prevent duplicated UI patterns, ensure accessibility compliance, and keep feature code restricted to component composition and server state binding.

Does this SolidJS UI architecture approach work with existing component libraries?▼

Yes, this approach uses existing primitive libraries at Tier 1 for behavior and accessibility. When patterns exist in libraries like Solid UI or shadcn-solid, copy them into shared components and adapt them to project boundaries at Tier 2.

What accessibility patterns are required for SolidJS UI components?▼

Required SolidJS UI accessibility patterns include keyboard accessibility for all interactive elements, mandatory labels for inputs, and proper focus management for dialogs, menus, and popovers across all component tiers to ensure compliance.

Related Skills

Explore More Design & Creative Skills→
programadorisgodprogramadorisgod
1

ui-design-system

Audit React UI design systems for accessibility and token consistency.

Community
Advanced
NickCrewNickCrew
29

concept-forge

Score early-stage concepts by impact, delight, and effort, then rank and select a top concept for a one-day spike.

Community
Intermediate
wredziowredzio

using-ui-components

Compose complex UIs from predefined UI primitives in the components/ui package.

Community
Basic
dopiotrekdopiotrek

svelte-architect

Decompose SvelteKit applications into Page, Feature, and UI component hierarchies.

Community
Intermediate