Shadertoy to Flutter

Convert Shadertoy GLSL fragment shaders into Flutter-compatible GLSL fragment shaders (.frag files) for use with Flutter's FragmentProgram / FragmentShader API, Impeller, or the material_palette "fill shader" / "wrap shader" pattern. Use whenever the user pastes a Shadertoy shader (or points to one on shadertoy.com) and wants to run it in Flutter, asks to port or adapt a fragment shader to Flutter, mentions making Shadertoy-style uniforms (iResolution, iTime, iMouse, iChannel*, mainImage, fragCoord) work in Flutter, or has a .frag file that won't compile in Flutter because of Shadertoy-style c

15 stars 9 forksMobile Development

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add FlutterFlow/shadertoy_to_flutter_skill --skill shadertoy-to-flutter

Manual install

git clone --depth 1 https://github.com/FlutterFlow/shadertoy_to_flutter_skill.git /tmp/shadertoy_to_flutter_skill
mkdir -p ~/.claude/skills
cp -r /tmp/shadertoy_to_flutter_skill/. ~/.claude/skills/shadertoy-to-flutter

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Shadertoy → Flutter shader converter

Convert a Shadertoy fragment shader into a Flutter-compatible `.frag` file that will compile and run under Flutter's `FragmentProgram`/`FragmentShader` API.

## The guiding principle

**Change only what Flutter's runtime forces you to change. Preserve everything else.**

Shadertoy shaders vary wildly — one might be a 3000-line raymarcher using three noise textures and mouse input; another might be a twelve-line procedural pattern with `sin` and `cos`. A good port leaves each shader's shape intact and only rewrites what would fail to compile under Flutter's restrictions.

That means:

- If the source doesn't sample `iChannel*`, **don't add any noise/hash helper functions to the output**. The shader already has its own procedural content — leave it alone.
- Preserve comments, preprocessor blocks (`#if`/`#else`/`#endif`, `#define`), commented-out alternative implementations, author attribution headers, and the author's variable names.
- Don't eagerly resolve preprocessor toggles to a single active branch. If there's a `#define LOOK 1` with `#if LOOK==0` / `#else` branches, keep both branches intact; translate any Shadertoy-isms inside each branch, but leave the toggle structure. The only exception is when an inactive branch uses a feature that can't be ported at all — then call it out in chat but still don't silently delete it.

Read the full skill on GitHub

Details

Skill name: shadertoy-to-flutter
Repository: FlutterFlow/shadertoy_to_flutter_skill
License: MIT
Repo updated: 24 April 2026

FAQ

What does the Shadertoy to Flutter skill do?

How do I install the Shadertoy to Flutter skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add FlutterFlow/shadertoy_to_flutter_skill --skill shadertoy-to-flutter. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Shadertoy to Flutter popular?

It lives in FlutterFlow/shadertoy_to_flutter_skill, which has 15 GitHub stars and 9 forks.

Related skills

Ship It

LunkiBR/ship-it

Use this skill whenever building, reviewing, or auditing any product surface — a mobile app screen, a web app (in-product) screen, a marketing website page, or a cross-screen interaction flow — especially right before calling it done or shipping it. Start here to identify which section (mobile app, web app, website, flow, and more as they're added) the surface belongs to, then drill down to name every pattern (login, checkout, billing, pricing, admin panel, empty state, and more) it should have and flag which are missing — weighed against what this specific product actually is, never applied a

Mobile Development

Swiftui Autotest Skill

yusufkaran/swiftui-autotest-skill

AI-powered visual testing and accessibility setup for iOS/SwiftUI apps. Build, launch in Simulator, test with computer use, detect crashes, analyze memory leaks, and add accessibility identifiers — all from the terminal.

Mobile Development

Swift Patterns

efremidze/swift-patterns-skill

Review, refactor, or build SwiftUI features with correct state management, modern API usage, optimal view composition, navigation patterns, performance optimization, and testing best practices.

Mobile DevelopmentIn 1 list

Swift Focusengine Pro

mhaviv/Swift-FocusEngine-Agent-Skill

Reviews, writes, and fixes focus management code for all Apple platforms (tvOS, iOS/iPadOS, watchOS, visionOS, macOS), covering SwiftUI, UIKit, AppKit, and RealityKit. Use when reading, writing, or reviewing apps that handle focus, hover, key view loops, or Digital Crown navigation.

Mobile Development

Adb Android Control

hah23255/adb-android-control

Comprehensive Android device control via ADB (Android Debug Bridge). Use when user asks about: Android device management, app installation/uninstallation, APK operations, package management, file transfer (push/pull), screenshots, screen recording, input simulation (tap/swipe/text/keyevents), shell commands, logcat viewing, device info (battery/memory/storage), automation scripts, wireless ADB connection, scrcpy mirroring. Keywords: adb, android, phone, tablet, device, apk, install app, uninstall app, screenshot, screen record, tap, swipe, type text, keyevent, logcat, push file, pull file, she

Mobile Development

Flutter Bloc Development

AbdelhakRazi/flutter-bloc-clean-architecture-skill

Build Flutter features using BLoC state management, clean architecture layers, and the project's design system. Apply when creating screens, widgets, or data integrations.

Mobile Development

Browse the most popular Claude skills, all mobile development skills, or write your own with the skills generator.