lobster-css

分类: 开发与编程 | 上传者: Hacknock | 下载: 0 | 版本: v1.0（最新）

为 lobster.js 页面生成 CSS 样式表，定位 lbs-* 类名称。每当用户想要设置 lobster.js 页面的样式、为 lobster.js 创建 CSS 主题、自定义 lobster.js 站点的视觉外观或要求针对 lbs-* 类的 CSS 时，请使用此选项。当用户在处理 lobster.js 项目时描述视觉风格（例如“深色模式”、“最小”、“有趣”）时也会触发 - 即使他们没有明确提及 CSS 或 lbs-* 。 --- 根据用户的设计描述生成 lobster.js 页面的 CSS 样式表。 lobster.js 输出语义 HTML，其中每个元素都有一个可预测的“lbs-*”类名。编写针对这些类的 CSS 来设置页面样式。使用用户消息中的设计描述。如果没有给出描述，则生成一个干净的最小灯光主题。 --- ## HTML 结构参考 ```html  <div id="content"> ... </div>  <header class="lbs-header"> ... </header> <footer class="lbs-footer"> ... </footer>  <h1 class="lbs-heading-1"> ... </h1> <h2 class="lbs-heading-2"> ... </h2>   <p class="lbs-paragraph"> ... </p>  <em class="lbs-emphasis"> ... </em> <strong class="lbs-strong"> ... </strong> <del class="lbs-strikethrough"> ... </del> <code class="lbs-code-span"> ... </code>  <hr class="lbs-hr" />  <div class="lbs-code-block"> <div class="lbs-code-filename">filename.js</div>  <pre data-language="js"><code class="language-js"> ... </code></pre> </div>  <blockquote class="lbs-blockquote"> <p class="lbs-paragraph"> ... </p> </blockquote>  < 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" /> ...  </li> </ol>  <table class="lbs-table"> <thead><tr><th> ... </th></tr></thead> <tbody><tr><

更新日志: Source: GitHub https://github.com/Hacknock/lobsterjs

目录结构

当前层级: tree/main/skills/lobster-css/

📄 SKILL.md 3.7 KB

SKILL.md

---
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

```html
<!-- 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 `:root` for colors, fonts, and spacing so the theme is easy to adapt
- Style `#content` for `max-width`, `margin`, `padding`, `font-family`, `line-height`
- Always style `body` for the background color
- For dark themes, also style `::-webkit-scrollbar` for a polished feel
- Do not add inline styles or JavaScript — CSS only
- **Warp / silent table layout:**
  - Warp content lives in `th` cells — style `.lbs-table-silent th` (not `td`)
  - To create column gaps, use `padding-right` on `th` (e.g. `padding: 0 0.75rem 0 0`) and `padding-right: 0` on `th:last-child`
  - Do NOT use `border-collapse: separate` + `border-spacing` — it can break the layout
  - Do NOT hide `thead` on silent tables (`display: none` will hide all Warp content)

登录后下载/点赞/收藏 ❤ 36 | ★ 0

lobster-css

目录结构

SKILL.md

举报内容

提示