dsheiko

name

css-style-sync

description

Use this skill whenever a user wants to compare CSS computed styles between two webapps (e.g. a legacy app and its replacement, a staging vs. production build, or any "old vs. new" pair) and fix style discrepancies. Triggers when the user mentions comparing styles between two URLs, fixing visual regressions after a migration or rewrite, or syncing CSS from an old site to a new one. Also triggers for phrases like "same styles as legacy", "match the original design", "computed style diff", "CSS doesn't match", or any request to extract and compare computed styles between two pages/selectors. Always use this skill — it runs Playwright automatically to extract styles without the user needing to open DevTools. This skill is app-agnostic: it never assumes a specific framework, port, or URL, and always interviews the user for both targets before running.

CSS Style Sync Skill

Compares computed CSS between two webapps ("legacy"/source and "new"/target) using Playwrigh

dsheiko

// More than a decade ago, I adopted jQuery-style formatting, and I still use it in my JavaScript today. 
// I find that common style like fn(1,[1,2,{a:1}]) is less readable than fn( 1, [ 1, 2, { a: 1 } ] ).
// Below are examples of code that will trigger ESLint warnings about missing surrounding spaces.

const array = [1,2,3]; // should report missing space after '[' and before ']'
const obj = {a:1,b:2}; // should report missing space after '{' and before '}'

const arrayNested = [[ 1 ], { a: 1 }]; // however, nested array should report only inner brackets (this statement is correct)

if(foo){ return; }          // missing spaces

dsheiko

import React from "react";
import http from "http";
import fs from "fs";
import { join } from "path";

import express from "express";
import bodyParser from "body-parser";
import { default as Busboy } from "busboy";

const app = express(),

dsheiko

/**
 * @returns Image[]
 */
function getIncompleteImages() {
  return Array.from( document.querySelectorAll( "img" ) )
    .filter( img => !img.complete || img.naturalWidth === 0 );
}
/**
 * Execute the given callback when all the images in the document loaded
 * We call this function when markup with images is rendered but images are still loading

dsheiko

#! /bin/bash
version=`git diff HEAD^..HEAD -- "$(git rev-parse --show-toplevel)"/package.json | grep -m 1 '^\+.*version' | sed -s 's/[^A-Z0-9\.\-]//g'`

if [[ ! $version =~ ^([0-9]+)\.([0-9]+)\.([0-9]+)(\-[A-Z]+\.[0-9]+)?$ ]]; then
    echo -e "Skip tag: invalid version '$version'"
    exit 1
fi

git tag -a "v$version" -m "`git log -1 --format=%s`"
echo "Created a new tag, v$version"

dsheiko

function loadJs(url){
  return new Promise( (resolve, reject) => {
    if (document.querySelector(`head > script[src="${src}"]`) !== null) return resolve()
    const script = document.createElement("script")
    script.src = url
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  });
}

dsheiko

function getCookie( name ) {
  const value = "; " + document.cookie,
        parts = value.split( "; " + name + "=" );
  if ( parts.length === 2 ) {
    return parts.pop().split( ";" ).shift();
  }
  return null;
}

dsheiko

/*
  Usage:
  <If exp={ true }> components to render </If>
  <If exp={ false }> components not to render </If>
*/
import React from "react";
import PropTypes from "prop-types";

export default class If extends React.Component {

dsheiko

function isPrivateMode() {
        return new Promise((resolve) => {
          const on = function(){ resolve( true ); }
          const off = function(){ resolve(false); }
          const testLocalStorage = function(){ 
            try {
              if ( localStorage.length ) {
                off();
                return;
              } 

dsheiko

#!/bin/bash

STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep ".*Marketplace.*\.js$")

if [[ "$STAGED_FILES" = "" ]]; then
  exit 0
fi


PASS=true