القائمة
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.