Agent Skills Hub

nano-image-generator

Generate professional visual assets including app icons, logos, banners, and illustrations using the Nano Banana Pro (Gemini 3 Pro) AI model.

tool-use-structured-output

Enforce structured JSON output from Claude models using Bedrock tool_use to eliminate parsing failures and ensure schema compliance.

css-modules

CSS Modules styling strategy for component-level encapsulation using Lightning CSS or PostCSS, featuring TypeScript integration and Vite configuration.

playwright-best-practices

Guidance for writing resilient Playwright tests with best practices for locators, assertions, and CI/agent integration.

svelte-code-writer

CLI tools for Svelte 5 documentation lookup and code analysis. Automate Svelte component creation, debugging, and linting with real-time documentation retrieval and code autofixing.

react

React component development guide for LobeHub, including styling with antd-style, layout building with @lobehub/ui, and routing management.

figma

Leverage the Figma MCP server to fetch design data, extract assets, and transform Figma nodes into production-ready React and Tailwind code with design system alignment.

qstash-js

Manage serverless messaging, task scheduling, and webhook verification with the official Upstash QStash JavaScript/TypeScript SDK.

Parallel Routes Generator

Implements Next.js Parallel Routes for modals to prevent layout shifts. Essential for dialogs, modals, and intercepted routes.

flutter-errors

Diagnoses and resolves common Flutter runtime and layout errors such as RenderFlex overflow, unbounded constraints, and state management issues.

vscode-playwright

Automated high-quality VS Code screenshot capture using Playwright and serve-web for documentation, slide decks, and visual technical content.

build-design-system

Build a cohesive, constraint-based design system using the Design Graph methodology. Automate the creation of design tokens, typography scales, components, variants, and themes.