This is the canonical instruction file for every coding agent working in this
repository, including Codex and Claude Code. Keep project-wide knowledge here.
CLAUDE.md is only a Claude Code entry point that imports this file; do not
duplicate shared instructions there.
Before changing code:
| // 1. Visit a news website like cnn.com | |
| // 2. paste this into your console | |
| setInterval(() => | |
| document.querySelectorAll('p,img,a,button,h1,h2,h3,span') | |
| .forEach(x=>x.style=`transform:rotate(${Math.random()*777}deg) scale(${Math.random()* 3}); transition:all .5s`) | |
| , 500); | |
| // 3. feel a lil bit better 😘 |
| // 🔥 Node 7.6 has async/await! Here is a quick run down on how async/await works | |
| const axios = require('axios'); // promised based requests - like fetch() | |
| function getCoffee() { | |
| return new Promise(resolve => { | |
| setTimeout(() => resolve('☕'), 2000); // it takes 2 seconds to make coffee | |
| }); | |
| } |
| // eslint-disable-line | |
| /* eslint-disable no-alert, no-console */ | |
| /* eslint-disable */ | |
| alert('foo'); | |
| /* eslint-enable */ | |
| // eslint-disable-line no-use-before-define |
| // NEW API | |
| const sketch = require('sketch'); | |
| const document = sketch.getSelectedDocument(); | |
| const selection = document.selectedLayers; | |
| const layerSelected = selection.layers[0]; | |
| const style = layerSelected.style; | |
| const borders = style.borders; | |
| // OLD API | |
| const doc = context.document; |
| var debug = debug || {}; | |
| debug = { | |
| on : false, | |
| startTime: 0, | |
| partialTime: 0, | |
| // start the profiling | |
| start : function(){ | |
| debug.on = true; | |
| startTime = Date.now(); | |
| partialTime = Date.now(); |
| // Old way | |
| export const LAYERTYPES = { | |
| symbol: { | |
| master: 'MSSymbolMaster', | |
| instance: 'MSSymbolInstance', | |
| }, | |
| artboard: 'MSArtboardGroup', | |
| text: 'MSTextLayer', | |
| group: 'MSLayerGroup', | |
| shape: 'MSShapeGroup', |
| const COLOR = { | |
| keys: { | |
| gray: 'gray', | |
| ultraLight: 'ultra-light', | |
| veryLight: 'very-light', | |
| bright: 'bright', | |
| veryDark: 'very-dark', | |
| veryDarkGray: 'very-dark-gray', | |
| }, | |
| ranges: [ |
| /** | |
| * Outline all classes. | |
| */ | |
| [class] { | |
| outline: 5px solid lightgrey; | |
| } | |
| /** | |
| * Outline all BEM Elements. | |
| */ |