مهارات الوكلاء

• frontend-design anthropics/skills

  Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

  ٩٥٣٬٩٦٧ ناجح npx skills add anthropics/skills --skill frontend-design

• codebase-design mattpocock/skills

  Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

  ٧٣٤٬٤٦١ ناجح npx skills add mattpocock/skills --skill codebase-design

• design-mobile-apps designed-by-ai/skills

  Use when the user wants to design a mobile app or UI screens, when they mention their Sleek (sleek.design) projects, or when implementing Sleek designs in code (HTML, React Native, SwiftUI).

  ٦٣٧٬٢٤٤ ناجح npx skills add designed-by-ai/skills --skill design-mobile-apps

• design-taste-frontend leonxlnx/taste-skill

  Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

  ٥٦٥٬٩٨٩ ناجح npx skills add leonxlnx/taste-skill --skill design-taste-frontend

• high-end-visual-design leonxlnx/taste-skill

  Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

  ٤١١٬٨٦٢ ناجح npx skills add leonxlnx/taste-skill --skill high-end-visual-design

• ui-ux-pro-max nextlevelbuilder/ui-ux-pro-max-skill

  UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

  ٣٨٢٬٩٥١ ناجح npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

• gpt-taste leonxlnx/taste-skill

  Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

  ٣٥٦٬٢٦٣ ناجح npx skills add leonxlnx/taste-skill --skill gpt-taste

• stitch-design-taste leonxlnx/taste-skill

  Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

  ٣٥٣٬٧٥١ ناجح npx skills add leonxlnx/taste-skill --skill stitch-design-taste

• emil-design-eng emilkowalski/skills

  This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

  ٣٢٥٬١٦١ ناجح npx skills add emilkowalski/skills --skill emil-design-eng

• design-taste-frontend-v1 leonxlnx/taste-skill

  The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

  ٢٨٩٬٢٧٦ ناجح npx skills add leonxlnx/taste-skill --skill design-taste-frontend-v1

• figma heygen-com/hyperframes

  Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

  ٢٠٩٬٥٣١ ناجح npx skills add heygen-com/hyperframes --skill figma

• computer-use stablyai/orca

  Drives the GUI of a visible local app window through `orca computer`: accessibility tree, clicks, typing, menus, dialogs, and screenshots in native apps and external browser windows (Chrome, Edge, Safari) or webviews. Prefer a programmatic path (shell, filesystem, git, HTTP, existing CLIs) whenever it can complete the task. Use only when a visible window needs GUI control those cannot reach. Do not use for Orca's embedded browser (`orca-cli`).

  ١٩١٬٢١٠ ناجح npx skills add stablyai/orca --skill computer-use

• apple-design emilkowalski/skills

  Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

  ١٨٧٬٣٣٣ ناجح npx skills add emilkowalski/skills --skill apple-design

• canvas-design anthropics/skills

  Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

  ١١٣٬٦٤٠ ناجح npx skills add anthropics/skills --skill canvas-design

• brand-guidelines anthropics/skills

  Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

  ٩٩٬٦٣٢ ناجح npx skills add anthropics/skills --skill brand-guidelines

• tailwind-design-system wshobson/agents

  Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

  ٦٧٬١١٦ ناجح npx skills add wshobson/agents --skill tailwind-design-system

• frontend-design anthropics/claude-code

  Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

  ٦١٬٤٣٣ ناجح npx skills add anthropics/claude-code --skill frontend-design

• accessibility addyosmani/web-quality-skills

  Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

  ٥٨٬٧١٤ ناجح npx skills add addyosmani/web-quality-skills --skill accessibility

• frontend-design pbakaus/impeccable

  ٥٣٬١٧٧ ناجح npx skills add pbakaus/impeccable --skill frontend-design

