GenerateBlocks 스킬
GenerateBlocks WordPress 플러그인을 위한 LLM 최적화 스킬 문서 및 개발 리소스입니다.
GenerateBlocks 무료 2.3 및 GB Pro 2.6 버전의 소스 코드를 기반으로 검증됨 (2026년 6월 기준). 이 스킬에 포함된 모든 블록 스키마, 속성 순서, 동적 태그는 훈련 데이터에서 기억한 것이 아닌, 이 저장소의 플러그인 소스 코드를 통해 확인되었습니다.
이 스킬로 만들 수 있는 것
- 정적 섹션 — 히어로, 가격표, 카드, FAQ, CTA, 전체 랜딩 페이지
- 동적 콘텐츠 — 쿼리 루프(블로그 그리드, 관련 글, 아카이브), 정확한 구문을 갖춘 27개 동적 태그
- 사용자 정의 필드 — ACF 텍스트/이미지/링크/그룹 필드, 반복자 루프, 옵션 페이지, 메타 쿼리
- 애니메이션 — 호버 미세 상호작용, 키프레임 진입, CSS 스크롤 기반 표시, 축소 모션 보호
- 조건부 로직 — GB Pro 블록/메뉴 조건, 양식 필드 조건, 무료 플러그인 대안
- GB Pro 블록 — 아코디언, 탭, 캐러셀, 내비게이션, 사이트 헤더, 오버레이/메가 메뉴, 2.6 Forms 시스템
- 전체 사이트 템플릿 — GeneratePress 요소(루프 템플릿, 페이지 히어로, 훅, 표시 규칙), FSE 블록 테마
빠른 설치
AI 코딩 어시스턴트에 스킬을 한 번의 명령으로 설치하세요:
git clone https://github.com/wpgaurav/generateblocks-skills.git
cd generateblocks-skills
chmod +x install.sh
./install.sh
이 명령은 대화형 설치 프로그램을 실행하여 원하는 도구에 맞게 스킬을 설정합니다.
지원 도구
| 도구 | 설치 위치 | 형식 |
|---|---|---|
| Claude Code | ~/.claude/skills/ | 스킬 디렉토리 |
| Cursor | ~/.cursor/skills/ | 스킬 디렉토리 |
| Windsurf | ~/.windsurf/rules/ | 통합 마크다운 |
| OpenAI Codex CLI | ~/.codex/instructions.md | 통합 마크다운 |
| Gemini CLI | GEMINI.md (프로젝트 루트) | 통합 마크다운 |
| GitHub Copilot | .github/copilot-instructions.md | 통합 마크다운 |
| Cline / Roo Code | .clinerules (프로젝트 루트) | 통합 마크다운 |
| Aider | CONVENTIONS.md (프로젝트 루트) | 통합 마크다운 |
설치 옵션
./install.sh # 대화형 모드 (도구 선택)
./install.sh --all # 모든 도구에 설치
./install.sh claude # Claude Code만 설치
./install.sh cursor codex # 여러 도구 동시 설치
./install.sh --help # 도움말 표시
대안: 수동 설정
설치 프로그램을 사용하지 않으려면 두 가지 옵션이 있습니다:
옵션 A: 스킬 파일 업로드
.skill 파일을 다운로드하여 Claude.ai, ChatGPT, Gemini 등 모든 AI 어시스턴트에서 새 채팅 시작 시 업로드하세요.
| 스킬 | 다운로드 |
|---|---|
| GenerateBlocks 레이아웃 | .skill |
| HTML to GenerateBlocks | .skill |
| Elementor to GenerateBlocks | .skill |
| Figma to GenerateBlocks | .skill |
옵션 B: AI에 스킬 파일 참조
Claude Code, Cursor 또는 Windsurf에서 스킬 파일을 직접 참조하세요:
Read skills/generateblocks-layouts/SKILL.md and create a testimonial slider with 3 cards
스킬 파일 직접 링크:
skills/generateblocks-layouts/SKILL.mdskills/html-to-generateblocks/SKILL.mdskills/elementor-to-generateblocks/SKILL.mdskills/figma-to-generateblocks/SKILL.md
복사-붙여넣기 예제
examples/ 폴더에서 14개 섹션 유형에 걸쳐 38개의 즉시 사용 가능한 템플릿을 찾아보세요:
| 섹션 | 설명 |
|---|---|
| 히어로 섹션 | 통계 바, 이중 CTA (5가지 변형) |
| 가격표 | " ,"," :"," ,"," :"," ,"," :"," ,"," :"," ,"," :"," ," |
각 폴더에는 여러 변형과 이를 생성한 프롬프트가 포함되어 있습니다. 완전 동적 쿼리 루프 블로그 그리드는 skills/generateblocks-layouts/examples/layouts/query-blog-grid.html에 있습니다.
보너스: examples/from-gauravtiwari-org/에서 실제 운영 사이트에서 내보낸 실제 섹션을 확인하세요.
예제 사용법
examples/폴더를 엽니다.output-*.html파일 내용을 복사합니다.- WordPress에서 페이지/글을 엽니다.
- 코드 편집기로 전환합니다 (세 점 메뉴 > 코드 편집기).
- 블록을 붙여넣습니다.
- 시각 편집기로 다시 전환합니다.
포함된 항목
generateblocks-skills/
├── install.sh # 다중 도구 스킬 설치 프로그램
├── CLAUDE.md # Claude Code 프로젝트 지침
├── AGENTS.md # 범용 LLM 지침
├── skills/ # 스킬 소스 파일
│ ├── generateblocks-layouts/
│ │ ├── SKILL.md # 주요 진입점 (간결 — 상세 내용은 references/)
│ │ ├── references/ # 23개 참조 파일 (아래 지도 참조)
│ │ └── examples/ # 기본, 복합, 레이아웃, SVG 예제
│ ├── html-to-generateblocks/
│ ├── elementor-to-generateblocks/
│ └── figma-to-generateblocks/
├── importable/ # 업로드용 .skill 및 .zip 파일
├── examples/ # 14개 섹션에 걸친 38개 골든 예제
├── generateblocks/ # 참조용 플러그인 소스 (2.3.0-rc)
└── generateblocks-pro/ # Pro 플러그인 소스 (2.6.0-rc)
스킬
| 스킬 | 목적 |
|---|---|
| GenerateBlocks 레이아웃 | GB V2로 모든 것 만들기: 정적 섹션, 쿼리 루프, 동적 태그, ACF 데이터, 애니메이션, 조건, Pro 양식/대화형 블록, 전체 사이트 템플릿 |
| HTML to GenerateBlocks | HTML/CSS를 GenerateBlocks 블록 마크업으로 변환 |
| Elementor to GenerateBlocks | Elementor 레이아웃을 깔끔한 GB 블록으로 마이그레이션 |
| Figma to GenerateBlocks | Figma 디자인을 GB 블록으로 변환 |
참조 지도 (generateblocks-layouts/references/)
| 파일 | 내용 |
|---|---|
_index.md | 작업 라우터 — 어떤 작업에 어떤 파일을 로드할지 |
recovery-rules.md | 알려진 모든 "Attempt Recovery" 오류 원인 + 정확한 수정 방법 |
field-notes.md | 실제 변환 교훈: 이스케이프 워크플로, 검증 스크립트 |
block-types.md | 요소/텍스트/미디어/쉐이프 검증된 속성 스키마 |
dynamic-tags.md | 27개 동적 태그의 정식 카탈로그 + 정확한 구문 |
query-block.md | 쿼리/루퍼/루프-아이템 + Pro 쿼리 확장 |
acf-and-custom-fields.md | ACF 필드, 반복자 루프, 옵션 페이지, Meta Box |
conditions.md | Pro 블록/메뉴/양식 조건 + 무료 대안 |
template-authoring.md | 전체 사이트: GeneratePress 요소, FSE, 아카이브 템플릿 |
animations.md | 호버, 키프레임, 스크롤 기반 애니메이션, 축소 모션 |
gb-pro.md | Pro 기능 지도 (28개 블록, 전역 클래스, 버전 타임라인) |
pro-forms.md | Pro 2.6 Forms: 필드, 검증, ESP 통합, Turnstile |
pro-interactive.md | 아코디언, 탭, 캐러셀, 내비게이션, 사이트 헤더, 오버레이 |
css-patterns.md · svg-icons.md · responsive.md | 스타일링 패턴 |
global-styles.md · patterns.md · performance.md · migrations.md · troubleshooting.md | 지원 가이드 |
가져오기 가능 형식
importable/ 폴더에는 각 스킬에 대해 두 가지 형식이 있습니다:
.skill— 모든 AI 채팅에 업로드 가능 (Claude.ai, ChatGPT, Gemini).zip— 참조 파일이 포함된 압축 스킬
GenerateBlocks V2 빠른 참조
4개의 핵심 블록과 쿼리 패밀리:
generateblocks/element → 컨테이너 (div, section, nav, figure, a, ul/ol/li, dl/dt/dd)
generateblocks/text → 텍스트 (h1-h6, p, span, div, a, button, figcaption, li)
generateblocks/media → 이미지 (img만 — 정적 및 동적)
generateblocks/shape → SVG 아이콘
generateblocks/query → 동적 목록 (+ looper, loop-item, query-no-results, query-page-numbers)
가장 중요한 규칙:
generateblocks/element사용 (/container아님),generateblocks/text사용 (/headline또는/button아님)htmlAttributes는 일반 객체입니다 ({"href":"https://example.com/about/"}) — 절대 배열이 아님- 링크: 요소
<a>가 텍스트span자식을 감쌉니다. 텍스트<a>는 저장 시 href가 제거됨; 원시 텍스트가 있는 요소<a>는 복구를 트리거함 - JSON 속성 순서는 각 블록의
block.json선언 순서를 따르며,className이 마지막입니다. css문자열은 한 줄, 축소, 알파벳 순입니다 — 호버 상태는styles객체에 있습니다.
블록 형식 (옵션 A — 플러그인이 id-class를 자동으로 주입):
<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{...},"css":"...","className":"gb-element"} -->
<section class="gb-element-hero001 gb-element">
<!-- 콘텐츠 -->
</section>
<!-- /wp:generateblocks/element -->
동적 태그 — 태그 이름 뒤에 공백, 파이프로 구분된 옵션, 따옴표 없음:
{{post_title link:post}}
{{post_permalink}}
{{featured_image size:large}}
{{post_excerpt length:25}}
{{post_date dateFormat:M j, Y}}
{{term_list tax:category|sep:, }}
{{post_meta key:my_acf_field}}
{{post_meta key:repeater.0.subfield}}
{{post_url}}, {{featured_image_url}}, {{post_terms}}, {{acf}} 및 key="quoted" 형식은 존재하지 않습니다 — 저장은 잘 되지만 리터럴 텍스트로 렌더링됩니다. 전체 카탈로그는 references/dynamic-tags.md에 있습니다.
프롬프트 예시
"헤드라인, 서브헤드라인, 두 개의 CTA 버튼, 그리고 4개의 통계 막대가 있는 히어로 섹션을 만들어 주세요."
"가운데 티어가 강조된 3열 가격표를 만들어 주세요."
"관련 글 섹션을 만드세요: 같은 카테고리의 글 3개, 현재 글 제외."
"ACF 반복자 team_members를 3열 팀 그리드로 반복하세요."
"쿼리를 상속하는 GeneratePress 요소용 아카이브 루프 템플릿을 만드세요."
"이 섹션에 축소 모션 대비가 있는 스크롤 표시 애니메이션을 추가하세요."
"이 HTML을 GenerateBlocks로 변환하세요: [HTML 붙여넣기]"
제한 사항
- 외부 URL 없음 — HTML, 스크린샷 또는 설명을 제공하세요.
- 사용자 정의 JavaScript 없음 — 상호작용은 CSS 전용이며, GB Pro의 내장 JS 블록(아코디언, 탭, 캐러셀, 오버레이, 즉시 페이지네이션)을 사용하세요.
- 이미지 자리 표시자 — 생성 후 실제 이미지로 교체하세요.
- 호버 추론 — 정적 디자인에서 대화형 상태가 추론됩니다.
- UI 관리 설정 — 조건 규칙, 양식 작업, 오버레이 트리거 및 표시 규칙은 wp-admin에서 구성되며, 블록 마크업에 포함되지 않습니다. 스킬은 이를 수동 단계로 나열합니다.
- Pro 2.6 / 무료 2.3 기능 (Forms, CSS 모드)은 2026년 6월 기준 베타입니다 — 안정적인 릴리스의 사이트에는 아직 없습니다.
개발
cd generateblocks
npm run build # 프로덕션 빌드
npm run start # 감시 모드
npm run test:unit # Jest 단위 테스트
npm run test:e2e # Playwright E2E
npm run wp-env:start # 로컬 WordPress
기타 LLM
Claude 이외의 어시스턴트(GPT, Gemini 등)의 경우, **AGENTS.md**에서 범용 지침을 확인하세요 — 또는 ./install.sh를 실행하여 도구를 자동으로 설정하세요.
라이선스
- 플러그인 소스 코드: GPL-2.0-or-later
- 스킬 문서: MIT