Skill v1.0.1
currentAutomated scan100/1003 files
version: "1.0.1" name: lobster-css description: > Generates a CSS stylesheet for a lobster.js page, targeting lbs- class names. Use this whenever the user wants to style a lobster.js page, create a CSS theme for lobster.js, customize the visual appearance of a lobster.js site, or asks for CSS that targets lbs- classes. Also trigger when a user describes a visual style (e.g. "dark mode", "minimal", "playful") while working on a lobster.js project — even if they don't mention CSS or lbs-* explicitly.
Generate a CSS stylesheet for a lobster.js page based on the user's design description.
lobster.js outputs semantic HTML where every element has a predictable lbs-* class name. Write CSS targeting these classes to style the page.
Use the design description from the user's message. If no description is given, generate a clean minimal light theme.
HTML structure reference
<!-- Content wrapper --><div id="content"> … </div><!-- Page regions --><header class="lbs-header"> … </header><footer class="lbs-footer"> … </footer><!-- Headings --><h1 class="lbs-heading-1"> … </h1><h2 class="lbs-heading-2"> … </h2><!-- h3–h6 follow the same pattern --><!-- Paragraph --><p class="lbs-paragraph"> … </p><!-- Inline --><em class="lbs-emphasis"> … </em><strong class="lbs-strong"> … </strong><del class="lbs-strikethrough"> … </del><code class="lbs-code-span"> … </code><!-- Horizontal rule --><hr class="lbs-hr" /><!-- Code block --><div class="lbs-code-block"><div class="lbs-code-filename">filename.js</div> <!-- optional --><pre data-language="js"><code class="language-js"> … </code></pre></div><!-- Blockquote --><blockquote class="lbs-blockquote"><p class="lbs-paragraph"> … </p></blockquote><!-- Lists --><ul class="lbs-ul"><li class="lbs-list-item"> … </li></ul><ol class="lbs-ol"><li class="lbs-list-item"><input type="checkbox" class="lbs-checkbox" /> … <!-- task list --></li></ol><!-- Table (standard) --><table class="lbs-table"><thead><tr><th> … </th></tr></thead><tbody><tr><td> … </td></tr></tbody></table><!-- Table (silent — Warp layout grid) --><!-- CRITICAL: Warp column content renders in <thead><tr><th>, NOT <tbody><tr><td> --><!-- Never apply display:none to thead on silent tables — it hides all Warp content --><table class="lbs-table lbs-table-silent"><thead><tr><th><!-- :::warp col-a content rendered here --></th><th><!-- :::warp col-b content rendered here --></th></tr></thead><tbody><!-- typically empty --></tbody></table><!-- Image --><img class="lbs-image" src="…" alt="…" /><!-- Collapsible --><details class="lbs-details"><summary class="lbs-summary"> … </summary>…</details><!-- Footnotes --><span class="lbs-footnote-ref"><a href="#fn-1">[1]</a></span><section class="lbs-footnotes"><ol><li class="lbs-footnote-item"> … </li></ol></section>
CSS guidelines
- Use CSS custom properties (
--lbs-*) in:rootfor colors, fonts, and spacing so the theme is easy to adapt - Style
#contentformax-width,margin,padding,font-family,line-height - Always style
bodyfor the background color - For dark themes, also style
::-webkit-scrollbarfor a polished feel - Do not add inline styles or JavaScript — CSS only
- Warp / silent table layout:
- Warp content lives in
thcells — style.lbs-table-silent th(nottd) - To create column gaps, use
padding-rightonth(e.g.padding: 0 0.75rem 0 0) andpadding-right: 0onth:last-child - Do NOT use
border-collapse: separate+border-spacing— it can break the layout - Do NOT hide
theadon silent tables (display: nonewill hide all Warp content)