• golang-design-patterns samber/cc-skills-golang

  Idiomatic Golang design patterns — functional options, constructor APIs, `init()` and global-state avoidance, enums, panic vs error decisions, resource management and lifecycle, graceful shutdown, timeouts and retries, streaming and iterators, and architecture styles (clean, hexagonal, DDD, flat). Apply when choosing between architectural patterns, implementing functional options, designing constructor APIs, setting up graceful shutdown, applying resilience patterns, or asking which idiomatic Go pattern fits a specific problem. Not for wiring a DI container or comparing DI libraries (→ See `samber/cc-skills-golang@golang-dependency-injection` skill), nor for error wrapping, `errors.Is`/`As`, or logging mechanics (→ See `samber/cc-skills-golang@golang-error-handling` skill).

  ٣٨٬١٥٣ ناجح npx skills add samber/cc-skills-golang --skill golang-design-patterns

• design-system nextlevelbuilder/ui-ux-pro-max-skill

  Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

  ٣٤٬٤٨٩ ناجح npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

• design nextlevelbuilder/ui-ux-pro-max-skill

  Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

  ٣٣٬٣٠٠ ناجح npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design

• brand nextlevelbuilder/ui-ux-pro-max-skill

  Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

  ٣١٬٩٧٦ ناجح npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand

• web-quality-audit addyosmani/web-quality-skills

  Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".

  ٢٩٬٤٢٥ ناجح npx skills add addyosmani/web-quality-skills --skill web-quality-audit

• api-design-principles wshobson/agents

  Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.

  ٢٩٬٢٦٠ ناجح npx skills add wshobson/agents --skill api-design-principles

• convex-design get-convex/agent-skills

  Design and build reactive, type-safe, production-grade backends on Convex. Covers schema, queries/mutations/actions, indexes, auth, file storage, scheduling, real-time multiplayer, mobile backends, and LLM/agent workflows on Convex's one-platform stack.

  ٢٨٬٩٩٣ ناجح npx skills add get-convex/agent-skills --skill convex-design

• interface-design dammyjay93/interface-design

  Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.

  ٢٨٬٥٠٨ ناجح npx skills add dammyjay93/interface-design --skill interface-design

• better-typography jakubkrehel/skills

  Focuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.

  ٢٨٬٠٠٩ ناجح npx skills add jakubkrehel/skills --skill better-typography

• postgresql-table-design wshobson/agents

  Use this skill when designing or reviewing a PostgreSQL-specific schema. Covers best-practices, data types, indexing, constraints, performance patterns, and advanced features

  ٢٦٬٦٧٥ ناجح npx skills add wshobson/agents --skill postgresql-table-design

• better-interface jakubkrehel/skills

  Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.

  ٢٤٬٣٤٦ ناجح npx skills add jakubkrehel/skills --skill better-interface

• better-accessibility jakubkrehel/skills

  Helps your project comply with accessibility standards and best practices.

  ٢٣٬٨٢٥ ناجح npx skills add jakubkrehel/skills --skill better-accessibility

• mobile-android-design wshobson/agents

  Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.

  ٢٣٬٦١٠ ناجح npx skills add wshobson/agents --skill mobile-android-design

• mobile-ios-design wshobson/agents

  Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.

  ٢٢٬٧٧٤ ناجح npx skills add wshobson/agents --skill mobile-ios-design

• python-design-patterns wshobson/agents

  Python design patterns including KISS, Separation of Concerns, Single Responsibility, and composition over inheritance. Use this skill when designing a new service or component from scratch and choosing how to layer responsibilities, when refactoring a God class or monolithic function that has grown too large, when deciding whether to add a new abstraction or live with duplication, when evaluating a pull request for structural issues like tight coupling or leaking internal types, when choosing between inheritance and composition for a new class hierarchy, or when a codebase is becoming hard to test because of entangled I/O and business logic.

  ٢١٬٧٣٩ ناجح npx skills add wshobson/agents --skill python-design-patterns

