Skills voor agents

• improve-codebase-architecture mattpocock/skills

  Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

  1.047.367 Waarschuwingen npx skills add mattpocock/skills --skill improve-codebase-architecture

• vercel-composition-patterns vercel-labs/agent-skills

  React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

  373.992 Waarschuwingen npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns

• impeccable pbakaus/impeccable

  Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

  312.831 Waarschuwingen npx skills add pbakaus/impeccable --skill impeccable

• shadcn shadcn/ui

  Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

  271.099 Waarschuwingen npx skills add shadcn/ui --skill shadcn

• vercel-react-native-skills vercel-labs/agent-skills

  React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

  231.111 Waarschuwingen npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills

• firebase-app-hosting-basics firebase/agent-skills

  Deploys and manages full-stack web applications (Next.js, Angular) with Server-Side Rendering (SSR) using Firebase App Hosting. Use when deploying Next.js/Angular apps, configuring apphosting.yaml or firebase.json apphosting blocks, managing secrets, setting up GitHub CI/CD, or configuring Blaze billing requirements. Don't use for classic static web hosting, Auth, Firestore, Crashlytics, or Xcode.

  159.335 Waarschuwingen npx skills add firebase/agent-skills --skill firebase-app-hosting-basics

• web-artifacts-builder anthropics/skills

  Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

  105.898 Waarschuwingen npx skills add anthropics/skills --skill web-artifacts-builder

• shadcn shadcn-ui/ui

  Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

  90.395 Waarschuwingen npx skills add shadcn-ui/ui --skill shadcn

• remotion-render 101-skills/superpowers

  Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

  85.167 Waarschuwingen npx skills add 101-skills/superpowers --skill remotion-render

• defuddle kepano/obsidian-skills

  Extract clean Markdown from HTML pages with Defuddle CLI.

  71.056 Waarschuwingen npx skills add kepano/obsidian-skills --skill defuddle

• frontend-ui-engineering addyosmani/agent-skills

  Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

  50.497 Waarschuwingen npx skills add addyosmani/agent-skills --skill frontend-ui-engineering

