القائمة
Enforce a configuration-driven design system when generating UI. Ensures consistent spacing, colors, typography, dark mode, interactions, and accessibility across all AI-generated components.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Document technical decisions as Architecture Decision Records (ADRs) with context, options considered, and rationale.
Solve a hard problem by trying multiple approaches in parallel using isolated git worktrees. Each attempt runs in its own branch, and the best solution is selected. Use for complex refactors, tricky bugs, or architectural decisions where multiple strategies could work.
Drafts and refines product requirement documents (PRD) for software projects—problem statement, goals, personas, scope, functional/non-functional requirements, user stories, acceptance criteria, risks, and rollout. Use when the user asks for a PRD, product requirements, feature specification, scope doc, "what to build," prioritization framing, or before breaking work into implementation tasks.
Automatically persist useful context — research, decisions, learnings, templates — to workspace files so knowledge survives across conversations.
| name | using-ui-stack |
| description | Enforce a configuration-driven design system when generating UI. Ensures consistent spacing, colors, typography, dark mode, interactions, and accessibility across all AI-generated components. |
| user-invocable | true |
Apply a structured design system to every UI component you generate. This prevents inconsistent padding, mismatched colors, and forgotten hover states.
Follow these rules for every component you build:
Use multiples of 8 for all spacing (padding, margin, gap):
4px — tight internal padding only8px — inline gaps, icon spacing16px — standard padding, card gaps24px — section padding32px — large section gaps48px / 64px — page-level spacing#000) for dark mode — use slate-950 or similartext-xs: 12px / 16px
text-sm: 14px / 20px
text-base: 16px / 24px
text-lg: 18px / 28px
text-xl: 20px / 28px
text-2xl: 24px / 32px
text-3xl: 30px / 36px
text-4xl: 36px / 40px
font-semibold or font-boldfont-normal, line-height 1.5–1.75white → slate-950, not blackslate-900 → slate-100slate-200 → slate-800Every interactive element must have:
ring-2 ring-offset-2)cursor-not-allowedbutton not div, nav, main, etc.)prefers-reduced-motion for animationsease-out for entrances, ease-in for exitsmotion-safe: or check prefers-reduced-motiondropdown: z-10
sticky: z-20
overlay: z-30
modal: z-40
toast: z-50
tooltip: z-60
ui-stack config or design tokens