Ascii Shader Tsx

Generate animated ASCII art, dithered visuals, and shader-like effects as self-contained React/TSX components. Use when the user wants to create ASCII backgrounds, dithered image/video effects, CRT/retro overlays, matrix rain, noise fields, halftone patterns, particle systems, braille art, terminal aesthetics, or any text/character-based visual effect for the web. Supports both generative (procedural, no input) and source-based (images, video, webcam to ASCII) modes. Also triggers when the user wants to convert an image to ASCII, add a dither effect, create a canvas shader component, build a r

5 starsFrontend & Design

Install

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

npx skills add Codeptor/ascii-shader-tsx --skill ascii-shader-tsx

Manual install

git clone --depth 1 https://github.com/Codeptor/ascii-shader-tsx.git /tmp/ascii-shader-tsx
mkdir -p ~/.claude/skills
cp -r /tmp/ascii-shader-tsx/. ~/.claude/skills/ascii-shader-tsx

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

From the SKILL.md

# ASCII Shader TSX

Generate animated ASCII/dither visual effects as self-contained React TypeScript components. Combines the Glyph rendering engine (9 art styles, 8 dithering algorithms, 6 FX presets) with procedural animation techniques (noise fields, particles, value fields, feedback buffers).

## Modes

| Mode | Input | Output |
|------|-------|--------|
| **Generative** | None (or config props) | Procedural animated ASCII backgrounds, noise fields, matrix rain, particles |
| **Source** | Image / video / webcam | Real-time ASCII/dither conversion with art styles and FX |
| **Hybrid** | Source + generative overlays | Image with animated FX layers (CRT, glitch, noise, matrix rain) |

## Stack

Single self-contained `.tsx` file per component. **Zero external dependencies** beyond React.

| Concern | Approach |
|---------|----------|
| Rendering | Canvas 2D API (no WebGL) |
| Animation | `requestAnimationFrame` |
| Responsive | `ResizeObserver` + `devicePixelRatio` |
| Accessibility | `prefers-reduced-motion`, `aria-hidden` |
| TypeScript | Strict mode, fully typed props interface |
| Brightness | BT.709 luminance with sRGB linearization LUT |
| Dithering | Error diffusion + ordered (Bayer) |

## Component Contract

Every generated component follows this structure:

Read the full skill on GitHub

Details

Skill name: ascii-shader-tsx
Repository: Codeptor/ascii-shader-tsx
Repo updated: 18 March 2026

FAQ

What does the Ascii Shader Tsx skill do?

How do I install the Ascii Shader Tsx skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Codeptor/ascii-shader-tsx --skill ascii-shader-tsx. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Ascii Shader Tsx popular?

It lives in Codeptor/ascii-shader-tsx, which has 5 GitHub stars and 0 forks.

Related skills

Design Mapper Skill

bilioveloso/design-mapper-skill

Intelligent design brief router. Takes any design request and emits a structured routing plan — which skills to load, in what order, with what focus parameters. Always load this skill FIRST when receiving a design brief. It is the entry point for the entire modular design system. Trigger on: "design a", "create UI for", "branding for", "what should it look like", "color scheme for", "design brief", "visual identity", "/design", intent=design_brief.

Frontend & Design

AI UIconfig Skill

voderment/AI-UIconfig-skill

Refactor an existing SwiftUI project into a governed UI architecture with render-state boundaries, tokenized styling, preview mocks, and a debug-only runtime tuning + writeback tool. Use when the user wants to improve UI maintainability, live-tune styles, or build a reusable UI debugging workflow without changing the product's visual intent.

Frontend & Design

Design Review

humbleteam/design-review

Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the screen as evidence instead of returning a critique. Trigger phrases - "review this design", "critique this screen", "what's wrong with this UI", "score this design", "which of these two is better", "did the redesign improve this", "should I use a modal or a drawer". Do not use for

Frontend & Design

Toutour

matt-ye/Toutour

Add a spotlight onboarding tour to any website. Analyzes the site's layout, tabs and UI components, interviews the developer (step granularity, mask, languages, theming, trigger mode, library), then generates and Playwright-verifies a guided tour. Use when the user asks for an onboarding tour, product tour, guided walkthrough, coach marks, feature introduction overlay, or says users can't figure out their site.

Frontend & Design

Deslopify

AntonioSpagnol/UI-Deslopify-Skill

Audits and refactors vibe-coded UIs by replacing each slop element with modern 21st.dev components or equivalents with real visual character — never removes without replacing. Runs a mandatory grill-me style interview (one question at a time, with recommendations) before touching files, including brand identity and design references. Use when the user asks to deslopify, refatorar UI, limpar design, refactor UI, clean design, replace components, or when the code has glassmorphism, purple/blue gradients, decorative orbs, spinners, or empty corporate copy.

Frontend & Design

Sprite Forge

isabellagreco1997/sprite-forge

Turn any pixel-art image (real or AI-generated) into clean game sprites, new poses and animations (idle, walk) that keep the character consistent. Use when asked to extract a character from a screenshot, make a sprite, re-pose a sprite, animate a pixel character, build a walk/idle cycle, or put an animated sprite back into its scene.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.