• clerk-custom-ui clerk/skills

  Custom authentication flows and component appearance - hooks (useSignIn,

  50.415 Waarschuwingen npx skills add clerk/skills --skill clerk-custom-ui

• performance-optimization addyosmani/agent-skills

  Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.

  48.341 Waarschuwingen npx skills add addyosmani/agent-skills --skill performance-optimization

• huashu-design alchaincyf/huashu-design

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

  47.761 Waarschuwingen npx skills add alchaincyf/huashu-design --skill huashu-design

• remotion-render qu-skills/superpowers

  Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

  45.682 Waarschuwingen npx skills add qu-skills/superpowers --skill remotion-render

• remotion-render magentosh/superpowers

  Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

  36.374 Waarschuwingen npx skills add magentosh/superpowers --skill remotion-render

• baoyu-markdown-to-html jimliu/baoyu-skills

  Converts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, Mermaid (rendered to PNG via headless Chrome), PlantUML, footnotes, alerts, infographics, and optional bottom citations for external links. Use when user asks for "markdown to html", "convert md to html", "md 转 html", "微信外链转底部引用", or needs styled HTML output from markdown.

  31.729 Waarschuwingen npx skills add jimliu/baoyu-skills --skill baoyu-markdown-to-html

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

  Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

  31.247 Waarschuwingen npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides

• clerk-cli clerk/skills

  Operate the Clerk CLI (`clerk` binary) for authentication, user/org/session management, impersonation, local webhook testing, deploy verification, instance config, env keys, feature toggles, and any Clerk Backend, Platform, or Frontend API call. Use when the user mentions Clerk management tasks, "list clerk users", "impersonate a user", "test webhooks locally", "enable orgs", "enable billing", "clerk env pull", "clerk doctor", "clerk deploy", "clerk api", or any ad-hoc Clerk API request. Prefer the CLI over raw HTTP: it handles auth, key resolution, app/instance targeting, and formatting automatically.

  30.497 Waarschuwingen npx skills add clerk/skills --skill clerk-cli

• remotion-render skills-shell/superpowers

  Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

  27.516 Waarschuwingen npx skills add skills-shell/superpowers --skill remotion-render

• guizang-ppt-skill op7418/guizang-ppt-skill

  生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。

  26.620 Waarschuwingen npx skills add op7418/guizang-ppt-skill --skill guizang-ppt-skill

• nextjs-on-cloudflare cloudflare/skills

  Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skills with `npx skills add cloudflare/vinext` if missing, then read and follow the applicable skill and docs.

  25.503 Waarschuwingen npx skills add cloudflare/skills --skill nextjs-on-cloudflare

• vue-debug-guides vuejs-ai/skills

  Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.

  25.295 Waarschuwingen npx skills add vuejs-ai/skills --skill vue-debug-guides

• remotion-render bankai-skills/superpowers

  Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

  24.443 Waarschuwingen npx skills add bankai-skills/superpowers --skill remotion-render

• extension-http-outcalls caffeinelabs/skills

  HTTP outcalls performed by the backend canister (not in the frontend), including mandatory local verification of external REST API requests.

  24.352 Waarschuwingen npx skills add caffeinelabs/skills --skill extension-http-outcalls

• migrate-radix-to-base shadcn-ui/ui

  Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

  22.705 Waarschuwingen npx skills add shadcn-ui/ui --skill migrate-radix-to-base

• argent-test-ui-flow software-mansion/argent

  Autonomously test an app UI (iOS or Android) by running interact-screenshot-verify loops using argent MCP tools. Use when testing UI flows, verifying login works, testing navigation, running end-to-end UI test scenarios, manual QA steps, visible UI changes, or visual behavior.

  21.717 Waarschuwingen npx skills add software-mansion/argent --skill argent-test-ui-flow

• html-ppt lewislulu/html-ppt-skill

  HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书 图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".

  20.178 Waarschuwingen npx skills add lewislulu/html-ppt-skill --skill html-ppt

• next-cache-components-adoption vercel/next.js

  Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.

  16.948 Waarschuwingen npx skills add vercel/next.js --skill next-cache-components-adoption

• upstash-redis-js upstash/skills

  Work with the @upstash/redis TypeScript/JavaScript SDK, a serverless HTTP-based Redis client for Next.js, Vercel, Cloudflare Workers, edge runtimes, and Node.js. Use when adding a cache (cache-aside, write-through, TTL and expiration strategies), session storage and user sessions, a key-value store, leaderboards and rankings with sorted sets, counters, distributed locks, queues with lists, streams and consumer groups, sparse index-addressed arrays and ring buffers (ARSET, ARINSERT, ARRING, ARGREP, AROP), embeddings and nearest-neighbour vector search stored inside Redis (VECTOR commands via redis.vector, separate from @upstash/vector), JSON documents, pipelines and MULTI/EXEC transactions, Lua scripting, read replicas, or full-text search, typo-tolerant search, facets, aggregations, and search over Redis stream entries with Upstash Redis Search (different from regular FT.SEARCH; also available for TCP clients via @upstash/search-redis and @upstash/search-ioredis). Also use when migrating from ioredis or node-redis, when a Redis connection is needed from a serverless function without connection pooling, when integrating @upstash/ratelimit, or when the user says Redis cache, KV store, session store, serverless Redis, or Upstash Redis. Supports automatic serialization/deserialization of JavaScript types.

  16.419 Waarschuwingen npx skills add upstash/skills --skill upstash-redis-js

• tailwind-4-docs lombiq/tailwind-agent-skills

  Comprehensive Tailwind CSS v4 documentation snapshot and workflow guidance. Use when answering Tailwind v4 questions, selecting utilities/variants, configuring Tailwind v4, or migrating projects from v3 to v4 with official docs and gotcha checks.

  16.083 Waarschuwingen npx skills add lombiq/tailwind-agent-skills --skill tailwind-4-docs

• react-doctor millionco/react-doctor

  Use when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.

  15.968 Waarschuwingen npx skills add millionco/react-doctor --skill react-doctor

• migrate-radix-to-base shadcn/ui

  Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

  13.626 Waarschuwingen npx skills add shadcn/ui --skill migrate-radix-to-base

• app-store-screenshots parthjadhav/app-store-screenshots

  Use when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS, macOS, and/or Android apps, or scaffolding a screenshot editor with Next.js. Triggers on app store, mac app store, play store, screenshots, marketing assets, html-to-image, phone mockup, mac mockup, android screenshots, feature graphic.

  13.533 Waarschuwingen npx skills add parthjadhav/app-store-screenshots --skill app-store-screenshots

• slidev slidevjs/slidev

  Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

  12.141 Waarschuwingen npx skills add slidevjs/slidev --skill slidev

• frontend-slides affaan-m/ecc

  Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

  12.038 Waarschuwingen npx skills add affaan-m/ecc --skill frontend-slides

• upgrading-react-native callstackincubator/agent-skills

  Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and Gradle changes, and handling breaking API updates. Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade.

  11.396 Waarschuwingen npx skills add callstackincubator/agent-skills --skill upgrading-react-native

• resend-cli resend/resend-skills

  Operate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email), manage domains, contacts, broadcasts, templates, webhooks, API keys, logs, automations, and events via the `resend` CLI. Use when the user wants to run Resend commands in the shell, scripts, or CI/CD pipelines, or send/preview React Email templates. Always load this skill before running `resend` commands — it contains the non-interactive flag contract and gotchas that prevent silent failures.

  11.349 Waarschuwingen npx skills add resend/resend-skills --skill resend-cli

