메뉴
UX design decisions for diplicity-react — which controls to use, how to handle feedback, progressive disclosure, microcopy, accessibility, and interaction patterns. Load when building or reviewing any UI, making design decisions, or choosing between controls.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Django backend guidance for diplicity-react — views, serializers, models, permissions, constants, transactions, and codegen. Use when implementing or reviewing backend features, modifying the Django service, or debugging API behavior.
React frontend guidance for diplicity-react — components, state management, forms, data loading, routing, mock data, screenshots, and testing. Use when implementing or reviewing React features, refactoring frontend code, or taking PR screenshots.
Android Capacitor guidance for diplicity-react — build workflow, ADB setup, Firebase Cloud Messaging, Google Sign-In, keystore management, SHA-1 fingerprints, and Fastlane releases. Use when building, deploying, or debugging the Android app, or managing Android credentials.
iOS Capacitor guidance for diplicity-react — build workflow, Xcode project setup, APNs and ASC credentials, code signing strategy, Fastlane releases, and GitHub Actions. Use when building, deploying, or debugging the iOS app, or managing iOS credentials.
Metabase analytics guidance for diplicity-react — native SQL patterns for multi-hop joins, base64 encoding workflow, and schema gotchas in the diplicity production database. Use when writing Metabase queries or working around schema limitations.
Production debugging guidance for diplicity-react — Railway CLI token conflict pattern, pgweb queries, write safety rules, and staging environments. Use when debugging production issues, querying the production database, or deploying PR staging environments.
| name | ux-patterns |
| description | UX design decisions for diplicity-react — which controls to use, how to handle feedback, progressive disclosure, microcopy, accessibility, and interaction patterns. Load when building or reviewing any UI, making design decisions, or choosing between controls. |
| allowed-tools | Task, Read, Glob, Grep, Write, Edit, Bash, TodoWrite |
This skill encodes the design decisions for the diplicity-react application. These are not suggestions — they are resolved decisions to apply consistently across the codebase.
The stack is React 19 + Tailwind v4 + Radix UI (shadcn/ui style) + react-hook-form + Zod. No Chakra, no Semantic UI.
<Tabs> to drive form selection or binary choices — use radio buttons instead.<Dialog> or <AlertDialog> appears only for destructive confirmations or unexpected required information. Secondary content, player profiles, and settings go in a <Sheet>.<Select> is for 5+ options or long lists.Keep the Suspense wrapper — it is the correct pattern. Only the fallback changes: replace the empty-div fallback (<Suspense fallback={<div></div>}>) with a skeleton that matches the loaded content's dimensions exactly, so the swap causes no layout shift. See ./feedback-patterns.md for the full pattern.
Apply this to every new screen you build and to any existing screen you touch as part of the current issue. Do not fix screens the current PR is not already touching — boy scout rule.