This skill should be used when the user asks to "find a class", "search for symbol", "find usages", "find implementations", "search codebase", "find file", "class hierarchy", "find callers", "module dependencies", "unused dependencies", "project map", "project conventions", "project structure", "what frameworks", "what architecture", "find Perl subs", "Perl exports", "find Python class", "Go struct", "Go interface", "find React component", "find TypeScript interface", "find Rust struct", "find Ruby class", "find C# controller", "find Dart class", "find Flutter widget", "find mixin", "find Scala trait", "find case class", "find object", "find PHP class", "find Laravel model", "find PHP trait", or needs fast code search in Android/Kotlin/Java, iOS/Swift/ObjC, Dart/Flutter, TypeScript/JavaScript, Rust, Ruby, C#, Scala, PHP, Perl, Python, Go, C++, or Protocol Buffers projects. Also triggered by mentions of "ast-index" CLI tool.
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><