Shopify/Klint

Última atividade de origem registrada: 21 de outubro de 2026 às 12:32

Catálogo do SkillsMP atualizado: 29 de outubro de 2026 às 18:30

skills coletadas: 2

Estrelas no GitHub: 6
Forks no GitHub: 1

Instalar com um assistente de IA

Copie este prompt para o assistente de IA que você usa.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/Shopify/Klint.

README do repositório

Arquivo de origem do README: README.md

Ler o README original

Expandir README completo

# 🎨 Klint Klint is a modern 2D canvas library for React, inspired by p5.js and Processing. It makes creative coding in React intuitive and powerful, perfect for generative art, data visualization, interactive graphics, and creative web experiences. ## ✨ Features - 🎯 **React-first**: Built specifically for React with hooks and component patterns - 🎨 **Creative coding**: p5.js-like API with modern JavaScript/TypeScript - 🚀 **Performance**: Direct canvas access with minimal overhead - 🛠️ **Developer friendly**: Full TypeScript support and great tooling - 🔧 **Extensible**: Plugin system and easy customization ## 🚀 Quick Start ### Install Klint ```bash npm install @shopify/klint ``` ### Basic Usage ```jsx import { useKlint, Klint } from '@shopify/klint'; function MySketch() { const { context } = useKlint(); const draw = (K) => { K.background('#000'); K.fillColor('#ff6b6b'); K.circle(K.width/2, K.height/2, 50); }; return <Klint context={context} draw={draw} />; } ``` ## 🎮 Try the Editor Want to experiment with Klint interactively? Create a live editor environment: ```bash npx @shopify/klint create-editor my-klint-project cd my-klint-project npm install npm run dev ``` This creates a Monaco-based editor with live preview - perfect for learning and prototyping! ## 📚 Documentation - **[Getting Started Guide](https://shopify.github.io/Klint/docs/getting-started/quick-start)** - Learn the basics - **[API Reference](https://shopify.github.io/Klint/docs/reference/api-reference)** - Complete function reference - **[Examples](https://shopify.github.io/Klint/experiments)** - See Klint in action - **[Lifecycle](https://shopify.github.io/Klint/docs/core-concepts/lifecycle)** - Understand initialization and drawing ## 🌟 Examples ### Animated Circle ```jsx function AnimatedCircle() { const { context } = useKlint(); const draw = (K) => { K.background('rgba(0, 0, 0, 0.1)'); K.fillColor('#4ecdc4'); const x = K.width/2 + Math.cos(K.frame * 0.02) * 100; const y = K.height/2 + Math.sin(K.frame * 0.02) * 100; K.circle(x, y, 20); }; return <Klint context={context} draw={draw} />; } ``` ### Interactive Drawing ```jsx function InteractiveDrawing() { const { context, KlintMouse } = useKlint(); const { mouse } = KlintMouse(); const draw = (K) => { if (mouse.isPressed) { K.fillColor('red'); K.circle(mouse.x, mouse.y, 10); } }; return <Klint context={context} draw={draw} />; } ``` ## Vanilla JavaScript (no React) Use the tree-shakeable native entry directly: ```js import { createKlint } from '@shopify/klint/native'; const sketch = createKlint({ container: '#app', draw(K) { K.background('white'); K.circle(K.width / 2, K.height / 2, 40); }, }); await sketch.ready; ``` ## 🛠️ Development **For contributors** who want to work on Klint itself: ```bash git clone https://github.com/Shopify/klint.git cd klint npm install npm run build ``` See [CONTRIBUTING.md](./CONTRIBUTING.md) for development guidelines. ## 📄 License MIT --- **Ready to create?** Start with `npx @shopify/klint create-editor my-project` 🎨

Carregando o README do repositório…

Skills neste repositório

Desenvolvedores de software Desenvolvedores web

2 categorias ocupacionais · 100% classificado

skill

ocupação

descrição

atualizado

klint

Desenvolvedores de software

Build creative-coding sketches and digital art with Klint's immediate-mode Canvas 2D API in React or vanilla JavaScript.

Idioma do texto original: inglês

2026-10-21

klint

Desenvolvedores web

Build creative-coding sketches and digital art with Klint's immediate-mode Canvas 2D API in React or vanilla JavaScript.

Idioma do texto original: inglês

2026-08-02

Mostrando 2 de 2 skills coletadas.