• baseline-ui ibelick/ui-skills

  Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

  ٢١٬٦١٧ ناجح npx skills add ibelick/ui-skills --skill baseline-ui

• responsive-design wshobson/agents

  Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.

  ١٩٬٨٤٦ ناجح npx skills add wshobson/agents --skill responsive-design

• feature-sliced-design feature-sliced/skills

  Official Feature-Sliced Design (FSD) v2.1 skill for applying the methodology to frontend projects. Use when the task involves organizing project structure with FSD layers, deciding where code belongs, placing static assets (images, icons, fonts, PDFs), grouping closely related slices, defining public APIs and import boundaries, resolving cross-imports or evaluating the @x pattern, deciding whether to create or remove an entity, evaluating whether the entities layer is needed at all, deciding where page layouts belong or whether to use the widgets layer (discouraged), deciding whether logic should remain local or be extracted, migrating from FSD v2.0 or a non-FSD codebase, integrating FSD with frameworks (Next.js App Router and Pages Router, React Router, Nuxt, Vite, Astro), or implementing common patterns such as authentication, API handling, Redux, and TanStack Query (React Query) within FSD.

  ١٩٬٧٢٢ ناجح npx skills add feature-sliced/skills --skill feature-sliced-design

• fixing-accessibility ibelick/ui-skills

  Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

  ١٩٬٦٢٥ ناجح npx skills add ibelick/ui-skills --skill fixing-accessibility

• web-design-guidelines antfu/skills

  ١٩٬٣٤٠ ناجح npx skills add antfu/skills --skill web-design-guidelines

• taste-design google-labs-code/stitch-skills

  Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

  ١٨٬٩٠٦ ناجح npx skills add google-labs-code/stitch-skills --skill taste-design

• tailwind-css-patterns giuseppe-trisciuoglio/developer-kit

  Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

  ١٧٬٢٢٨ ناجح npx skills add giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns

• frontend-design anthropics/claude-plugins-official

  Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

  ١٥٬٦٥٢ ناجح npx skills add anthropics/claude-plugins-official --skill frontend-design

• interaction-design wshobson/agents

  Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

  ١٥٬١٨٣ ناجح npx skills add wshobson/agents --skill interaction-design

• design-system-patterns wshobson/agents

  Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.

  ١٥٬١٢٨ ناجح npx skills add wshobson/agents --skill design-system-patterns

• kpi-dashboard-design wshobson/agents

  Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios; designing an operations center with live service health and request throughput; creating a cohort retention analysis view for a product team; or debugging a dashboard where metrics contradict each other due to inconsistent calculation methodology.

  ١٥٬٠٦٤ ناجح npx skills add wshobson/agents --skill kpi-dashboard-design

• react-native-design wshobson/agents

  Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.

  ١٤٬٨٩٢ ناجح npx skills add wshobson/agents --skill react-native-design

• motion-design lottiefiles/motion-design-skill

  Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.

  ١٤٬٧٢٦ ناجح npx skills add lottiefiles/motion-design-skill --skill motion-design

• accessibility-compliance wshobson/agents

  Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.

  ١٣٬٩٢٦ ناجح npx skills add wshobson/agents --skill accessibility-compliance

• youtube-thumbnail-design its-a-skill-issue/superpowers

  YouTube thumbnail design with specific dimensions, contrast rules, and mobile preview optimization. Covers safe zones, text placement, face expression psychology, and A/B testing. Use for: YouTube thumbnails, video cover images, click-through optimization. Triggers: youtube thumbnail, thumbnail design, video thumbnail, click through rate, ctr optimization, youtube cover, video cover image, thumbnail maker, thumbnail tips, youtube design, video preview image

  ١٣٬٤٥٥ ناجح npx skills add its-a-skill-issue/superpowers --skill youtube-thumbnail-design