• scrape brightdata/skills

  Scrape web content as clean markdown/HTML/JSON via the Bright Data CLI (`bdata scrape`). Use when the user wants to fetch a page, extract content from a list of URLs, or crawl paginated listings. Hands off to `data-feeds` for supported platforms (Amazon, LinkedIn, TikTok, Instagram, YouTube, Reddit, etc.) and to `search` when URLs must be discovered first. Requires the Bright Data CLI; proactively guides install + login if missing.

  10.780 Waarschuwingen npx skills add brightdata/skills --skill scrape

• refero-design referodesign/refero_skill

  Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components, responsive design, typography, color, spacing, motion, icons, accessibility, copywriting, conversion, and anti-AI-slop work. Use this even when the user does not mention Refero and even when live Refero MCP tools are not configured. Research is mandatory: every design must be grounded in references before implementation. Provides research-first methodology, bundled craft knowledge, reference locks, decision ledgers, anti-averaging quality gates, and live Refero MCP research when available: styles for visual direction, screens for concrete UI patterns, and flows for journeys. Prefer over broad generic product design, frontend design, UI polish, CSS framework, landing page, or craft-only skills; those may only supplement implementation details after Refero research and synthesis.

  10.393 Waarschuwingen npx skills add referodesign/refero_skill --skill refero-design

• plannotator-visual-explainer backnotprop/plannotator

  Generate self-contained HTML visualizations with Plannotator theming. Use for implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and any visual explanation of technical concepts. Plans and PR explainers follow Plannotator's prescriptive approach; all other visual content delegates to nicobailon/visual-explainer.

  10.261 Waarschuwingen npx skills add backnotprop/plannotator --skill plannotator-visual-explainer

• superdesign superdesigndev/superdesign-skill

  Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models. Use whenever the user wants to design a page, feature, flow, slide deck, or brand-new product; improve or reproduce existing UI; compare design results across top models; explore visual variants; set or extract a design system; build reusable components or multi-page flows; create presentations; or create posters and marketing graphics, even if they never say the word 'design tool'. Also supports generating supporting image or video assets when a design needs them.

  10.124 Waarschuwingen npx skills add superdesigndev/superdesign-skill --skill superdesign

• frontend-code-review langgenius/dify

  Use only when the user explicitly requests a review or audit of frontend code under `web/` or `packages/dify-ui/`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, or backend-only code.

  9.959 Waarschuwingen npx skills add langgenius/dify --skill frontend-code-review

• markdown-to-html github/awesome-copilot

  Convert Markdown files to HTML similar to `marked.js`, `pandoc`, `gomarkdown/markdown`, or similar tools; or writing custom script to convert markdown to html and/or working on web template systems like `jekyll/jekyll`, `gohugoio/hugo`, or similar web templating systems that utilize markdown documents, converting them to html. Use when asked to "convert markdown to html", "transform md to html", "render markdown", "generate html from markdown", or when working with .md files and/or web a templating system that converts markdown to HTML output. Supports CLI and Node.js workflows with GFM, CommonMark, and standard Markdown flavors.

  9.865 Waarschuwingen npx skills add github/awesome-copilot --skill markdown-to-html

• react-email resend/react-email

  Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.

  9.352 Waarschuwingen npx skills add resend/react-email --skill react-email

• next-intl-add-language github/awesome-copilot

  Add new language to a Next.js + next-intl application

  9.302 Waarschuwingen npx skills add github/awesome-copilot --skill next-intl-add-language

• tanstack-query tanstack-skills/tanstack-skills

  Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.

  9.167 Waarschuwingen npx skills add tanstack-skills/tanstack-skills --skill tanstack-query

