Habilidades gpuslider
📦

gpuslider

Revisão do conteúdo r1 Seguro ⚙️ Comandos externos🌐 Acesso à rede

Build GPU Sliders and Galleries with gpuslider

GPU sliders require coordinated rendering, layouts, and framework integration. This skill guides gpuslider setup with visual plugins, CSS sizing, and browser fallbacks.

Suporta: Claude Codex Code(CC)
🥉 78 Bronze

Instalar com meu Agente

Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.

Solicitação do agente
Review the Skillstore skill "gpuslider" from https://skillstore.io/skills/niklasp-gpuslider.md and its manifest at https://skillstore.io/api/skills/niklasp-gpuslider/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.

Recursos legíveis por agentes

Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.

Detalhe em Markdown GET /skills/niklasp-gpuslider.md manifest assinado GET /api/skills/niklasp-gpuslider/manifest lockfile assinado GET /api/skills/niklasp-gpuslider/lockfile

Testar

Usando "gpuslider". Recommend a single-image slider with a liquid transition.

Resultado esperado:

  • Use stack mode with the liquid effect in the canvas plugin.
  • Add controls and keyboard navigation.
  • Set slide height or aspect ratio through CSS.

Usando "gpuslider". My cross-origin gallery images do not work in the canvas.

Resultado esperado:

  • Use anonymous cross-origin loading and verify that the image server sends compatible CORS headers.
  • Serve images from the same origin if the remote server cannot provide those headers.

Usando "gpuslider". How should I update plugins in a React gallery?

Resultado esperado:

  • The plugins prop is read when the slider is created.
  • Use the remake dependency list to recreate the slider when relevant dependencies change.
  • Confirm advanced lifecycle options in the installed package documentation.

Auditoria de segurança

Seguro
v1 • 01/10/2026 Abrir o relatório versionado

All 21 static findings are false positives involving Markdown formatting, legitimate frontend examples, documentation links, and an effect import. No evidence found of prompt injection, credential access, data exfiltration, or malicious intent in the reviewed skill text. The installed npm package and linked sites were not audited.

1
Arquivos analisados
76
Linhas analisadas
0
Itens de revisão
0
Falsos positivos ignorados

Fatores de risco

⚙️ Comandos externos (18)
SKILL.md:10 SKILL.md:14-16 SKILL.md:16-20 SKILL.md:20-27 SKILL.md:27-29 SKILL.md:29-40 SKILL.md:40-44 SKILL.md:44 SKILL.md:46-58 SKILL.md:58-60 SKILL.md:60 SKILL.md:64 SKILL.md:65 SKILL.md:66 SKILL.md:67 SKILL.md:71-72 SKILL.md:72 SKILL.md:73
🌐 Acesso à rede (2)
SKILL.md:74 SKILL.md:75
A auditoria estática e semântica concluída mais recente não detectou achados de segurança confirmados. Isso não comprova que a skill não tenha efeitos colaterais.
Auditado por: codex
Compartilhar e citar este relatório

Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.

Abrir o relatório versionado
Avaliação de Segurança

Copiar link do relatório

https://skillstore.io/skills/niklasp-gpuslider/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Badge Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/niklasp-gpuslider/security.svg)](https://skillstore.io/skills/niklasp-gpuslider?utm_source=security_passport_badge)

Badge HTML

<a href="https://skillstore.io/skills/niklasp-gpuslider?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/niklasp-gpuslider/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Cartão incorporável

<iframe src="https://skillstore.io/embed/skills/niklasp-gpuslider.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Citações acadêmicas (APA · BibTeX · CFF)

Citação APA

niklasp. (2026). gpuslider security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/niklasp-gpuslider/audits/1

Citação BibTeX

@techreport{niklasp-niklasp-gpuslider-2026, author = {niklasp}, title = {gpuslider security audit report (audit version 1)}, institution = {Skillstore}, year = {2026}, number = {1}, url = {https://skillstore.io/skills/niklasp-gpuslider/audits/1}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "gpuslider security audit report (audit version 1)" version: "unspecified" type: report authors: - name: "niklasp" date-released: "2026-10-01" url: "https://skillstore.io/skills/niklasp-gpuslider/audits/1" identifiers: - type: other value: "skillstore:niklasp-gpuslider:audit:1" description: "Skillstore immutable audit report identifier"

Pontuação do Skillstore

Por que esta pontuação Confiança das evidências: Médio
55
Arquitetura
85
Manutenibilidade
87
Conteúdo
65
Comunidade
91
Conformidade com a especificação

O que você pode criar

Add a Product Image Carousel

Integrate a responsive image carousel with controls, keyboard navigation, and CSS spacing.

Integrate a Next.js Gallery

Use React slider components with stable dimensions and intentional plugin recreation when dependencies change.

Prototype Interactive Visual Effects

Choose documented transitions and pointer effects for an image gallery, with optional lightbox integration.

Teste estes prompts

Create a Basic Slider 
Use gpuslider to add a two-image JavaScript slider with controls and keyboard navigation. Set stable slide dimensions and include the required stylesheet.
Build a Responsive Carousel 
Build a responsive gpuslider carousel without stack mode. Configure slides per view and gaps through CSS, and add the documented stretch effect.
Integrate React Components 
Integrate gpuslider into my Next.js gallery using Slider and Slide. Read the installed documentation before choosing advanced props, and explain plugin recreation.
Plan Effects and Browser Fallbacks 
Plan a gpuslider gallery with liquid transitions and a lightbox. Check the installed documentation, CORS requirements, stable sizing, and WebGPU, WebGL, and script-free fallbacks.

Boas práticas

  • Read the installed package documentation before using options or effect names beyond the examples.
  • Keep slide dimensions stable through CSS height or aspect ratio, with responsive spacing.
  • Verify image CORS configuration and test rendering fallbacks in target browsers.

Evitar

  • Guessing undocumented option names or effects.
  • Sizing or moving slide elements through scripts instead of the supported layout configuration.
  • Assuming React plugin changes apply automatically without recreating the slider.

Perguntas frequentes

Which frameworks does this skill cover?
It covers plain JavaScript, React, and Next.js integration with gpuslider.
Does this skill include the slider library?
No. The instructions require installing the gpuslider npm package separately.
What happens when WebGPU is unavailable?
The skill describes WebGL 2 and page-based fallbacks. Without scripts, slides scroll and snap.
Can I use images from another domain?
Yes, but canvas rendering requires anonymous cross-origin loading and compatible server headers. Same-origin images avoid this requirement.
Where can I find the complete API?
Read DOCS.md inside the installed gpuslider package. The skill also links to the project documentation website.
Can React plugins change after initialization?
Plugins are read during creation. Use the remake prop with relevant dependencies to recreate the slider when needed.

Detalhes do desenvolvedor

Autor

niklasp

Licença

MIT

Revisão da Skillstore

r1

Aviso de versão

O autor não declarou uma versão.

Repositório

https://github.com/niklasp/gpuslider/tree/9a377d5fbceb6b9d4fbc7a2186e9bb4587e04907/skills/gpuslider

Referência

7c88ecf85570eefd28b1df91ae258238882c817f

Atualidade da manutenção

01/10/2026

Uso

0 downloads · 0 visualizações

Estrutura de arquivos

📄 SKILL.md