• character-design-sheet its-a-skill-issue/superpowers

  Character consistency across AI-generated images with reference sheets and LoRA techniques. Covers turnaround views, expression sheets, color palettes, and style consistency tricks. Use for: character design, game art, illustration, animation, comics, visual novels. Triggers: character design, character sheet, character consistency, character reference, turnaround sheet, expression sheet, character art, consistent character, character concept, reference sheet, character creation, oc design, character bible

  ١٣٬٤١٦ ناجح npx skills add its-a-skill-issue/superpowers --skill character-design-sheet

• deployment-pipeline-design wshobson/agents

  Design multi-stage CI/CD pipelines with approval gates, security checks, and deployment orchestration. Use this skill when designing zero-downtime deployment pipelines, implementing canary rollout strategies, setting up multi-environment promotion workflows, or debugging failed deployment gates in CI/CD.

  ١٣٬١٧٦ ناجح npx skills add wshobson/agents --skill deployment-pipeline-design

• visual-design-foundations wshobson/agents

  Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.

  ١٢٬٨٦١ ناجح npx skills add wshobson/agents --skill visual-design-foundations

• web-component-design wshobson/agents

  Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.

  ١٢٬٦٠٥ ناجح npx skills add wshobson/agents --skill web-component-design

• character-design-sheet bankai-skills/superpowers

  Character consistency across AI-generated images with reference sheets and LoRA techniques. Covers turnaround views, expression sheets, color palettes, and style consistency tricks. Use for: character design, game art, illustration, animation, comics, visual novels. Triggers: character design, character sheet, character consistency, character reference, turnaround sheet, expression sheet, character art, consistent character, character concept, reference sheet, character creation, oc design, character bible

  ١٢٬٢٨٩ ناجح npx skills add bankai-skills/superpowers --skill character-design-sheet

• wcag-audit-patterns wshobson/agents

  Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.

  ١١٬٨٨٩ ناجح npx skills add wshobson/agents --skill wcag-audit-patterns

• api-design affaan-m/ecc

  REST API design patterns including resource naming, status codes, pagination, filtering, error responses, versioning, and rate limiting for production APIs. Use when designing or reviewing REST endpoints, resource names, status codes, pagination, or versioning.

  ١١٬٨٣٨ ناجح npx skills add affaan-m/ecc --skill api-design

• expo-design-system expo/skills

  Framework (OSS). Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when creating or organizing theme files and design tokens (theme.ts / theme/), extending an existing theme or styling library (NativeWind, Tamagui, Restyle, Unistyles) in its own idiom, standardizing styles so screens (including AI-generated ones) look consistent and polished, fixing an app that looks AI-generated or generic instead of native (the named native-slop tells), building an in-app component library, or auditing an app for design-system drift (hardcoded colors, spacing, fonts). For platform styling specifics (semantic colors, HIG rules, native controls) use expo-native-ui; for folder layout of a new app use expo-project-structure.

  ١١٬٧١٩ ناجح npx skills add expo/skills --skill expo-design-system

• writing-design-docs riekelt/technical-writer

  Use when writing a proposal, RFC, design document, spec, or migration plan - anything that argues for a change, records a design, or asks readers for input on one. Encodes the proposal skeleton, the Why & What decision box, and the completeness checks. Use whenever a change needs arguing or scoping in writing, even if the user just says "write up the approach".

  ١١٬٧١١ ناجح npx skills add riekelt/technical-writer --skill writing-design-docs

• liquid-glass-design affaan-m/ecc

  iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit. Use when building iOS 26 Liquid Glass UI in SwiftUI, UIKit, or WidgetKit.

  ١٠٬٦٤٧ ناجح npx skills add affaan-m/ecc --skill liquid-glass-design

• mobile-app-ui-design ceorkm/mobile-app-ui-design

  Design high-quality mobile app UI/UX screens, flows, and components. Use this skill whenever the user asks to design a mobile app screen, create app mockups, build mobile UI components, improve an existing mobile app design, create onboarding flows, design mobile navigation, or requests any mobile-first interface work. Also trigger when the user mentions app design, mobile UI, mobile UX, screen design, app mockups, wireframes, or wants to build React Native / Flutter / SwiftUI style interfaces as visual prototypes. Even if the user just says "design an app" or "make this screen look better", use this skill.

  ١٠٬٢٧٢ ناجح npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design

