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

• 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 -a opencode

• 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 -a opencode

• web-design-guidelines vercel-labs/agent-skills

  Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

  ٧٠٠٬٥٦٩ تحذيرات npx skills add vercel-labs/agent-skills --skill web-design-guidelines -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• faceless-explainer heygen-com/hyperframes

  Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

  ٣٥٥٬٥٢٤ تحذيرات npx skills add heygen-com/hyperframes --skill faceless-explainer -a opencode

• motion-graphics heygen-com/hyperframes

  A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

  ٣٥٥٬٢١٠ تحذيرات npx skills add heygen-com/hyperframes --skill motion-graphics -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• ios-design uizze.sh

  Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.

  ٢٢٣٬٠٩٧ غير مدقَّق npx skills add uizze.sh --skill ios-design -a opencode

• 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 -a opencode

• design-an-interface mattpocock/skills

  ٢٠٨٬٨٠٣ تحذيرات npx skills add mattpocock/skills --skill design-an-interface -a opencode

• 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 -a opencode

• 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 -a opencode

• extract-design-system arvindrk/extract-design-system

  Extract design primitives from a public website and generate starter token files for your project.

  ١٢٩٬٨٠٠ تحذيرات npx skills add arvindrk/extract-design-system --skill extract-design-system -a opencode

• 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 -a opencode

• 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 -a opencode

• playwright-best-practices currents-dev/playwright-best-practices-skill

  Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads/downloads, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup/teardown, test annotations (skip, fixme, slow), test tags (@smoke, @fast, @critical, filtering with --grep), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas/WebGL, service workers/PWA, test coverage, i18n/localization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.

  ٨٩٬٩٨١ فاشل npx skills add currents-dev/playwright-best-practices-skill --skill playwright-best-practices -a opencode

• higgsfield-brandkit higgsfield-ai/skills

  Create and extend complete visual brand systems through the Higgsfield CLI and bundled deterministic local tooling: palettes, SVG logo marks, typography, mockups, social graphics, packaging, signage, merchandise, posters, presentation decks, and editable PPTX/PDF brandbooks. Preserves official supplied assets, persists approvals locally, and regenerates only dependent outputs. Use when: "create a brand kit", "make a visual identity", "design a logo and brandbook", "apply this logo to branded assets", "make packaging or signage", or "extend our existing branding". Chain with higgsfield-generate for general image production and Marketing Studio brand-kits when importing website metadata for ads. NOT for unbranded image generation (use higgsfield-generate), product catalog photography (use higgsfield-product-photoshoot), website implementation (use higgsfield-websites), or native Figma/Canva/PSD/AI delivery.

  ٧٥٬٩١٣ تحذيرات npx skills add higgsfield-ai/skills --skill higgsfield-brandkit -a opencode

• 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 -a opencode

• design-doc-mermaid spillwavesolutions/design-doc-mermaid

  Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code. Default for GitHub wiki. Use when asked to create a diagram, generate mermaid, document architecture, or convert code to diagram. PlantUML is only for leftover types. Confluence needs PNG/SVG as well as the fence.

  ٦٣٬٩٣٨ تحذيرات npx skills add spillwavesolutions/design-doc-mermaid --skill design-doc-mermaid -a opencode

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

  Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

  ٦٢٬٩٤٠ تحذيرات npx skills add google-labs-code/stitch-skills --skill design-md -a opencode

• 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 -a opencode

• 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 -a opencode

• frontend-design pbakaus/impeccable

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

• huashu-design alchaincyf/huashu-design

  花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。

  ٤٧٬٧٦١ تحذيرات npx skills add alchaincyf/huashu-design --skill huashu-design -a opencode

• api-and-interface-design addyosmani/agent-skills

  Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

  ٤٦٬١٣٥ تحذيرات npx skills add addyosmani/agent-skills --skill api-and-interface-design -a opencode

• landing-page-design 101-skills/superpowers

  Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

  ٤٣٬٦٧٧ تحذيرات npx skills add 101-skills/superpowers --skill landing-page-design -a opencode

• character-design-sheet 101-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 101-skills/superpowers --skill character-design-sheet -a opencode

• competitor-teardown 101-skills/superpowers

  Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

  ٤٣٬٣٠٢ تحذيرات npx skills add 101-skills/superpowers --skill competitor-teardown -a opencode

• youtube-thumbnail-design 101-skills/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 101-skills/superpowers --skill youtube-thumbnail-design -a opencode

• brand-landingpage wshobson/agents

  Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens — use frontend-design instead.

  ٣٨٬٩٤٢ فاشل npx skills add wshobson/agents --skill brand-landingpage -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

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

  ٣٢٬٧٩٥ تحذيرات npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:design-system -a opencode

• firecrawl-website-design-clone firecrawl/firecrawl-workflows

  Extract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence. Use when the user wants colors, fonts, spacing, components, layout patterns, or brand/UI guidance from a website so AI agents can create new websites, clone a look, or build pages inspired by that design.

  ٣٢٬٧٠٢ تحذيرات npx skills add firecrawl/firecrawl-workflows --skill firecrawl-website-design-clone -a opencode

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

  ٣٢٬٤٩٥ فاشل npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:design -a opencode

