Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

aiskillstore/algorithmic-art

Name: algorithmic-art
Author: aiskillstore

skills/doyajin174/algorithmic-art/SKILL.md

npx skillsauth add aiskillstore/marketplace algorithmic-art

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Algorithmic Art

p5.js를 사용한 제너러티브 아트 생성 가이드입니다.

Two-Phase Process

Phase 1: Algorithmic Philosophy

1. 제너러티브 무브먼트 명명 (예: "Organic Turbulence")
2. 4-6 문단의 계산적 미학 선언문 작성
3. 수학적 프로세스, 노이즈 필드, 창발적 행동 강조
4. "meticulously crafted algorithm" 강조

Phase 2: P5.js Implementation

1. viewer.html 템플릿 기반
2. 자체 포함 HTML artifact 생성
3. Seeded randomness로 재현성 확보
4. 사이드바 컨트롤 구현

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
  <style>
    /* Anthropic 브랜딩 스타일 */
    body { font-family: 'Poppins', sans-serif; }
    .sidebar { /* 사이드바 스타일 */ }
    .canvas-container { /* 캔버스 컨테이너 */ }
  </style>
</head>
<body>
  <div class="sidebar">
    <!-- 시드 컨트롤 -->
    <!-- 파라미터 슬라이더 -->
    <!-- 액션 버튼 -->
  </div>
  <div class="canvas-container"></div>
  <script>
    // p5.js 스케치
  </script>
</body>
</html>

Fixed Elements (변경 금지)

| 요소 | 설명 | |------|------| | Anthropic 브랜딩 | Poppins/Lora 폰트, 라이트 테마 | | 사이드바 구조 | 레이아웃 유지 | | 시드 컨트롤 | Previous/Next/Random/Jump | | 액션 버튼 | Regenerate/Reset/Download |

Variable Elements (커스터마이즈)

| 요소 | 설명 | |------|------| | p5.js 알고리즘 | 완전히 새로 작성 | | 파라미터 정의 | 철학에서 도출 | | UI 컨트롤 | 슬라이더, 체크박스 등 | | 컬러 섹션 | 선택적 |

Core Patterns

Seeded Randomness

let seed = 12345;

function setup() {
  createCanvas(800, 600);
  randomSeed(seed);
  noiseSeed(seed);
}

function regenerate() {
  randomSeed(seed);
  noiseSeed(seed);
  redraw();
}

function nextSeed() {
  seed++;
  regenerate();
}

Noise Field

function draw() {
  for (let x = 0; x < width; x += 10) {
    for (let y = 0; y < height; y += 10) {
      let n = noise(x * 0.01, y * 0.01);
      let angle = n * TWO_PI * 2;

      push();
      translate(x, y);
      rotate(angle);
      line(0, 0, 10, 0);
      pop();
    }
  }
}

Particle System

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  follow(flowfield) {
    let x = floor(this.pos.x / scale);
    let y = floor(this.pos.y / scale);
    let force = flowfield[x + y * cols];
    this.applyForce(force);
  }
}

Parameter Controls

// 사이드바 파라미터
let params = {
  complexity: 5,
  speed: 0.5,
  colorMode: 'gradient'
};

// 슬라이더 생성
function createControls() {
  createSlider(1, 10, params.complexity)
    .input(v => { params.complexity = v; regenerate(); });
}

Download Functionality

function downloadArt() {
  saveCanvas('artwork-' + seed, 'png');
}

function downloadSVG() {
  // SVG 내보내기 로직
}

Philosophy Examples

Organic Turbulence

유기적 난류는 자연의 혼돈 속에서 질서를 찾는다. Perlin 노이즈 필드가 입자들을 흐름에 따라 안내하며, 각 시드는 독특한 리버베드를 생성한다.

Geometric Meditation

기하학적 명상은 반복되는 패턴 속 고요함을 탐구한다. 황금비와 피보나치 수열이 시각적 조화를 이끈다.

Best Practices

재현성: 모든 랜덤은 시드 기반
성능: requestAnimationFrame 활용
반응형: windowResized() 구현
접근성: 키보드 네비게이션 지원
내보내기: PNG/SVG 다운로드 제공

aiskillstore/algorithmic-art

skills/doyajin174/algorithmic-art/SKILL.md

Create generative art using p5.js with seeded randomness. Use this when creating procedural art, interactive visualizations, or algorithmic designs.

234 stars

development

Updated Apr 1, 2026

$ install --global

skillsauth

npx skillsauth add aiskillstore/marketplace algorithmic-art

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 1, 2026, 3:47 PM58.1s2 files scanned