• limrun-ios-simulator limrun-inc/skills

  Drive an app running on a Limrun cloud iOS simulator: launch, tap, type, read the accessibility element tree, read app logs and simulator syslog, screenshot, record video, connect the app to local services, play a video file as the camera, set the clipboard, read and write user defaults, post notifications, and run timed action chains. Use after a build (from any builder) when the user wants to see, test, or interact with their app on a simulator, or says 'show me a screenshot', 'tap', 'run the UI test', 'record a video', 'read the logs', 'connect localhost', 'reach my local server from the simulator', 'mock the camera', 'paste into the app', 'change the language', 'simulate Face ID', or 'launch on simulator'. To build the app first, use limrun-xcode-bazel (Bazel workspaces) or limrun-xcode (xcodebuild projects).

  ٩٬٩١٦ ناجح npx skills add limrun-inc/skills --skill limrun-ios-simulator

• dogfood callstack/agent-device

  Systematically explore and test a mobile app on iOS/Android with agent-device to find bugs, UX issues, and other problems. Use when asked to dogfood, QA, exploratory test, find issues, bug hunt, or test this app on mobile.

  ٩٬٦٩٣ ناجح npx skills add callstack/agent-device --skill dogfood

• stitch::generate-design google-labs-code/stitch-skills

  Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities.

  ٩٬٥٩١ ناجح npx skills add google-labs-code/stitch-skills --skill stitch::generate-design

• stitch::extract-design-md google-labs-code/stitch-skills

  Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."

  ٩٬٤٢٢ ناجح npx skills add google-labs-code/stitch-skills --skill stitch::extract-design-md

• flutter-dart-code-review affaan-m/ecc

  Library-agnostic Flutter/Dart code review checklist covering widget best practices, state management patterns (BLoC, Riverpod, Provider, GetX, MobX, Signals), Dart idioms, performance, accessibility, security, and clean architecture. Use when reviewing Flutter or Dart code, whatever state management library the project uses.

  ٩٬٠٥٧ ناجح npx skills add affaan-m/ecc --skill flutter-dart-code-review

• flutter-improving-accessibility flutter/agent-plugins

  ٨٬٣٥٥ ناجح npx skills add flutter/agent-plugins --skill flutter-improving-accessibility

• accessibility affaan-m/ecc

  Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard navigation, or screen-reader support.

  ٨٬٢٠٤ ناجح npx skills add affaan-m/ecc --skill accessibility

• figma-use figma/mcp-server-guide

  **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

  ٧٬٨٧٧ ناجح npx skills add figma/mcp-server-guide --skill figma-use

• diagram-design cathrynlavery/diagram-design

  Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap, heatmap, bar, waterfall, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, or database schema diagrams as HTML/SVG/PNG, with .drawio and .excalidraw import support, plus lifecycle phase maps and onboarding guidance.

  ٧٬٧٨٧ ناجح npx skills add cathrynlavery/diagram-design --skill diagram-design

• web-design-engineer conardli/garden-skills

  Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact. Not for back-end, CLI, non-visual coding, source-to-longform article conversion, or narration-driven click-through video presentations.

  ٧٬٦٧٦ ناجح npx skills add conardli/garden-skills --skill web-design-engineer

• design-agent crewaiinc/skills

  CrewAI agent design and configuration. Use when creating, configuring, or debugging crewAI agents — choosing role/goal/backstory, selecting LLMs, assigning tools, tuning max_iter/max_rpm/max_execution_time, enabling planning/code execution/delegation, setting up knowledge sources, using guardrails, or configuring agents in YAML vs code.

  ٧٬٥٠٠ ناجح npx skills add crewaiinc/skills --skill design-agent

