designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인
웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포. 스킬 (packages/skill) - SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로 본문은 절차와 인덱스만, 지식은 references/ 로 분리 - 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기 - 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외 - 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙, SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침 설치 CLI (packages/cli, packages/core) - npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md - 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다 - 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성 - AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입 - Windsurf 는 12,000자 상한 초과 시 설치를 차단 배포 (build/ci, .forgejo/workflows) - 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러 → draft 릴리스 → Cloudflare Pages. 재실행 멱등 근거 (research/) - 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다 테스트 22개 통과 (core 16 · cli 6)
This commit is contained in:
Yun Chan
commit
8808c672dc
135 changed files with 38838 additions and 0 deletions
182
research/canvas/_raw/htex-ex.html
Normal file
182
research/canvas/_raw/htex-ex.html
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>three.js webgl - materials - html texture</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<meta property="og:title" content="three.js webgl - materials - html texture">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://threejs.org/examples/webgl_materials_texture_html.html">
|
||||
<meta property="og:image" content="https://threejs.org/examples/screenshots/webgl_materials_texture_html.jpg">
|
||||
<link type="text/css" rel="stylesheet" href="main.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
#draw_element {
|
||||
width: 600px;
|
||||
background-color: #aaaaaa;
|
||||
color: #000000;
|
||||
font-family: sans-serif;
|
||||
font-size: 30px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
/* border: 10px solid #cccccc; */
|
||||
}
|
||||
#draw_element img {
|
||||
animation: swing 1s ease-in-out infinite alternate;
|
||||
}
|
||||
#draw_element input[type="text"] {
|
||||
font-size: 24px;
|
||||
padding: 8px 12px;
|
||||
border: 2px solid #888;
|
||||
border-radius: 6px;
|
||||
width: 80%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#draw_element button {
|
||||
font-size: 24px;
|
||||
padding: 8px 20px;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
#draw_element button:hover {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
@keyframes swing {
|
||||
from { transform: rotate(-15deg); }
|
||||
to { transform: rotate(15deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="info">
|
||||
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - HTMLTexture
|
||||
</div>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "../build/three.module.js",
|
||||
"three/addons/": "./jsm/",
|
||||
"three-html-render/polyfill": "https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.mjs"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
|
||||
import * as THREE from 'three';
|
||||
import { installHtmlInCanvasPolyfill } from 'three-html-render/polyfill';
|
||||
import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
|
||||
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
|
||||
import { InteractionManager } from 'three/addons/interaction/InteractionManager.js';
|
||||
|
||||
if ( ! ( 'requestPaint' in HTMLCanvasElement.prototype ) ) {
|
||||
|
||||
installHtmlInCanvasPolyfill();
|
||||
info.innerHTML += '<br><a href="https://github.com/WICG/html-in-canvas" target="_blank">HTML-in-Canvas API</a> not available. Using <a href="https://github.com/repalash/three-html-render" target="_blank">polyfill</a>.';
|
||||
|
||||
}
|
||||
|
||||
let camera, scene, renderer, mesh, interactions;
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
|
||||
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||||
|
||||
renderer.toneMapping = THREE.NeutralToneMapping;
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
renderer.setAnimationLoop( animate );
|
||||
document.body.appendChild( renderer.domElement );
|
||||
|
||||
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
|
||||
camera.position.z = 500;
|
||||
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color( 0xaaaaaa );
|
||||
scene.environment = new THREE.PMREMGenerator( renderer ).fromScene( new RoomEnvironment(), 0.02 ).texture;
|
||||
|
||||
// HTML element
|
||||
|
||||
const element = document.createElement( 'div' );
|
||||
element.id = 'draw_element';
|
||||
element.innerHTML = `
|
||||
Hello world!<br>I'm multi-line, <b>formatted</b>,
|
||||
rotated text with emoji (😀), RTL text
|
||||
<span dir=rtl>من فارسی صحبت میکنم</span>,
|
||||
vertical text,
|
||||
<p style="writing-mode: vertical-rl;">
|
||||
这是垂直文本
|
||||
</p>
|
||||
an inline image (<img width="150" src="textures/758px-Canestra_di_frutta_(Caravaggio).jpg">), and
|
||||
<svg width="50" height="50">
|
||||
<circle cx="25" cy="25" r="20" fill="green" />
|
||||
<text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
|
||||
SVG
|
||||
</text>
|
||||
</svg>!
|
||||
<br>
|
||||
<input type="text" placeholder="Type here...">
|
||||
<button>Click me</button>
|
||||
`;
|
||||
|
||||
const geometry = new RoundedBoxGeometry( 200, 200, 200, 10, 10 );
|
||||
|
||||
const material = new THREE.MeshStandardMaterial( { roughness: 0, metalness: 0.5 } );
|
||||
material.map = new THREE.HTMLTexture( element );
|
||||
|
||||
mesh = new THREE.Mesh( geometry, material );
|
||||
scene.add( mesh );
|
||||
|
||||
// Interaction
|
||||
|
||||
interactions = new InteractionManager();
|
||||
interactions.connect( renderer, camera );
|
||||
interactions.add( mesh );
|
||||
|
||||
// Button click handler
|
||||
|
||||
element.querySelector( 'button' ).addEventListener( 'click', function () {
|
||||
|
||||
this.textContent = 'Clicked!';
|
||||
|
||||
} );
|
||||
|
||||
window.addEventListener( 'resize', onWindowResize );
|
||||
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
}
|
||||
|
||||
function animate( time ) {
|
||||
|
||||
mesh.rotation.x = Math.sin( time * 0.0005 ) * 0.5;
|
||||
mesh.rotation.y = Math.cos( time * 0.0008 ) * 0.5;
|
||||
|
||||
interactions.update();
|
||||
|
||||
renderer.render( scene, camera );
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue