메뉴
HeroUI as the only component library: v3 imports from @heroui/react, theme tokens from globals.css, Tailwind composition without fighting HeroUI variants, forms and accessibility hooks. Triggers on HeroUI, heroui, Button, Input, Modal, TSX UI.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
TypeScript hub for Bun workflows, tsconfig and tsc, interface vs type vs enum, no any, unknown only with explicit user approval, ESM, lint/format, Vitest or Bun test, JSDoc or TSDoc, delegation to typescript-types. Triggers on TypeScript, interface, type, enum, any, unknown, Bun, tsc, eslint.
Deep TypeScript typing for discriminated unions, exhaustive handling, generics, satisfies, branding, and fixing tsc output without any or silent unknown on public APIs. Use when resolving complex type errors or designing type-heavy APIs. Pairs with general-typescript (no any; unknown only with explicit user approval). Triggers on generics, union, narrowing, exhaustive, satisfies, inference.
T3 Next.js App Router umbrella: stack roles, src/ layout, RSC vs client, HeroUI-only UI, globals.css theme authority. Load web-trpc-api, web-url-search-state, heroui-components for depth; general-typescript for Bun and TS.
tRPC procedures with auth context, Zod inputs, query vs mutation semantics, Prisma on server, error mapping, and optional Next.js REST route handlers that share validation. For T3 Next.js apps. Triggers on tRPC, router, procedure, protectedProcedure, prisma, zod, app/api route.ts.
Next.js App Router URL search state: Zod schemas for searchParams, shareable list/filter URLs, sync with Link and router, SSR-friendly patterns. Triggers on searchParams, nuqs, URL, query string, bookmark.
| name | heroui-components |
| description | HeroUI as the only component library: v3 imports from @heroui/react, theme tokens from globals.css, Tailwind composition without fighting HeroUI variants, forms and accessibility hooks. Triggers on HeroUI, heroui, Button, Input, Modal, TSX UI. |
Use with typescript-web spec and heroui-theme rule. web-accessibility rule covers baseline a11y.
@heroui/react imports when the repo pins v3; use legacy subpath imports only when v3 lacks the component and the gap is documented.globals.css / HeroUI theme; add tokens instead of arbitrary colors on each screen.Select.Trigger, etc.); do not fight internal structure with conflicting className overrides—use slots / variants when the library provides them.Input, Select, Button over raw <input> for app UI unless a documented exception (e.g. file inputs where the team standardizes native)."use client" at the top; keep server parents passing serializable props.| Topic | File |
|---|---|
| Imports, theme, Tailwind coexistence | reference-theme-imports.md |