• design-task crewaiinc/skills

  CrewAI task design and configuration. Use when creating, configuring, or debugging crewAI tasks — writing descriptions and expected_output, setting up task dependencies with context, configuring output formats (output_pydantic, output_json, output_file), using guardrails for validation, enabling human_input, async execution, markdown formatting, or debugging task execution issues.

  ٧٬٣٥٦ ناجح npx skills add crewaiinc/skills --skill design-task

• bencium-innovative-ux-designer bencium/bencium-marketplace

  Develop an independent visual language and turn the human-chosen direction into a production-ready graphic, brand, campaign, publication, web, or product system. Use when originality and differentiation matter enough to escape generic AI and Big Tech aesthetics. Guides a minimum-evidence start, ten isolated typography-led HTML design directions made only from type, color, and space, visual-first human judgement, explicit commitment, and concrete Round 2 production. Do not use for routine UI fixes, small components, or applying an existing design system.

  ٦٬٧٧٤ ناجح npx skills add bencium/bencium-marketplace --skill bencium-innovative-ux-designer

• frontend-design-direction affaan-m/ecc

  Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

  ٦٬٦٠٧ ناجح npx skills add affaan-m/ecc --skill frontend-design-direction

• bmad-correct-course bmad-code-org/bmad-method

  Assess the impact of a significant change during sprint execution across the PRD, epics, architecture, and UX documents, and produce a sprint change proposal. Use when the user says "correct course" or "propose sprint change"

  ٦٬٣٧٢ ناجح npx skills add bmad-code-org/bmad-method --skill bmad-correct-course

• bmad-ux bmad-code-org/bmad-method

  Capture the user's UX vision in two documents: DESIGN.md for how the product looks and EXPERIENCE.md for how it behaves. Use when the user says "lets create UX design" or "create UX specifications" or "help me plan the UX"

  ٦٬٢٩٣ ناجح npx skills add bmad-code-org/bmad-method --skill bmad-ux

• frontend-design smithery.ai

  Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

  ٦٬٢٨٧ ناجح npx skills add smithery.ai --skill frontend-design

• sales-comp-design mbfinotti/sales-skills

  Designs the sales compensation plan structure - pay mix (base/variable split) set by role influence, performance measures under the rule of three, accelerator and decelerator curves, SPIF overlays, draws, and role plans for SDR, AE, manager, overlay, and CSM seats. A macro annual exercise for sales leadership, RevOps, and finance, covering B2B SaaS and commission-heavy B2C. Use whenever the user mentions commission plans, OTE, accelerators, clawbacks, SPIFs, capping commissions, or "how should we pay our reps", even without the words comp design. Do NOT use for deriving the quota the plan pays against (mbfinotti/sales-skills@sales-quota-setting) or structuring the org (mbfinotti/sales-skills@sales-org-structure).

  ٦٬١٠١ ناجح npx skills add mbfinotti/sales-skills --skill sales-comp-design

• motion-foundations affaan-m/ecc

  Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this. Use when setting up motion tokens, spring presets, reduced-motion handling, or SSR-safe animation in React or Next.js.

  ٥٬٨٦٨ ناجح npx skills add affaan-m/ecc --skill motion-foundations

• design-systems-slds-apply forcedotcom/sf-skills

  Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons. Use when building any UI that needs SLDS, choosing between Lightning Base Components and SLDS Blueprints, applying styling hooks for theming, using utility classes for layout and spacing, or selecting icons. Triggers include "build a modal", "create a form", "data table", "SLDS styling", "style with hooks", "add an icon".

  ٥٬٧٩٦ ناجح npx skills add forcedotcom/sf-skills --skill design-systems-slds-apply

