Menú
Use when creating or improving Drupal.org project page body markup.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Use when working on public Drupal.org Schema.org Blueprints module issues, including queue scouting, local issue tracking, issue-fork review, scoped contribution work, or assessing ecosystem impact.
Use when traversing a public Drupal.org project issue queue, maintaining local Markdown issue notes, reviewing issue forks or merge requests, or preparing scoped contribution work.
Use when working on public Drupal.org Webform module issues, including queue scouting, local issue tracking, issue-fork review, or scoped Webform contribution work.
Use when working on private Webform security issues in Drupal GitLab.
Use when cloning a known Drupal.org project machine name for local contribution work.
Use when creating logo prompt ideas for a Drupal.org module or theme.
| name | drupalorg-project-page |
| description | Use when creating or improving Drupal.org project page body markup. |
Generate or improve Drupal.org project page HTML markup using the bluecheese theme's CSS component vocabulary and established page conventions.
Use this skill when the user:
Drupal.org uses the "bluecheese" theme. These are the CSS classes available for project page body content:
| Component | Class / Pattern | Notes |
|---|---|---|
| Primary CTA button | <a class="action-button"> | Use for main calls to action |
| Secondary button | <a class="secondary-button"> | Subtler CTA; prefer over .action-button for non-primary CTAs in new pages |
| Inline link button | <a class="link-button"> | Inline link styled as a button |
| Info callout | <div class="note"> | General info box; also used for maintainer cards and screenshot wrappers |
| Version callout | <div class="note-version"> | Version-specific notes, changelog entries |
| Warning callout (legacy) | <div class="note-warning"> | Deprecated — use .help in new pages |
| Help callout | <div class="help"> | Replaces .note-warning in new templates |
| Status: deprecated | <div class="deprecated"> | Marks a page or section as deprecated |
| Status: incomplete | <div class="incomplete"> | Marks content as incomplete |
| Status: out of date | <div class="out-of-date"> | Marks content as out of date |
| Code block | <div class="codeblock"> | Inline or block code display |
| Grid/table layout | <table class="views-view-grid" width="100%"> | Multi-column layouts; use for feature grids, support cards, sponsor tiers |
| Floated maintainer card | <table class="views-view-grid" width="160" align="left"> + <br clear="both"/> | Float a narrow card left; always follow with <br clear="both"/> |
| Centered block | <p align="center"> or <div align="center"> | Centers action buttons and sponsor logos |
Build sections in this order. All sections are optional except the intro paragraph.
<p>[SHORT_DESCRIPTION]. [EXPANDING_DETAIL].</p>
<br/>
<p align="center"><a class="action-button" href="https://youtu.be/[VIDEO_ID]">▶ Watch an introduction to [MODULE_NAME]</a></p>
<table class="views-view-grid" width="100%">
<tr>
<td width="50%"><div class="note"><a href="/files/[URL]" class="colorbox" data-colorbox-gallery="gallery-node-[NODE_ID]" rel="nofollow"><img src="/files/[URL]" alt="[ALT]" /><br/><strong>[CAPTION]</strong></a></div></td>
<td width="50%"><div class="note"><a href="/files/[URL]" class="colorbox" data-colorbox-gallery="gallery-node-[NODE_ID]" rel="nofollow"><img src="/files/[URL]" alt="[ALT]" /><br/><strong>[CAPTION]</strong></a></div></td>
</tr>
</table>
<h2>Features</h2>
<blockquote>[ONE_SENTENCE_SUMMARY].</blockquote>
<table class="views-view-grid" width="100%">
<tr>
<td width="50%">
<strong>[CATEGORY]</strong>
<ul>
<li>[FEATURE]</li>
</ul>
</td>
<td width="50%">
<strong>[CATEGORY]</strong>
<ul>
<li>[FEATURE]</li>
</ul>
</td>
</tr>
</table>
Use a 4-column grid (4× <td width="25%">) when there are more than two feature categories.
.note cards)<h2>Getting involved and support options</h2>
<table class="views-view-grid">
<tr>
<td width="33%">
<div class="note">
<h3>Get involved</h3>
<p>...</p>
<p align="center"><a class="action-button" href="https://www.drupal.org/contribute">Contribute</a></p>
<p><em>Free for all</em></p>
</div>
</td>
<td width="33%">
<div class="note">
<h3>Fund development</h3>
<p>...</p>
<p align="center"><a class="action-button" href="https://opencollective.com/[SLUG]">Fund</a></p>
<p><em>Starting at $[AMOUNT] a month</em></p>
</div>
</td>
<td width="33%">
<div class="note">
<h3>Professional support</h3>
<p>...</p>
<p align="center"><a class="action-button" href="[URL]">Contact</a></p>
<p><em>[PRICING]</em></p>
</div>
</td>
</tr>
</table>
Use <h3> headings with <hr/> separators between them. Common subsections:
Each subsection should end with a centered .action-button and then <hr/>.
<h2>About the [MODULE_NAME] module</h2>
<div class="note-version">
<h4>About [MODULE_NAME] for Drupal [VERSION]</h4>
<p>...</p>
</div>
<div class="help">
<h4>[UPGRADE/MIGRATION HEADING]</h4>
<p>...</p>
</div>
Each maintainer gets a floated .note card. After each group (e.g. D10 maintainers, D7 maintainers), add <br clear="both"/>.
<h2>Meet the Project Maintainers</h2>
<h4 class="clearfix">[MODULE_NAME] for Drupal [VERSION]</h4>
<table class="views-view-grid" width="160" align="left"><tr><td>
<div class="note">
<div><a href="/u/[USERNAME]"><img src="/files/styles/drupalorg_user_picture/public/user-pictures/[PICTURE_FILENAME]" width="160" alt="[FULL_NAME]"/></a></div>
<div><strong>[FULL_NAME]</strong> (<a href="/u/[USERNAME]">[USERNAME]</a>)</div>
<p>[BIO]</p>
</div>
</td></tr></table>
<br clear="both"/>
<hr/>
<div align="center">
<h2>Thank you to the [MODULE_NAME] module's<br/>Open Collective Sponsors</h2>
<h3>Impact Sponsors</h3>
<table class="views-view-grid" width="25%"><tr>
<td align="center">
<img src="[LOGO_URL]" alt="[NAME]" />
<div align="center"><a href="[URL]">[NAME]</a></div>
</td>
</tr></table>
<a href="[OPENCOLLECTIVE_TIER_URL]" class="action-button">Become an Impact Sponsor</a>
...
</div>
<br clear="both"/>
Ask the user for the following before generating the page:
webform)/files/... paths on drupal.org, or full URLs)/u/[username])If the user provides existing markup to improve, extract what you can and ask only about what is missing.
<br/> (XHTML self-closing), never <br>. The Drupal.org body field is XHTML-filtered.<br clear="both"/>. Without it, subsequent content will wrap around the float in unexpected ways.align="center" on <p> or <div> wrapping action buttons — do not use CSS text-align inline styles.<html>, <head>, or <body> tags..secondary-button over .action-button for non-primary CTAs in new pages (e.g. "Learn more" links alongside a primary "Download" button)..note-warning is legacy — use .help in new templates.data-colorbox-gallery attribute on screenshot links requires the node ID of the project page. If the page doesn't exist yet, use a placeholder and note that the user must update it after publishing.<html>, <head>, or <body> tags — content is pasted into a body field inside the bluecheese theme..claude/skills/drupalorg-project-page/assets/project-page-template.html (in this project) is a style guide showing each component with a working example.