swe-developing-frontend-uilisted

# Frontend UI Development Skill This skill provides repo-specific guidance for building UI components in the open-sharia-enterprise monorepo. It covers design tokens, component patterns, accessibility, anti-patterns, and per-app brand context. ## When This Skill Triggers - Editing `.tsx` component files in `apps/*/src/components/` - Editing `globals.css` or Tailwind configuration - Creating or modifying shared UI components in `libs/ts-ui/` - Working on design tokens in `libs/ts-ui-tokens/` ## Reference Modules Consult these reference docs for detailed guidance on specific topics: - [Design Tokens Reference](./reference/design-tokens.md) — Token names, formats, mapping to Tailwind utilities - [Component Patterns Reference](./reference/component-patterns.md) — CVA templates, Radix composition, complete component examples - [Anti-Patterns Catalog](./reference/anti-patterns.md) — 13 repo-specific anti-patterns with before/after examples - [Accessibility Reference](./reference/accessibility.md) — Per-component ARIA checklists, keyboard navigation - [Brand Context Reference](./reference/brand-context.md) — Per-app audience, personality, palette guidance ## Quick Reference: Top Rules ### Do 1. **Use semantic tokens** — `bg-primary`, `text-muted-foreground`, `border-border` (not hardcoded colors) 2. **Use `React.ComponentProps<"element">`** — not `React.forwardRef` 3. **Use `radix-ui` unified package** — not `@radix-ui/react-slot` individual packages; use `Slot.Root` from u