القائمة
Curated design systems, component libraries, and UI resources for building professional interfaces. Companion to ui-ux-pro-max for implementation guidance.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Plan, reason, and verify across multiple levels using multi-step reasoning, tree-of-thought, and structured agent workflows.
Detect and repair security vulnerabilities or operational errors in the agent's own code and environment without manual intervention.
Generate and apply complete design systems from text descriptions or visual examples using AI and modern tooling.
Adapt user interfaces automatically based on device, viewport, user preferences, and contextual signals.
Build and query knowledge graphs automatically to capture relationships between entities, concepts, and project artifacts.
Run agent tasks in isolated, sandboxed environments to prevent malicious or untrusted code from affecting the host system.
| name | design-resources-library |
| description | Curated design systems, component libraries, and UI resources for building professional interfaces. Companion to ui-ux-pro-max for implementation guidance. |
Curated collection of production-ready UI libraries, component systems, design resources, and implementation guidance. This skill works as a team member with ui-ux-pro-max:
Use this skill when the task involves:
1. ui-ux-pro-max: decide product type, style, color palette, typography
2. design-resources-library: pick the best library/stack and components
3. Combine: implement the design using the chosen library
| Component | Best Library | Use Case |
|---|---|---|
| Button | shadcn/ui | Primary/secondary CTAs; Tailwind customization |
| Button Group | Material UI | Grouped related actions |
| Icon | shadcn/ui + Lucide | Consistent iconography |
| Component | Best Library | Use Case |
|---|---|---|
| Table | Ant Design | Data-heavy admin with sorting/filtering |
| Card | shadcn/ui | Content containers; dashboards |
| Badge | shadcn/ui | Status indicators; counts |
| Statistic | Ant Design | KPI numbers and metrics |
| Component | Best Library | Use Case |
|---|---|---|
| Input/Textarea | shadcn/ui | Standard form fields |
| Select | shadcn/ui | Dropdown selection |
| Date Picker | Ant Design | Date/time selection |
| Form (validation) | shadcn/ui + React Hook Form | Complete forms with validation |
| File Upload | Ant Design | File attachments |
| Component | Best Library | Use Case |
|---|---|---|
| Menu | shadcn/ui | Primary navigation |
| Tabs | shadcn/ui | Content switching |
| Breadcrumb | shadcn/ui | Hierarchical path |
| Drawer | shadcn/ui | Side panel navigation |
| Stepper | shadcn/ui | Multi-step workflows |
| Component | Best Library | Use Case |
|---|---|---|
| Dialog/Modal | shadcn/ui | Overlay dialogs |
| Toast | shadcn/ui Sonner | Non-blocking notifications |
| Alert | shadcn/ui | Important messages |
| Progress | shadcn/ui | Loading indicators |
| Skeleton | shadcn/ui | Content loading placeholders |
| Component | Best Library | Use Case |
|---|---|---|
| Grid/Layout | Material UI | Complex responsive layouts |
| Card | shadcn/ui | Content containers |
| Accordion | shadcn/ui | Collapsible sections |
| Resizable | shadcn/ui | Resizable panels |
| Library | Best For | Stack | Style |
|---|---|---|---|
| shadcn/ui | Modern accessible apps; Tailwind-first | React/Next.js | Customizable minimal |
| Ant Design | Enterprise dashboards; data-heavy apps | React | Enterprise polished |
| Material UI | Google Material Design; rapid prototyping | React | Material Design |
| Chakra UI | Developer-friendly; accessible defaults | React | Clean minimal |
| Mantine | Full-featured apps with hooks | React | Modern functional |
| HeroUI | Next.js apps with animations | React/Next.js | Modern Tailwind |
| Radix UI | Custom headless primitives | React | Unstyled accessible |
| daisyUI | Tailwind class-based components | HTML/React/Vue | Tailwind |
| Project Type | Recommended Design System |
|---|---|
| Enterprise admin | Ant Design / Carbon Design System |
| Modern SaaS | shadcn/ui / HeroUI / Primer |
| Google-style app | Material UI / Material Design 3 |
| Apple ecosystem | Apple Human Interface Guidelines |
| Shopify-style | Polaris |
| Microsoft-style | Fluent UI |
| IBM-style | Carbon Design System |
| Adobe-style | Spectrum |
See data/resources.csv for a curated list across:
When both skills are active, follow this sequence:
Start with ui-ux-pro-max to define:
Then use design-resources-library to choose:
Implement using the combination of design rules and library components.
User: "Build a SaaS analytics dashboard with Next.js."
Response:
User: "Build a SaaS analytics dashboard with Next.js."
Bad response: mix Material UI with shadcn/ui in the same project without a clear reason. Stick to one library per project.
data/components.csv — component selection guidedata/design-systems.csv — library comparisondata/resources.csv — categorized design resourcesui-ux-pro-max skill — design rules, styles, palettes, UX guidelines