• firecrawl-workflows firecrawl/firecrawl-workflows

  Run outcome-focused Firecrawl workflows that produce deliverables such as research reports, literature reviews over published papers, SEO audits, QA reports, lead lists, knowledge bases, website design systems, and other structured web-data artifacts. Use when the user wants Firecrawl to complete a business, marketing, product, or creative workflow rather than merely scrape a page or integrate API calls into code.

  ٣٢٬١٠٢ تحذيرات npx skills add firecrawl/firecrawl-workflows --skill firecrawl-workflows -a opencode

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

  ٣١٬٩٩٦ تحذيرات npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:brand -a opencode

• 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 -a opencode

• ckm:banner-design nextlevelbuilder/ui-ux-pro-max-skill

  ٣١٬٩٦٩ تحذيرات npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:banner-design -a opencode

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

  Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage.

  ٣١٬٧٢٨ تحذيرات npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design -a opencode

• firecrawl-demo-walkthrough firecrawl/firecrawl-workflows

  Walk through a product's key flows with Firecrawl browser and produce a structured UX/product walkthrough. Use for signup, onboarding, pricing, docs, dashboard, product demo prep, UX teardown, and first-run experience analysis.

  ٣١٬٠١٤ تحذيرات npx skills add firecrawl/firecrawl-workflows --skill firecrawl-demo-walkthrough -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

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

  ٢٥٬٠٩٥ تحذيرات npx skills add google-labs-code/stitch-skills --skill stitch-design -a opencode

• 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 -a opencode

• better-accessibility jakubkrehel/skills

  Helps your project comply with accessibility standards and best practices.

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

• 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 -a opencode

• 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 -a opencode

• character-design-sheet qu-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 qu-skills/superpowers --skill character-design-sheet -a opencode

• competitor-teardown qu-skills/superpowers

  Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

  ٢٢٬٦٨٥ تحذيرات npx skills add qu-skills/superpowers --skill competitor-teardown -a opencode

• youtube-thumbnail-design qu-skills/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 qu-skills/superpowers --skill youtube-thumbnail-design -a opencode

• landing-page-design qu-skills/superpowers

  Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

  ٢٢٬٥٩١ تحذيرات npx skills add qu-skills/superpowers --skill landing-page-design -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• web-design-guidelines antfu/skills

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

• 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 -a opencode

• youtube-thumbnail-design magentosh/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 magentosh/superpowers --skill youtube-thumbnail-design -a opencode

• landing-page-design magentosh/superpowers

  Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

  ١٨٬٢٧٧ تحذيرات npx skills add magentosh/superpowers --skill landing-page-design -a opencode

• competitor-teardown magentosh/superpowers

  Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

  ١٨٬٢٥٢ تحذيرات npx skills add magentosh/superpowers --skill competitor-teardown -a opencode

• character-design-sheet magentosh/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 magentosh/superpowers --skill character-design-sheet -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• interface-review jakubkrehel/skills

  Reviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.

  ١٣٬٩٨٧ تحذيرات npx skills add jakubkrehel/skills --skill interface-review -a opencode

• 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 -a opencode

• landing-page-design skills-shell/superpowers

  Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

  ١٣٬٨٧٢ تحذيرات npx skills add skills-shell/superpowers --skill landing-page-design -a opencode

• youtube-thumbnail-design skills-shell/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 skills-shell/superpowers --skill youtube-thumbnail-design -a opencode

• competitor-teardown skills-shell/superpowers

  Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

  ١٣٬٨٢٨ تحذيرات npx skills add skills-shell/superpowers --skill competitor-teardown -a opencode

• character-design-sheet skills-shell/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 skills-shell/superpowers --skill character-design-sheet -a opencode

• web-design-reviewer github/awesome-copilot

  This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.

  ١٣٬٧١٧ تحذيرات npx skills add github/awesome-copilot --skill web-design-reviewer -a opencode

• competitor-teardown its-a-skill-issue/superpowers

  Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

  ١٣٬٤٨٨ تحذيرات npx skills add its-a-skill-issue/superpowers --skill competitor-teardown -a opencode

• landing-page-design its-a-skill-issue/superpowers

  Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

  ١٣٬٤٥٩ تحذيرات npx skills add its-a-skill-issue/superpowers --skill landing-page-design -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• 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 -a opencode

• penpot-uiux-design github/awesome-copilot

  Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".

  ١٢٬٦٧٥ تحذيرات npx skills add github/awesome-copilot --skill penpot-uiux-design -a opencode

• 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 -a opencode

• competitor-teardown bankai-skills/superpowers

  Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

  ١٢٬٢٩٠ تحذيرات npx skills add bankai-skills/superpowers --skill competitor-teardown -a opencode

• 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 -a opencode

• landing-page-design bankai-skills/superpowers

  Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

  ١٢٬٢٨٥ تحذيرات npx skills add bankai-skills/superpowers --skill landing-page-design -a opencode

• youtube-thumbnail-design bankai-skills/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 bankai-skills/superpowers --skill youtube-thumbnail-design -a opencode

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