• shopify-pos-ui shopify/shopify-ai-toolkit

  Build retail point-of-sale applications using Shopify's POS UI components. These components provide a consistent and familiar interface for POS applications. POS UI Extensions also supports scaffolding new POS extensions using Shopify CLI commands. Keywords: POS, Retail, smart grid

  9.121 Waarschuwingen npx skills add shopify/shopify-ai-toolkit --skill shopify-pos-ui

• design-system affaan-m/ecc

  Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with DESIGN.md rationale and an interactive HTML preview, score the UI across 10 dimensions, and flag AI-slop patterns. Use when starting a design system, auditing visual consistency before a redesign, or reviewing a PR that touches styling.

  8.929 Waarschuwingen npx skills add affaan-m/ecc --skill design-system

• stitch::extract-static-html google-labs-code/stitch-skills

  Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.

  8.847 Waarschuwingen npx skills add google-labs-code/stitch-skills --skill stitch::extract-static-html

• emblem-ai-react emblemcompany/agent-skills

  React integration skill for EmblemAI's one-shot user management. Use when the user wants to add website authentication plus wallet-enabled users to a React app with EmblemAuthProvider, ConnectButton, social/email/wallet login, chat components, React auth hooks, React composition patterns, or Migrate.fun React hooks.

  8.770 Waarschuwingen npx skills add emblemcompany/agent-skills --skill emblem-ai-react

• angular-signals analogjs/angular-skills

  DEPRECATED - this skill is unmaintained. Use the official Angular skills at https://github.com/angular/skills instead. Implement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state with linkedSignal(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject/Observable patterns to signals, or implementing reactive data flows.

  8.508 Waarschuwingen npx skills add analogjs/angular-skills --skill angular-signals

• refactoring-ui wondelai/skills

  Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.

  7.994 Waarschuwingen npx skills add wondelai/skills --skill refactoring-ui

• tailwind-v4-shadcn secondsky/claude-skills

  | Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.

  7.889 Waarschuwingen npx skills add secondsky/claude-skills --skill tailwind-v4-shadcn

• create-oo-component-documentation github/awesome-copilot

  7.006 Waarschuwingen npx skills add github/awesome-copilot --skill create-oo-component-documentation

• angular-forms analogjs/angular-skills

  DEPRECATED - this skill is unmaintained. Use the official Angular skills at https://github.com/angular/skills instead. Build signal-based forms in Angular v21+ using the new Signal Forms API. Use for form creation with automatic two-way binding, schema-based validation, field state management, and dynamic forms. Triggers on form implementation, adding validation, creating multi-step forms, or building forms with conditional fields. Signal Forms are experimental but recommended for new Angular projects. Don't use for template-driven forms without signals or third-party form libraries like Formly or ngx-formly.

  6.961 Waarschuwingen npx skills add analogjs/angular-skills --skill angular-forms

• solana-mobile-wallet solana-mobile/solana-mobile-skills

  Connect Solana wallets and sign or send transactions in React Native Expo apps using Mobile Wallet Adapter and Wallet UI. Use when adding a connect wallet button, showing a connected address, disconnecting, signing messages, sign-in with Solana, transferring SOL, or sending any transaction from a Solana mobile app.

  6.847 Waarschuwingen npx skills add solana-mobile/solana-mobile-skills --skill solana-mobile-wallet

• angular-testing analogjs/angular-skills

  DEPRECATED - this skill is unmaintained. Use the official Angular skills at https://github.com/angular/skills instead. Write unit and integration tests for Angular v20+ applications using Vitest or Jasmine with TestBed and modern testing patterns. Use for testing components with signals, OnPush change detection, services with inject(), and HTTP interactions. Triggers on test creation, testing signal-based components, mocking dependencies, or setting up test infrastructure. Don't use for E2E testing with Cypress or Playwright, or for testing non-Angular JavaScript/TypeScript code.

  6.179 Waarschuwingen npx skills add analogjs/angular-skills --skill angular-testing

• ui-skills-root ibelick/ui-skills

  Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

  5.865 Waarschuwingen npx skills add ibelick/ui-skills --skill ui-skills-root

• ui-to-vue affaan-m/ecc

  Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.

  5.806 Waarschuwingen npx skills add affaan-m/ecc --skill ui-to-vue

• apollo-client apollographql/skills

  Guide for building React applications with Apollo Client 4.x. Use this skill when: (1) setting up Apollo Client in a React project, (2) writing GraphQL queries or mutations with hooks, (3) configuring caching or cache policies, (4) managing local state with reactive variables, (5) troubleshooting Apollo Client errors or performance issues.

  5.331 Waarschuwingen npx skills add apollographql/skills --skill apollo-client

