corysimmons

name	description
anim	Tasteful, subtle web animations following Emil Kowalski's philosophy and animations.dev principles. Use this skill when adding motion to interfaces - hover states, page transitions, micro-interactions, loading states, or any UI animation. Produces refined, purposeful motion that enhances UX without becoming decorative noise.

Tasteful Web Animation

This skill implements refined, purposeful animations inspired by Emil Kowalski's work and the principles from animations.dev. The goal is motion that feels inevitable and natural - not decorative or attention-seeking.

Core Philosophy

corysimmons

{
  "animation": {
    "none": "none",
    "spin": "spin 1s linear infinite",
    "ping": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
    "pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
    "bounce": "bounce 1s infinite"
  },
  "aria": {
    "busy": "busy=\"true\"",

corysimmons

{
  "1984": {
    "slug": "vscode-theme-1984",
    "description": "🎶I'm gonna show you where it's dark, but have no fear 🎶",
    "vscUid": "juanmnl.vscode-theme-1984",
    "vscExtensionId": "0f087222-4e48-423c-be9b-5cae196de4bc",
    "installs": 38694,
    "trendingDaily": 0.005171165580721895,
    "trendingWeekly": 0.444720239942083,

corysimmons

[
  "https://vscodethemes.com/e/ms-vscode.cpptools-themes.json",
  "https://vscodethemes.com/e/github.github-vscode-theme.json",
  "https://vscodethemes.com/e/ms-vscode.powershell.json",
  "https://vscodethemes.com/e/zhuangtongfa.material-theme.json",
  "https://vscodethemes.com/e/dracula-theme.theme-dracula.json",
  "https://vscodethemes.com/e/akamud.vscode-theme-onedark.json",
  "https://vscodethemes.com/e/equinusocio.vsc-community-material-theme.json",
  "https://vscodethemes.com/e/equinusocio.vsc-material-theme.json",
  "https://vscodethemes.com/e/johnpapa.winteriscoming.json",

corysimmons

'use server';
import { useServerFetch } from '../hooks/useServerFetch';

export default async function Page() {
  const { loading, error, data } = useServerFetch<any>('/api/123');
  if (loading) return <h1>loading</h1>;
  if (error) return <h1>{error.message}</h1>;
  return <h1>{JSON.stringify(data)}</h1>;
}

corysimmons

'use server';
import { useServerFetch } from '../hooks/useServerFetch';

export default async function Page() {
  const { loading, error, data } = useServerFetch<any>('/api/123');
  if (loading) return <h1>loading</h1>;
  if (error) return <h1>{error.message}</h1>;
  return <h1>{JSON.stringify(data)}</h1>;
}

corysimmons

'use client'
import React, { useRef, useState, useEffect } from 'react';
import { useWavesurfer } from '@wavesurfer/react';
import * as Tone from 'tone';

export default function Page() {
  const containerRef = useRef<HTMLDivElement>(null);
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const [playing, setPlaying] = useState(false);
  const pitchShift = useRef<Tone.PitchShift | null>(null);

corysimmons

// Usage
<div style={{ width: "calc(100vw - 200px)" }}> // Fixed width container
  <DraggableScrollContainer className="styled-scrollbars"> // Style those huge/ugly scrollbars to be aesthetic
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>

corysimmons

import ExpoModulesCore
import SwiftUI

public class SwiftuiViewModule: Module {
  public func definition() -> ModuleDefinition {
    Name("SwiftuiForm")
      View(SwiftuiView.self) {
          Prop("name") { (view, name: String) in
              view.name = name
          }

corysimmons

package expo.modules.jetpackcomposeview

import android.content.Context
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*