Skills for Designers and Engineers.

animation cursor codex design-engineering agent-skills claude-code

• Updated Nov 11, 2026
• Markdown

Animated components for design engineers. 150+ free shadcn/ui components, built with Tailwind CSS and Motion. MIT licensed.

react components typescript nextjs tailwindcss framer-motion design-engineering shadcn-ui

• Updated Oct 29, 2026
• TypeScript

A library of creative canvas components. Real HTML with WebGL effects running over it. React, Vue, Svelte, vanilla.

react components threejs typescript ui canvas vue frontend creative-coding shaders animation nextjs glsl svelte component-library ui-library design-engineering shadcn weggl

• Updated Nov 8, 2026
• TypeScript

Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.

nodejs css cli open-source design-systems mcp reverse-engineering developer-experience design-tokens tailwind-css design-ops design-to-code playwright design-engineering dtcg claude-code ui-audit brand-audits design-md token-drift

• Updated Nov 1, 2026
• TypeScript

Resources for design engineers.

engineering design list awesome resource directory resources design-engineering design-engineer

• Updated Nov 7, 2026
• TypeScript

Voice AI components using OpenAI Realtime API to copy and paste into your Nextjs projects built with TailwindCSS for building modern Voice AI applications with WebRTC.

ui animation nextjs webrtc openai component-library ui-components voice-assistant ui-library tailwindcss framer-motion voice-ai design-engineering shadcn vapiblocks openai-realtime-api realtime-beta

• Updated Dec 31, 2024
• TypeScript

Premium React components you install with shadcn. Styled by your theme, yours to change. Free and open source.

react components typescript reactjs nextjs motion ui-library tailwindcss design-engineering shadcn-ui shadcn

• Updated Nov 11, 2026
• TypeScript

Real letters by ordinary people, 1395–1929, written out live by writers who never existed. Every hand is a free font.

react fonts procedural-generation typography public-domain text-editor interaction-design letters handwriting micro-interactions generative-design vite design-engineering open-source-fonts

• Updated Nov 8, 2026
• TypeScript

200 web animation examples with copy-ready AI prompts + MotionLens: turn any site's animation into a prompt. React, TypeScript, Framer Motion, Three.js

react ui-design threejs typescript frontend inspiration animation developer-tools web-design motion-design animation-library micro-interactions css-animation web-animations vite framer-motion design-engineering prompt-engineering ai-prompts cursor-rules

• Updated Sep 19, 2026
• TypeScript

A liquid glass material you can take apart, tune and copy as CSS: a refracting thick rim, wallpaper-adaptive ink and live wallpapers, in a playground.

css playground webgl svg-filters refraction backdrop-filter design-engineering glassmorphism liquid-glass

• Updated Nov 5, 2026
• JavaScript

Take a real UI component apart. A Claude Code skill + runtime that explodes a live component into paint layers, states and tokens. Nothing is redrawn, no number is typed.

react css design-systems isometric ui-components design-tokens design-engineering agent-skills claude-code component-documentation

• Updated Oct 13, 2026
• JavaScript

Design engineering for AI coding tools. Brand identity + design projects, from strategy to code.

cli open-source design-systems terminal ai npm-package design-engineering ai-tools claude-code

• Updated Jun 7, 2026
• JavaScript

The design layer for agentic AI — design context, interface checks, and verification for coding agents.

cli design-systems typescript frontend mcp design-tokens figma ai-agents tailwindcss figma-to-code design-engineering shadcn coding-agents agentic-ai mcp-server agent-skills shadcn-registry codex-plugin ux-audit ui-quality

• Updated Nov 4, 2026
• TypeScript

Skills I use with coding agents for interface, motion, sound and launch film work.

svg ui skills animation cursor design-tokens codex sound-design design-engineering agent-skills claude-code launch-video

• Updated Nov 12, 2026
• JavaScript

Figma-style layout grids, rulers, snapping guides, and DOM geometry inspection for browser-based apps

grid frontend layout developer-tools guides ui-development design-engineering

• Updated Aug 20, 2026
• TypeScript

Design CLI for Claude Code, Codex and Antigravity: describe the UI in plain words, get web, Figma and SwiftUI output through deterministic taste gates. FREE + source-available (PolyForm Shield).

cli typescript accessibility developer-tools design-tokens figma codex design-system ai-agents tailwindcss swiftui figma-plugin design-engineering ui-generation antigravity claude-code design-cli

• Updated Nov 12, 2026
• TypeScript

A place with 9 fun framer motion creations 😊

react css design animations framer-motion design-engineering

• Updated Feb 6, 2025
• TypeScript

CellMotion：可编辑的文字、图标与媒体动效，导出 PNG/GIF/MP4，可交给 AI 前端复用 / Editable motion for type, icons and media

webgl canvas animation typography motion-design design-engineering video-export

• Updated Nov 8, 2026
• JavaScript

An open-source catalog for discovering, sharing and curating design and web development resources.

open-source design ui-design share web-development frontend resources design-resources design-engineering

• Updated Jul 23, 2026
• TypeScript

Agent skills for motion craft from SoraLabs — animating-icons & motion-meaning

svg animation icons motion-design design-engineering claude-code claude-skill

• Updated Aug 28, 2026
• TypeScript