メニュー
UI development skill covering design token usage, shadcn/ui + Radix composition patterns, accessibility requirements, anti-patterns catalog, and brand context for `crud-fe-ts-nextjs` and `crud-fs-ts-nextjs`. Auto-loads when working on TSX components, CSS, or UI design tasks.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
AI agent development standards including frontmatter structure, naming conventions, tool access patterns, model selection, and reference documentation structure
Comprehensive project planning standards for plans/ directory including folder structure (ideas/, backlog/, in-progress/, done/), stage-aware naming convention (done uses YYYY-MM-DD__identifier/; backlog and in-progress use identifier/ with no date prefix), five-document file organization (README.md, brd.md, prd.md, tech-docs.md, delivery.md for multi-file default; single README.md for trivially-small single-file exception), BRD/PRD content-placement rules, Gherkin acceptance criteria, and the mandatory structured multiple-choice grilling gates (pre-write and post-write) for resolving design decisions with the user. Essential for creating structured, executable project plans.
Trunk Based Development workflow - all development on main branch with small frequent commits, minimal branching, and continuous integration. Covers when branches are justified (exceptional cases only), commit patterns, feature flag usage for incomplete work, environment branch rules (deployment only), and AI agent default behavior (the repo-wide default delivery mode is `worktree-to-pr` -- a short-lived plan branch in a disposable worktree pushed to a draft PR; direct push to main remains available as an explicit selection). Essential for understanding repository git workflow and keeping branches short-lived
Workflow pattern standards for creating multi-agent orchestrations including YAML frontmatter (name, description, tags, status, agents, parameters), execution phases (sequential/parallel/conditional), agent coordination patterns, and Gherkin success criteria. Essential for defining reusable, validated workflow processes.
Common software development workflow patterns shared across all language developer agents
Three-stage content quality workflow pattern (Maker creates, Checker validates, Fixer remediates) with detailed execution workflows. Use when working with content quality workflows, validation processes, audit reports, or implementing maker/checker/fixer agent roles.
| name | swe-developing-frontend-ui |
| description | UI development skill covering design token usage, shadcn/ui + Radix composition patterns, accessibility requirements, anti-patterns catalog, and brand context for `crud-fe-ts-nextjs` and `crud-fs-ts-nextjs`. Auto-loads when working on TSX components, CSS, or UI design tasks. |
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.
.tsx component files in apps/*/src/components/globals.css or Tailwind configurationlibs/ts-ui/libs/ts-ui-tokens/Consult these reference docs for detailed guidance on specific topics:
bg-primary, text-muted-foreground, border-border (not hardcoded colors)React.ComponentProps<"element"> — not React.forwardRefradix-ui unified package — not @radix-ui/react-slot individual packages; use Slot.Root from unifieddata-slot="component-name" on every component root elementfocus-visible: — not focus: (keyboard-only focus rings)cn() from shared lib — clsx + tailwind-merge for class composition.variants.ts for reuse.dark counterpart — verify contrast in both modesmd:, lg: prefixes!important — use @layer specificity or Tailwind modifiers@apply outside @layer base — defeats utility-first purposestyle={{}} in production — use Tailwind utilitiesfocus: without visible — always focus-visible: for keyboard userstransition-all — specify explicit properties: transition-colors, transition-opacityease-out or custom cubic-bezierfont-family — use next/font for optimization