{"id":47915631,"url":"https://github.com/wpgaurav/generateblocks-skills","last_synced_at":"2026-04-04T05:34:33.798Z","repository":{"id":333972052,"uuid":"1133490098","full_name":"wpgaurav/generateblocks-skills","owner":"wpgaurav","description":"GenerateBlocks Skills to create better layouts with AI tools.","archived":false,"fork":false,"pushed_at":"2026-03-23T02:21:17.000Z","size":2514,"stargazers_count":59,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-23T22:34:25.120Z","etag":null,"topics":["agentic-workflow","agents","ai-skills","block-editor","generateblocks","generatepress","gutenberg","gutenberg-blocks","wordpress","wordpress-development"],"latest_commit_sha":null,"homepage":"https://gauravtiwari.org/wordpress-plugins/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wpgaurav.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-13T12:21:13.000Z","updated_at":"2026-03-23T09:14:10.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/wpgaurav/generateblocks-skills","commit_stats":null,"previous_names":["wpgaurav/generateblocks-skills"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wpgaurav/generateblocks-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2Fgenerateblocks-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2Fgenerateblocks-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2Fgenerateblocks-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2Fgenerateblocks-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wpgaurav","download_url":"https://codeload.github.com/wpgaurav/generateblocks-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2Fgenerateblocks-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31389385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T04:26:24.776Z","status":"ssl_error","status_checked_at":"2026-04-04T04:23:34.147Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agentic-workflow","agents","ai-skills","block-editor","generateblocks","generatepress","gutenberg","gutenberg-blocks","wordpress","wordpress-development"],"created_at":"2026-04-04T05:34:33.202Z","updated_at":"2026-04-04T05:34:33.789Z","avatar_url":"https://github.com/wpgaurav.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GenerateBlocks Skills\n\nLLM-optimized skill documentation and development resources for [GenerateBlocks](https://generateblocks.com/) WordPress plugin.\n\n## Quick Install\n\nInstall skills for your AI coding assistant with one command:\n\n```bash\ngit clone https://github.com/wpgaurav/generateblocks-skills.git\ncd generateblocks-skills\nchmod +x install.sh\n./install.sh\n```\n\nThis launches an interactive installer that sets up skills for your preferred tools.\n\n### Supported Tools\n\n| Tool | Install Location | Format |\n|------|-----------------|--------|\n| **Claude Code** | `~/.claude/skills/` | Skill directories |\n| **Cursor** | `~/.cursor/skills/` | Skill directories |\n| **Windsurf** | `~/.windsurf/rules/` | Combined markdown |\n| **OpenAI Codex CLI** | `~/.codex/instructions.md` | Combined markdown |\n| **Gemini CLI** | `GEMINI.md` (project root) | Combined markdown |\n| **GitHub Copilot** | `.github/copilot-instructions.md` | Combined markdown |\n| **Cline / Roo Code** | `.clinerules` (project root) | Combined markdown |\n| **Aider** | `CONVENTIONS.md` (project root) | Combined markdown |\n\n### Install Options\n\n```bash\n./install.sh              # Interactive mode (choose tools)\n./install.sh --all        # Install for all tools\n./install.sh claude       # Claude Code only\n./install.sh cursor codex # Multiple tools at once\n./install.sh --help       # Show help\n```\n\n---\n\n## Alternative: Manual Setup\n\nIf you prefer not to use the installer, you have two options:\n\n### Option A: Upload a Skill File\n\nDownload a `.skill` file and upload it at the start of a new chat in Claude.ai, ChatGPT, Gemini, or any AI assistant.\n\n| Skill | Download |\n|-------|----------|\n| **GenerateBlocks Layouts** | [.skill](importable/generateblocks-layouts.skill) |\n| **HTML to GenerateBlocks** | [.skill](importable/html-to-generateblocks.skill) |\n| **Elementor to GenerateBlocks** | [.skill](importable/elementor-to-generateblocks.skill) |\n| **Figma to GenerateBlocks** | [.skill](importable/figma-to-generateblocks.skill) |\n\n### Option B: Point Your AI to the Skill File\n\nWith Claude Code, Cursor, or Windsurf, just reference the skill directly:\n\n```\nRead skills/generateblocks-layouts/SKILL.md and create a testimonial slider with 3 cards\n```\n\nDirect links to skill files:\n- [`skills/generateblocks-layouts/SKILL.md`](skills/generateblocks-layouts/SKILL.md)\n- [`skills/html-to-generateblocks/SKILL.md`](skills/html-to-generateblocks/SKILL.md)\n- [`skills/elementor-to-generateblocks/SKILL.md`](skills/elementor-to-generateblocks/SKILL.md)\n- [`skills/figma-to-generateblocks/SKILL.md`](skills/figma-to-generateblocks/SKILL.md)\n\n---\n\n## Copy-Paste Examples\n\nBrowse the [`examples/`](examples/) folder for **38 ready-to-use templates** across 14 section types:\n\n| Section | Description |\n|---------|-------------|\n| [Hero Section](examples/01-hero/) | Stats bar, dual CTAs (5 variations) |\n| [Pricing Table](examples/02-pricing/) | 3-tier with \"Popular\" badge |\n| [Card Grid](examples/03-card-grid/) | Blog posts, portfolio |\n| [Feature List](examples/04-feature-list/) | 6 features with icons |\n| [FAQ Section](examples/05-faq/) | Numbered Q\u0026A, two columns |\n| [Testimonials](examples/06-testimonials/) | Quotes, avatars, stars |\n| [Sticky CTA](examples/07-sticky-cta/) | Dark banner, dual buttons |\n| [Post Grid](examples/08-post-grid/) | Featured + small posts |\n| [Stats Section](examples/09-stats/) | 4 metrics on dark bg |\n| [Services Grid](examples/10-services/) | Bento layout |\n| [Logo Carousel](examples/11-logo-carousel/) | Client/partner logos |\n| [Team Grid](examples/12-team-grid/) | Team member cards |\n| [Timeline](examples/13-timeline/) | Vertical timeline |\n| [Comparison Table](examples/14-comparison-table/) | Feature comparison |\n\nEach folder contains multiple variations plus the prompt that generated them.\n\n**Bonus:** Check out [`examples/from-gauravtiwari-org/`](examples/from-gauravtiwari-org/) for real-world sections from production sites.\n\n### Using Examples\n\n1. Open any [`examples/`](examples/) folder\n2. Copy any `output-*.html` file content\n3. In WordPress, open your page/post\n4. Switch to Code Editor (three dots menu \u003e Code Editor)\n5. Paste the blocks\n6. Switch back to Visual Editor\n\n---\n\n## What's Included\n\n```\ngenerateblocks-skills/\n├── install.sh                 # Multi-tool skill installer\n├── CLAUDE.md                  # Claude Code project instructions\n├── AGENTS.md                  # Universal LLM instructions\n├── skills/                    # Skill source files\n│   ├── generateblocks-layouts/\n│   │   ├── SKILL.md           # Main entry point\n│   │   ├── references/        # Block types, CSS, responsive, queries, etc.\n│   │   └── examples/          # Basic, compound, layout, SVG examples\n│   ├── html-to-generateblocks/\n│   ├── elementor-to-generateblocks/\n│   └── figma-to-generateblocks/\n├── importable/                # .skill and .zip files for upload\n├── examples/                  # 38 golden examples across 14 sections\n└── generateblocks/            # Plugin source (V2.2.0) for reference\n```\n\n### Skills\n\n| Skill | Purpose |\n|-------|---------|\n| **GenerateBlocks Layouts** | Build layouts using GB V2 blocks (element, text, media, shape) |\n| **HTML to GenerateBlocks** | Convert HTML/CSS to GenerateBlocks block markup |\n| **Elementor to GenerateBlocks** | Migrate Elementor layouts to clean GB blocks |\n| **Figma to GenerateBlocks** | Convert Figma designs to GB blocks |\n\n### Importable Formats\n\nThe `importable/` folder contains two formats for each skill:\n- **`.skill`** — Upload to any AI chat (Claude.ai, ChatGPT, Gemini)\n- **`.zip`** — Compressed skill with references included\n\n---\n\n## GenerateBlocks V2 Quick Reference\n\nFour block types:\n\n```\ngenerateblocks/element  → Containers (div, section, nav, etc.)\ngenerateblocks/text     → Text (h1-h6, p, span, a, button)\ngenerateblocks/media    → Images\ngenerateblocks/shape    → SVG icons\n```\n\n**V2 Naming Rules:**\n- Use `generateblocks/element` (NOT `/container`)\n- Use `generateblocks/text` (NOT `/headline` or `/button`)\n- Classes MUST be: `gb-element-{id} gb-element` and `gb-text gb-text-{id}`\n- `htmlAttributes` must be a plain object (`{\"href\":\"/about\"}`) — never an array\n- Element `\u003ca\u003e` with text-only content causes recovery errors — use `generateblocks/text` with `tagName: \"a\"` for simple text links; only use `generateblocks/element` with `tagName: \"a\"` when wrapping inner blocks\n\nBlock format:\n\n```html\n\u003c!-- wp:generateblocks/element {\"uniqueId\":\"hero001\",\"className\":\"gb-element-hero001 gb-element\",\"tagName\":\"section\",\"styles\":{...},\"css\":\"...\"} --\u003e\n\u003csection class=\"gb-element-hero001 gb-element\"\u003e\n    \u003c!-- content --\u003e\n\u003c/section\u003e\n\u003c!-- /wp:generateblocks/element --\u003e\n\n\u003c!-- wp:generateblocks/text {\"uniqueId\":\"hero002\",\"tagName\":\"h1\",\"styles\":{...},\"css\":\"...\"} --\u003e\n\u003ch1 class=\"gb-text gb-text-hero002\"\u003eHeading\u003c/h1\u003e\n\u003c!-- /wp:generateblocks/text --\u003e\n```\n\nKey attributes:\n- `uniqueId` — Required for CSS targeting (format: `hero001`, `card023`)\n- `tagName` — HTML element type\n- `styles` — CSS properties as JSON (camelCase)\n- `css` — Base CSS string (minified, alphabetically sorted). Pseudo-elements, media queries in css. NO hover/transitions\n- `htmlAttributes` — Additional HTML attributes (href, target, aria-*)\n\n---\n\n## Example Prompts\n\n\u003e \"Create a hero section with headline, subheadline, two CTA buttons, and a 4-stat bar\"\n\n\u003e \"Build a 3-column pricing table with a highlighted middle tier\"\n\n\u003e \"Make a testimonial grid with avatars, star ratings, and quote marks\"\n\n\u003e \"Convert this HTML to GenerateBlocks: [paste HTML]\"\n\n---\n\n## Limitations\n\n- **No external URLs** — Provide HTML, screenshots, or descriptions\n- **Static output** — CSS-only, no JavaScript interactions\n- **Placeholder images** — Replace with real images after generation\n- **Hover inference** — Interactive states inferred from static designs\n\n---\n\n## Development\n\n```bash\ncd generateblocks\n\nnpm run build          # Production build\nnpm run start          # Watch mode\nnpm run test:unit      # Jest unit tests\nnpm run test:e2e       # Playwright E2E\nnpm run wp-env:start   # Local WordPress\n```\n\n---\n\n## Other LLMs\n\nFor non-Claude assistants (GPT, Gemini, etc.), see **`AGENTS.md`** for universal instructions — or just run `./install.sh` to set up your tool automatically.\n\n## License\n\n- Plugin source code: GPL-2.0-or-later\n- Skill documentation: MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpgaurav%2Fgenerateblocks-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwpgaurav%2Fgenerateblocks-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpgaurav%2Fgenerateblocks-skills/lists"}