• game-ui-ux gamedev-skills/awesome-gamedev-agent-skills

  Design and build game UI/UX — HUDs, menus, and overlays — that survive every screen: anchor- based responsive layout, resolution/aspect scaling and safe areas, keyboard/gamepad focus navigation, a screen/menu state stack, and event-driven (not polled) HUD updates. Engine- neutral patterns that pair with the detected engine's UI skill. Use when the user mentions HUD, health bar, main menu, pause menu, settings screen, UI layout, anchors, UI scaling, aspect ratio, safe area, controller/keyboard menu navigation, or wiring UI to game state.

  ٥٬٧٣١ ناجح npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill game-ui-ux

• design-tokens julianoczkowski/designer-skills

  Generate a design tokens file (CSS variables or Tailwind config) based on a chosen aesthetic philosophy, with light and dark mode palettes, spacing scale, type ramp, and component-level tokens. Use when starting a new project, establishing a visual system, setting up tokens, or mentions "tokens" or "design system".

  ٥٬٦٥٦ ناجح npx skills add julianoczkowski/designer-skills --skill design-tokens

• design-systems-slds-validate forcedotcom/sf-skills

  Audit Lightning Web Components for SLDS design-system compliance and produce a scored quality report. Runs the SLDS linter and analyzes CSS for theming hook usage and pairing, scoring SLDS findings across categories into an overall grade. Use when asked to "score my component's SLDS", "SLDS scorecard", "SLDS quality report", "audit SLDS compliance", "how good is my SLDS", "check SLDS quality", "rate my SLDS styling", "evaluate my component's SLDS", "is this component's SLDS ready to ship?", "look at my LWC for SLDS issues", "audit SLDS before I submit", "review my component's SLDS before code review", or any time a user wants an SLDS quality assessment or SLDS production-readiness check on an LWC. Not for fixing violations (use design-systems-slds2-migrate), building new components (use design-systems-slds-apply), or accessibility/WCAG/ARIA audits (use experience-accessibility-validate).

  ٥٬٦٢٦ ناجح npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate

• frontend-design cline/skills

  Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

  ٥٬٥٠١ ناجح npx skills add cline/skills --skill frontend-design

• figma-generate-design figma/mcp-server-guide

  Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

  ٥٬٣٨٧ ناجح npx skills add figma/mcp-server-guide --skill figma-generate-design

• frontend-design julianoczkowski/designer-skills

  Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional attention to aesthetic details and creative choices that avoid generic AI output.

  ٥٬٣٠٩ ناجح npx skills add julianoczkowski/designer-skills --skill frontend-design

• react-patterns affaan-m/ecc

  React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

  ٥٬٢٧٣ ناجح npx skills add affaan-m/ecc --skill react-patterns

• ui-ux-pro-max nexu-io/open-design

  Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in OpenDesign.

  ٥٬١٩٦ ناجح npx skills add nexu-io/open-design --skill ui-ux-pro-max

• frontend-a11y affaan-m/ecc

  Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building or reviewing forms, modals, dropdowns, tooltips, or tabs, fixing a11y lint or code-review findings, or wiring up keyboard navigation and focus management.

  ٥٬١٨٩ ناجح npx skills add affaan-m/ecc --skill frontend-a11y

• react-testing affaan-m/ecc

  React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.

  ٥٬١٦٧ ناجح npx skills add affaan-m/ecc --skill react-testing

• design-brief julianoczkowski/designer-skills

  Create a design brief through an interactive interview, codebase exploration, and experience design decisions. Saved as a markdown file in the project. Use when user wants to write a design brief, plan a new feature or page, define a UI direction, or mentions "brief".

  ٥٬١٦٥ ناجح npx skills add julianoczkowski/designer-skills --skill design-brief

• design-flow julianoczkowski/designer-skills

  Run the full design-to-build workflow as a guided sequence. Orchestrates all designer skills in order, from grilling through review. Use when user wants to go through the complete design process, start a project from scratch, run the full flow, or mentions "design flow" or "full workflow".

  ٥٬١١١ ناجح npx skills add julianoczkowski/designer-skills --skill design-flow