• lynx-devtool lynx-community/skills

  Use when working with Lynx DevTool or debugging a Lynx app, page, or device, especially when the task mentions clients or sessions, CDP or App commands, DOM/CSS inspection, runtime or console logs, evaluating JavaScript on a device, screenshots, heap snapshots, performance traces, Page.reload or App.openPage, global switches, interactive snapshot refs and taps/fills/scrolls, inspecting or searching a ReactLynx component tree, linking DOM Snapshot refs to ReactLynx components (`reactlynx link`), or mutating ReactLynx props/state/context on Android, iOS, or Desktop.

  5.269 Waarschuwingen npx skills add lynx-community/skills --skill lynx-devtool

• react-native-best-practices software-mansion-labs/skills

  Software Mansion's best practices for production React Native and Expo apps on the New Architecture. MUST USE before writing, reviewing, or debugging ANY code in a React Native or Expo project. If the working directory contains a package.json with react-native, expo, or expo-router as a dependency, this skill applies. Trigger on: any code task in a React Native/Expo project, 'React Native', 'Expo', 'New Architecture', 'Reanimated', 'Gesture Handler', 'react-native-svg', 'ExecuTorch', 'react-native-audio-api', 'react-native-enriched-html', 'Worklet', 'Fabric', 'TurboModule', 'WebGPU', 'react-native-wgpu', 'TypeGPU', 'GPU shader', 'WGSL', 'svg', 'animation', 'gesture', 'audio', 'rich text', 'AI model', 'multithreading', 'chart', 'vector', 'image filter', 'shared value', 'useSharedValue', 'runOnJS', 'scheduleOnRN', 'thread', 'worklet', 'Bundle Mode', or any question involving UI, graphics, native modules, or React Native threading and animation behavior. Also use when a more specific sub-skill matches.

  5.217 Waarschuwingen npx skills add software-mansion-labs/skills --skill react-native-best-practices

• nextjs-react-typescript mindrally/skills

  Expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind

  5.125 Waarschuwingen npx skills add mindrally/skills --skill nextjs-react-typescript

• tanstack-table tanstack-skills/tanstack-skills

  Headless UI for building powerful tables & datagrids for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit.

  5.089 Waarschuwingen npx skills add tanstack-skills/tanstack-skills --skill tanstack-table

• react-native-testing callstack/react-native-testing-library

  Write tests using React Native Testing Library (RNTL) v13 and v14 (`@testing-library/react-native`). Use when writing, reviewing, or fixing React Native component tests. Covers: render, screen, queries (getBy/getAllBy/queryBy/findBy), Jest matchers, userEvent, fireEvent, waitFor, and async patterns. Supports v13 (React 18, sync render) and v14 (React 19+, async render). Triggers on: test files for React Native components, RNTL imports, mentions of "testing library", "write tests", "component tests", or "RNTL".

  4.957 Waarschuwingen npx skills add callstack/react-native-testing-library --skill react-native-testing

