Skills para agentes

• 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.

  953.967 Aprovada 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.

  734.461 Aprovada 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).

  637.244 Aprovada 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.

  565.989 Aprovada 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.

  411.862 Aprovada 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.

  382.951 Aprovada 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.

  356.263 Aprovada 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.

  353.751 Aprovada 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.

  325.161 Aprovada 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.

  289.276 Aprovada 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.

  209.531 Aprovada 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`).

  191.210 Aprovada 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.

  187.333 Aprovada 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.

  113.640 Aprovada 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.

  99.632 Aprovada 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.

  67.116 Aprovada 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.

  61.433 Aprovada 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".

  58.714 Aprovada npx skills add addyosmani/web-quality-skills --skill accessibility

• frontend-design pbakaus/impeccable

  53.177 Aprovada 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).

  38.153 Aprovada 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.

  34.489 Aprovada 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.

  33.300 Aprovada 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.

  31.976 Aprovada 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".

  29.425 Aprovada 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.

  29.260 Aprovada 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.

  28.993 Aprovada 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.

  28.508 Aprovada 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.

  28.009 Aprovada 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

  26.675 Aprovada 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.

  24.346 Aprovada npx skills add jakubkrehel/skills --skill better-interface

• better-accessibility jakubkrehel/skills

  Helps your project comply with accessibility standards and best practices.

  23.825 Aprovada 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.

  23.610 Aprovada 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.

  22.774 Aprovada 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.

  21.739 Aprovada 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.

  21.617 Aprovada 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.

  19.846 Aprovada 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.

  19.722 Aprovada 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.

  19.625 Aprovada npx skills add ibelick/ui-skills --skill fixing-accessibility

• web-design-guidelines antfu/skills

  19.340 Aprovada 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.

  18.906 Aprovada 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.

  17.228 Aprovada 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.

  15.652 Aprovada 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.

  15.183 Aprovada 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.

  15.128 Aprovada 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.

  15.064 Aprovada 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.

  14.892 Aprovada 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.

  14.726 Aprovada 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.

  13.926 Aprovada 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

  13.455 Aprovada 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

  13.416 Aprovada 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.

  13.176 Aprovada 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.

  12.861 Aprovada 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.

  12.605 Aprovada 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

  12.289 Aprovada 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.

  11.889 Aprovada 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.

  11.838 Aprovada 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.

  11.719 Aprovada 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".

  11.711 Aprovada 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.

  10.647 Aprovada 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.

  10.272 Aprovada 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).

  9.916 Aprovada 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.

  9.693 Aprovada 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.

  9.591 Aprovada 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."

  9.422 Aprovada 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.

  9.057 Aprovada npx skills add affaan-m/ecc --skill flutter-dart-code-review

• flutter-improving-accessibility flutter/agent-plugins

  8.355 Aprovada 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.

  8.204 Aprovada 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.

  7.877 Aprovada 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.

  7.787 Aprovada 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.

  7.676 Aprovada 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.

  7.500 Aprovada 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.

  7.356 Aprovada 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.

  6.774 Aprovada 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.

  6.607 Aprovada 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"

  6.372 Aprovada 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"

  6.293 Aprovada 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.

  6.287 Aprovada 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).

  6.101 Aprovada 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.

  5.868 Aprovada 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".

  5.796 Aprovada 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.

  5.731 Aprovada 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".

  5.656 Aprovada 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).

  5.626 Aprovada 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.

  5.501 Aprovada 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.

  5.387 Aprovada 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.

  5.309 Aprovada 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.

  5.273 Aprovada 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.

  5.196 Aprovada 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.

  5.189 Aprovada 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.

  5.167 Aprovada 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".

  5.165 Aprovada 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".

  5.111 Aprovada 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.

  4.857 Aprovada 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.

  4.792 Aprovada 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.

  4.735 Aprovada 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.

  4.702 Aprovada npx skills add github/awesome-copilot --skill premium-frontend-ui

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

  4.692 Aprovada 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.

  4.663 Aprovada 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.

  4.647 Aprovada 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.

  4.592 Aprovada npx skills add pixijs/pixijs-skills --skill pixijs-accessibility

As descrições são dos próprios autores, em inglês. Leia o código de uma skill no repositório dela antes de instalá-la.