القائمة
UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from package.json and Context7 integration for library docs.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
CRITICAL: MUST run for EVERY message. Detects agent, complexity, AND model automatically. Without this, tasks route to wrong agents and use wrong models, degrading quality and wasting tokens.
5 techniques for different problem types. Use when stuck or facing complex challenges.
Structured thinking process for complex analysis. Supports revision, branching, and dynamic adjustment.
Angular 17+ gotchas and decision criteria. Covers signals vs observables, standalone patterns, and common pitfalls Claude gets wrong.
Designs RESTful APIs with endpoint naming, versioning strategies (URL path, header-based), pagination (offset and cursor), error response schemas, and OpenAPI conventions. Use when the user asks about REST API design, creating endpoints, URL structure, API versioning, status codes, Swagger, or OpenAPI specs.
Fast bug fixes with root cause investigation + TDD. Enforces 'no fix without root cause' discipline and verification protocol. Without this skill, fixes are applied at symptoms instead of sources, and bugs return.
| name | design-expert |
| description | UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from package.json and Context7 integration for library docs. |
| autoInvoke | false |
| priority | medium |
| triggers | ["design component","design system","component library","Material UI","Tailwind","shadcn","responsive layout"] |
| user-invocable | false |
AI-consumed reference. Optimized for Claude to read during execution. Human-readable explanation: see docs/architecture/HIERARCHICAL_PLANNING.md or docs/getting-started/ depending on topic.
Component design, design system selection/setup, responsive layouts, Figma analysis.
principles[4]{principle}:
Atomic design: Atoms → Molecules → Organisms → Templates → Pages
Mobile-first: design for smallest then enhance
Design tokens: colors/spacing/typography as variables not magic values
Consistency: one library per project — don't mix
selection[4]{use_case,recommendation}:
Enterprise,"Ant Design, MUI, Mantine"
Modern Web,"Tailwind + shadcn/ui"
Mobile (RN),NativeWind
Prototyping,"Bootstrap, Tailwind"
Detect from package.json: @mui/material → MUI, antd → Ant Design, tailwindcss → Tailwind, @chakra-ui/react → Chakra, nativewind → NativeWind, @mantine/core → Mantine.
Use Context7 for current library docs. Add "use context7" to fetch version-specific API.
Mobile: <768px | Tablet: 768-1024px | Desktop: >1024px