• experience-ui-bundle-features-generate forcedotcom/sf-skills

  MUST activate when the project contains a uiBundles/*/src/ directory (React or Angular) and the user wants to add a pre-built feature — such as authentication (login, logout, protected routes, session management) or search (global search across pages and content) — instead of building it from scratch. Always run list first to see the current feature catalog, since it can include more than authentication and search. Always use this skill for installing pre-built features rather than hand-building them. DO NOT TRIGGER for Agentforce conversational client or file-upload features — use experience-ui-bundle-agentforce-client-generate and experience-ui-bundle-file-upload-generate respectively.

  4.946 Waarschuwingen npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-features-generate

• korean-privacy-terms nomadamas/k-skill

  kimlawtech/korean-privacy-terms (Apache-2.0) 업스트림을 경유해 Next.js 프로젝트에 한국 법령(개인정보보호법·약관규제법·전자상거래법) 기반 개인정보처리방침·이용약관·쿠키 배너·동의 모달을 생성하는 thin wrapper 스킬.

  4.895 Waarschuwingen npx skills add nomadamas/k-skill --skill korean-privacy-terms

• tanstack-router tanstack-skills/tanstack-skills

  Type-safe routing for React and Solid applications with first-class search params, data loading, and seamless integration with the React ecosystem.

  4.647 Waarschuwingen npx skills add tanstack-skills/tanstack-skills --skill tanstack-router

• nextjs-performance giuseppe-trisciuoglio/developer-kit

  Expert Next.js performance optimization skill covering Core Web Vitals, image/font optimization, caching strategies, streaming, bundle optimization, and Server Components best practices. Use when optimizing Next.js applications for Core Web Vitals (LCP, INP, CLS), implementing next/image and next/font, configuring caching with unstable_cache and revalidateTag, converting Client Components to Server Components, implementing Suspense streaming, or analyzing and reducing bundle size. Supports Next.js 16 + React 19 patterns.

  4.646 Waarschuwingen npx skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-performance

• i18n lobehub/lobehub

  Use for user-facing strings and react-i18next locale keys, namespaces, interpolation, translations or bun run i18n.

  4.556 Waarschuwingen npx skills add lobehub/lobehub --skill i18n

• react-vite-dashboard google-labs-code/stitch-skills

  Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

  4.425 Waarschuwingen npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard

• artifacts-builder composiohq/awesome-claude-skills

  Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

  4.301 Waarschuwingen npx skills add composiohq/awesome-claude-skills --skill artifacts-builder

• uniwind uni-stack/uniwind

  Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent-* color props, platform/data/state/responsive variants, CSS variables, custom utilities, withUniwind for third-party components, cn/tailwind-merge, tailwind-variants, safe area utilities, ScopedVariables, LayoutDirection, gradients, fonts, React Navigation, UI kits, diagnostics, troubleshooting, and Uniwind Pro features. Does not cover NativeWind migration.

  4.237 Waarschuwingen npx skills add uni-stack/uniwind --skill uniwind

• daishin-report-search nomadamas/k-skill

  대신증권 리포트 GitHub Pages 미러에서 최신 HTML 리포트 목록과 원문/설명 페이지를 조회한다.

  4.156 Waarschuwingen npx skills add nomadamas/k-skill --skill daishin-report-search

• tanstack-form tanstack-skills/tanstack-skills

  Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, Lit, and Svelte.

  4.105 Waarschuwingen npx skills add tanstack-skills/tanstack-skills --skill tanstack-form

• slide-creator starchild-ai-agent/official-skills

  Build 16:9 slide decks as HTML, exported to PDF (not PowerPoint format). Use when making a deck, presentation, or pitch (e.g. 10-slide pitch deck for X, training course on Y, quarterly results presentation).

  4.104 Waarschuwingen npx skills add starchild-ai-agent/official-skills --skill slide-creator

• swiftui-layout-components dpearson2699/swift-ios-skills

  Build SwiftUI layouts using stacks, grids, lists, scroll views, forms, and controls. Covers VStack/HStack/ZStack, LazyVGrid/LazyHGrid, List with sections and swipe actions, ScrollView with ScrollPosition and scroll-driven reveal surfaces, Form with validation, Toggle/Picker/Slider, .searchable, and overlay patterns. Use when building data-driven layouts, collection views, paged detail reveals, settings screens, search interfaces, or transient overlay UI.

  3.992 Waarschuwingen npx skills add dpearson2699/swift-ios-skills --skill swiftui-layout-components

• chart starchild-ai-agent/official-skills

  Interactive web charts: line, bar, candle, scatter, with HTML and screenshot output. Use when visualizing data for analysis or BI (e.g. plot BTC vs gold last year, bar chart of revenue by quarter, compare two return series).

  3.921 Waarschuwingen npx skills add starchild-ai-agent/official-skills --skill chart

• building-storefronts medusajs/medusa-agent-skills

  Load automatically when planning, researching, or implementing Medusa storefront features (calling custom API routes, SDK integration, React Query patterns, data fetching). REQUIRED for all storefront development in ALL modes (planning, implementation, exploration). Contains SDK usage patterns, frontend integration, and critical rules for calling Medusa APIs.

  3.888 Waarschuwingen npx skills add medusajs/medusa-agent-skills --skill building-storefronts

• angular-ssr analogjs/angular-skills

  DEPRECATED - this skill is unmaintained. Use the official Angular skills at https://github.com/angular/skills instead. Implement server-side rendering and hydration in Angular v20+ using @angular/ssr. Use for SSR setup, hydration strategies, prerendering static pages, and handling browser-only APIs. Triggers on SSR configuration, fixing hydration mismatches, prerendering routes, or making code SSR-compatible.

  3.796 Waarschuwingen npx skills add analogjs/angular-skills --skill angular-ssr

• ui tw93/waza

  Produces distinctive production UI and screenshot-grounded visual polish. Use when building or restyling pages, components, or typography. Not for backend logic or data pipelines.

  3.730 Waarschuwingen npx skills add tw93/waza --skill ui

• building-ui-bundle-app forcedotcom/sf-skills

  3.671 Waarschuwingen npx skills add forcedotcom/sf-skills --skill building-ui-bundle-app

• frontend-design bytedance/deer-flow

  Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

  3.671 Waarschuwingen npx skills add bytedance/deer-flow --skill frontend-design

• generating-ui-bundle-features forcedotcom/sf-skills

  3.665 Waarschuwingen npx skills add forcedotcom/sf-skills --skill generating-ui-bundle-features

• nextjs-app-router giuseppe-trisciuoglio/developer-kit

  Provides patterns and code examples for building Next.js 16+ applications with App Router architecture. Use when creating projects with App Router, implementing Server Components and Client Components ("use client"), creating Server Actions for forms, building Route Handlers (route.ts), configuring caching with "use cache" directive (cacheLife, cacheTag), setting up parallel routes (`@slot`) or intercepting routes, migrating to proxy.ts, or working with App Router file conventions (layout.tsx, page.tsx, loading.tsx, error.tsx).

  3.663 Waarschuwingen npx skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-app-router

• react-mcp assistant-ui/skills

  Adds user managed browser MCP servers to assistant-ui with `@assistant-ui/react-mcp`. Use when mounting `McpManagerResource`, declaring `defineConnector` presets, persisting custom servers and OAuth state, composing `McpManagerPrimitive`, `McpServerPrimitive`, `McpAddFormPrimitive`, or `McpElicitationPrimitive`, handling an OAuth callback, browsing MCP resources, or diagnosing missing server tools, connection failures, and OAuth redirects. This covers end user chosen servers, not application owned backend MCP tools. For those use tools; for the chat runtime use runtime; for the copied dialog use elements.

  3.661 Waarschuwingen npx skills add assistant-ui/skills --skill react-mcp

• tanstack-start tanstack-skills/tanstack-skills

  Full-stack React framework powered by TanStack Router with SSR, streaming, server functions, and deployment to any hosting provider.

  3.659 Waarschuwingen npx skills add tanstack-skills/tanstack-skills --skill tanstack-start

• ui-typography bencium/bencium-marketplace

  Professional typography rules for UI design, web applications, software interfaces, and all screen-based text. Enforces timeless typographic correctness that LLMs consistently get wrong: proper quote marks, dashes, spacing, hierarchy, and layout. ENFORCEMENT MODE: When generating ANY HTML, CSS, React, JSX, or UI code containing visible text, auto-apply every rule in this skill silently — do not ask, do not explain, just produce correct typography. AUDIT MODE: When reviewing or improving existing interfaces or legacy code, flag violations and provide fixes. Trigger on: any HTML/CSS/React artifact creation, "build a landing page", "create a component", "design a UI", "fix the typography", "make this look professional", "review this layout", web design, presentation design, dashboard creation, document generation, or any task producing visible text for humans. Even if the user doesn't mention typography, apply these rules whenever generating UI output.

  3.639 Waarschuwingen npx skills add bencium/bencium-marketplace --skill ui-typography

• inngest-durable-functions inngest/inngest-skills

  Use when building functions that must survive process crashes, retry automatically on failure, run on a schedule, react to events, or maintain state across infrastructure failures — e.g., webhook handlers that drop events, flaky cron jobs, background jobs that fail mid-execution, or workflows that need to resume where they left off. Covers Inngest function configuration, triggers (events, cron, invoke), step execution and memoization, idempotency, cancellation, error handling, retries, logging, and observability.

  3.630 Waarschuwingen npx skills add inngest/inngest-skills --skill inngest-durable-functions

• uplifting-components-to-slds2 forcedotcom/sf-skills

  3.586 Waarschuwingen npx skills add forcedotcom/sf-skills --skill uplifting-components-to-slds2

• nextjs-authentication giuseppe-trisciuoglio/developer-kit

  Provides authentication implementation patterns for Next.js 15+ App Router using Auth.js 5 (NextAuth.js). Use when setting up authentication flows, implementing protected routes, managing sessions in Server Components and Server Actions, configuring OAuth providers, implementing role-based access control, or handling sign-in/sign-out flows in Next.js applications.

  3.576 Waarschuwingen npx skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-authentication

• game-ui-design omer-metin/skills-for-antigravity

  World-class game UI design expertise combining the clarity of Nintendo's UI philosophy, the immersive diegetic interfaces of Dead Space and Metroid Prime, and the competitive readability principles from esports titles. Game UI is the invisible bridge between player intent and game response. Great game UI serves the player without breaking immersion. It communicates critical information at a glance during intense action, guides new players without patronizing veterans, and adapts gracefully from 4K monitors to handheld screens and from keyboard to touch to controller. The best game UI designers understand that every pixel of screen space is sacred - borrowed from the game world itself. Use when "game ui, game interface, hud design, heads up display, game menu, inventory ui, health bar, stamina bar, game hud, minimap, crosshair, reticle, button prompt, controller ui, gamepad navigation, diegetic interface, in-world ui, quest tracker, damage numbers, cooldown indicator, radial menu, game tooltip, game-ui, hud, game-interface, game-menu, controller-ui, diegetic, game-design, accessibility, console, mobile-games" mentioned.

  3.432 Waarschuwingen npx skills add omer-metin/skills-for-antigravity --skill game-ui-design

• better-auth giuseppe-trisciuoglio/developer-kit

  Provides Better Auth integration patterns for NestJS backend and Next.js frontend with Drizzle ORM and PostgreSQL. Use when setting up Better Auth with NestJS backend, integrating Next.js App Router frontend, configuring Drizzle ORM schema, implementing social login (GitHub, Google), adding plugins (2FA, Organization, SSO, Magic Link, Passkey), implementing email/password authentication with session management, or creating protected routes and middleware.

  3.415 Waarschuwingen npx skills add giuseppe-trisciuoglio/developer-kit --skill better-auth

• mantine-custom-components mantinedev/skills

  Build custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styles API support (classNames, styles, vars, unstyled), (3) implementing CSS variables via createVarsResolver, (4) building compound components with sub-components and shared context, (5) registering a component with MantineProvider via Component.extend(), or (6) any task involving Factory, useProps, useStyles, BoxProps, StylesApiProps, or ElementProps in @mantine/core.

  3.171 Waarschuwingen npx skills add mantinedev/skills --skill mantine-custom-components

• tailwindcss hairyf/skills

  Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.

  3.170 Waarschuwingen npx skills add hairyf/skills --skill tailwindcss

• beautiful-article conardli/garden-skills

  把用户提供的素材（网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料）编辑、设计成一篇美丽的、可离线打开和分享的**单文件 HTML 网页文章**。基于 reacticle 组件协议：不手写裸 HTML/CSS，而用语义组件 + 受主题约束的 Raw 自由层；按 source→规划→双确认→生成→终审→修复的小型 harness 流程推进，默认 100% 信息保留的长文。触发场景：把 URL/PDF/DOCX/文章做成网页文章 / 长文 / briefing / 解释文 / 视觉文章 / 教程 / 审阅复盘 / 方案分析，'render this as a beautiful web article / 把这篇做成网页文章 / 生成一篇可分享的 HTML 长文 / reacticle 文章'。只生成文章，不生成后台、表单、dashboard、产品原型或通用 Web App。

  3.157 Waarschuwingen npx skills add conardli/garden-skills --skill beautiful-article

• tailwind-theme-builder jezweb/claude-skills

  Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.

  3.147 Waarschuwingen npx skills add jezweb/claude-skills --skill tailwind-theme-builder

• plan-canvas affaan-m/ecc

  Open plans and HTML artifacts in a local browser canvas where the human annotates elements, chats, and approves or requests changes without leaving the page. Use when presenting a plan for review, or when feedback like "move this, change that" is easier pointed at than typed.

  3.046 Waarschuwingen npx skills add affaan-m/ecc --skill plan-canvas

• generative-ui himself65/finance-skills

  Design system and templates for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. Use this skill whenever the user wants visual or interactive output rather than plain text or markdown: charts and dashboards, diagrams, flowcharts and architecture drawings, mockups, comparison grids, illustrations, interactive explainers ("explain how X works" with a visual), or tools with sliders, toggles, and live-updating displays — including financial data shown visually and requests phrased as "show me", "visualize", "draw", or "chart this".

  3.035 Waarschuwingen npx skills add himself65/finance-skills --skill generative-ui

De beschrijvingen zijn van de auteurs zelf, in het Engels. Lees de code van een skill in zijn repository voordat je hem installeert.