• design-critique anthropics/knowledge-work-plugins

  Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.

  ٤٬٨٥٧ ناجح npx skills add anthropics/knowledge-work-plugins --skill design-critique

• product-designer borghei/claude-skills

  Product design across UI/UX, design systems, prototyping, and user research. Use when creating user journey maps, building wireframes, defining design tokens and component systems, planning usability tests, or establishing design principles.

  ٤٬٧٩٢ ناجح npx skills add borghei/claude-skills --skill product-designer

• apple-design dickwu/apple-design-skill

  Cross-platform UI/UX design reviewer grounded in Apple's Human Interface Guidelines (123 pages pulled from developer.apple.com, including 57 component pages) plus a design-craft lens for distinctive, non-templated work. Use it to audit, review, critique, or improve any mobile app (iOS, Flutter, React Native) or desktop app (macOS, Tauri, Electron) design: design review, UI audit, HIG compliance, accessibility audit, dark mode, Liquid Glass or glassmorphism, navigation structure, iPhone Duo or foldable layouts, onboarding, forms, app icons, generative AI UX, or requests like "make this look less generic". Also use whenever the user shares screenshots, mockups, wireframes, Figma exports, or UI code and wants feedback, even if they only say "review my design" or "is this good UI". Works for SwiftUI, UIKit, AppKit, Flutter, React Native, Tauri, and Electron.

  ٤٬٧٣٥ ناجح npx skills add dickwu/apple-design-skill --skill apple-design

• premium-frontend-ui github/awesome-copilot

  A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.

  ٤٬٧٠٢ ناجح npx skills add github/awesome-copilot --skill premium-frontend-ui

• ui-ux-pro-max kimny1143/claude-code-template

  ٤٬٦٩٢ ناجح npx skills add kimny1143/claude-code-template --skill ui-ux-pro-max

• ios-accessibility dpearson2699/swift-ios-skills

  Build and audit SwiftUI, UIKit, and AppKit accessibility for VoiceOver, Voice Control, Switch Control, Full Keyboard Access, Dynamic Type, focus restoration, labels/traits/actions, traversal, custom rotors, NSAccessibility, XCTest checks, adaptive system preferences, and App Store accessibility declarations. Use when implementing accessible UI, fixing an accessibility audit, testing assistive-technology behavior, or substantiating App Store Accessibility Nutrition Labels.

  ٤٬٦٦٣ ناجح npx skills add dpearson2699/swift-ios-skills --skill ios-accessibility

• level-design gamedev-skills/awesome-gamedev-agent-skills

  Design and build playable levels — the blockout/whitebox-to-playable workflow, player metrics and grid layout, pacing and flow (tension/rest curve), gating and the critical path, and encounter design. Engine-neutral practice. Use when the user mentions level design, blockout/whitebox/greybox, level layout, level pacing, encounter design, or the critical path through a level.

  ٤٬٦٤٧ ناجح npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill level-design

• pixijs-accessibility pixijs/pixijs-skills

  Use this skill when adding screen reader and keyboard navigation to PixiJS v8 apps. Covers AccessibilitySystem options (enabledByDefault, debug, activateOnTab, deactivateOnMouseMove), per-container accessibility properties, shadow DOM overlay, mobile touch-hook activation. Triggers on: accessibility, a11y, screen reader, ARIA, keyboard navigation, tab order, AccessibilitySystem, accessibleTitle, accessibleHint, tabIndex, accessibleChildren.

  ٤٬٥٩٢ ناجح npx skills add pixijs/pixijs-skills --skill pixijs-accessibility

الأوصاف من كتابة المؤلفين أنفسهم وباللغة الإنجليزية. اقرأ شيفرة المهارة في مستودعها قبل تثبيتها.