SKILL.md

name:: algorithmic-art
description:: Create generative art using p5.js with seeded randomness. Use this when creating procedural art, interactive visualizations, or algorithmic designs.
allowed-tools:: Read, Glob, Grep, Edit, Write
license:: MIT
author:: anthropics
version:: 1.0

Algorithmic Art

p5.js를 사용한 제너러티브 아트 생성 가이드입니다.

Two-Phase Process

Phase 1: Algorithmic Philosophy

1. 제너러티브 무브먼트 명명 (예: "Organic Turbulence")
2. 4-6 문단의 계산적 미학 선언문 작성
3. 수학적 프로세스, 노이즈 필드, 창발적 행동 강조
4. "meticulously crafted algorithm" 강조

Phase 2: P5.js Implementation

1. viewer.html 템플릿 기반
2. 자체 포함 HTML artifact 생성
3. Seeded randomness로 재현성 확보
4. 사이드바 컨트롤 구현

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
  <style>
    /* Anthropic 브랜딩 스타일 */
    body { font-family: 'Poppins', sans-serif; }
    .sidebar { /* 사이드바 스타일 */ }
    .canvas-container { /* 캔버스 컨테이너 */ }
  </style>
</head>
<body>
  <div class="sidebar">
    <!-- 시드 컨트롤 -->
    <!-- 파라미터 슬라이더 -->
    <!-- 액션 버튼 -->
  </div>
  <div class="canvas-container"></div>
  <script>
    // p5.js 스케치
  </script>
</body>
</html>

Fixed Elements (변경 금지)

Variable Elements (커스터마이즈)

Core Patterns

Seeded Randomness

let seed = 12345;

function setup() {
  createCanvas(800, 600);
  randomSeed(seed);
  noiseSeed(seed);
}

function regenerate() {
  randomSeed(seed);
  noiseSeed(seed);
  redraw();
}

function nextSeed() {
  seed++;
  regenerate();
}

Noise Field

function draw() {
  for (let x = 0; x < width; x += 10) {
    for (let y = 0; y < height; y += 10) {
      let n = noise(x * 0.01, y * 0.01);
      let angle = n * TWO_PI * 2;

      push();
      translate(x, y);
      rotate(angle);
      line(0, 0, 10, 0);
      pop();
    }
  }
}

Particle System

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  follow(flowfield) {
    let x = floor(this.pos.x / scale);
    let y = floor(this.pos.y / scale);
    let force = flowfield[x + y * cols];
    this.applyForce(force);
  }
}

Parameter Controls

// 사이드바 파라미터
let params = {
  complexity: 5,
  speed: 0.5,
  colorMode: 'gradient'
};

// 슬라이더 생성
function createControls() {
  createSlider(1, 10, params.complexity)
    .input(v => { params.complexity = v; regenerate(); });
}

Download Functionality

function downloadArt() {
  saveCanvas('artwork-' + seed, 'png');
}

function downloadSVG() {
  // SVG 내보내기 로직
}

Philosophy Examples

Organic Turbulence

유기적 난류는 자연의 혼돈 속에서 질서를 찾는다. Perlin 노이즈 필드가 입자들을 흐름에 따라 안내하며, 각 시드는 독특한 리버베드를 생성한다.

Geometric Meditation

기하학적 명상은 반복되는 패턴 속 고요함을 탐구한다. 황금비와 피보나치 수열이 시각적 조화를 이끈다.

Best Practices

재현성: 모든 랜덤은 시드 기반
성능: requestAnimationFrame 활용
반응형: windowResized() 구현
접근성: 키보드 네비게이션 지원
내보내기: PNG/SVG 다운로드 제공

Related Skills

aiskillstore/hig-components-content

development

VerifiedTrustedCommunity

Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.

244SKILL.mdUpdated Apr 10, 2026

aiskillstore/hig-components-content

aiskillstore/helpdesk-automation

tools

VerifiedTrustedCommunity

Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.

244SKILL.mdUpdated Apr 10, 2026

aiskillstore/helpdesk-automation

aiskillstore/haskell-pro

testing

VerifiedTrustedCommunity

Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.

244SKILL.mdUpdated Apr 10, 2026

aiskillstore/haskell-pro

aiskillstore/graphql

tools

VerifiedTrustedCommunity

GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.

244SKILL.mdUpdated Apr 10, 2026

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/aiskillstore/marketplace.git

# Copy into Claude Code skills folder (global)
cp -r marketplace/skills/doyajin174/algorithmic-art ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

aiskillstore/marketplace

234 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT