UI 组件
基于代码的 UI 组件生成与样式实现
blockbench-plugins
jasonjgardner
"Blockbench plugin/extension development for the 3D modeling tool. Use when creating, modifying, or debugging JavaScript plugins for Blockbench including actions, dialogs, panels, menus, toolbars, model manipulation, animation APIs, and custom formats/codecs. Triggers on Blockbench plugin, Blockbench extension, Blockbench API, BBPlugin, model editor plugin, or 3D modeling tool extension."
eip-5792
scaffold-eth
"Add EIP-5792 batched transaction support to a Scaffold-ETH 2 project. Use when the user wants to: batch multiple contract calls, use wallet_sendCalls, add EIP-5792 wallet integration, batch onchain transactions, or use wagmi's experimental batch hooks."
gremlin
joelhooks
Work on gremlin — the Convex-powered next-gen course platform. Use when any task mentions gremlin, gremlincms, wizardshit, course platform, badass-courses, or working on the gremlin monorepo. Loads project context, points to config files, ADRs, and related skills.
nextjs-static-shells
joelhooks
"Static-first Next.js 16 architecture patterns: cached shells with dynamic slots, provider islands, 'use cache' boundaries, and link preloading strategy. Use when building or refactoring Next.js routes to maximize static rendering, implementing 'use cache' with dynamic personalization, splitting entry vs static renderers, scoping client providers, or tuning prefetch behavior. Triggers on 'static shell', 'use cache pattern', 'dynamic slots', 'provider island', 'prefetch strategy', 'static first', 'cache boundary', 'route goes dynamic unexpectedly', or any Next.js architecture work involving mixed static/dynamic rendering."
writing-tests
hotovo
Write unit tests, component tests, and integration tests for AiderDesk using Vitest and React Testing Library. Use when creating new tests, adding test coverage, configuring mocks, setting up test files, or debugging failing tests.
hai-architecture
hylarucoder
Produce an evidence-grounded architecture review or design-decision critique — an architecture map, the painful complexity center, 3-6 chosen review lenses, ranked findings with file:line evidence, why-not alternatives, and a red/blue adversarial check — grounded in John Ousterhout's "A Philosophy of Software Design" (APoSD). Trigger whenever the user asks about architecture or system-design quality: module/package boundaries, abstraction depth, deep vs shallow modules, information hiding, dependency direction, change amplification / blast radius, ownership, error boundaries, or whether to split / merge / combine modules — including 架构审查, 架构 review, 模块边界, 依赖方向, 抽象太浅, 复杂度太高, 这个设计合不合理, or an APoSD / Ousterhout / "philosophy of software design" review. Be pushy: trigger even when they only say "is this structure ok", "these modules feel tangled", "should I split this", "review my system design", or "why does touching X force edits everywhere", not just when they say "architecture review". For naming use hai-naming; for whole-repo refactor hunting use improve-codebase-architecture; for a single React component use component-diagnosis.
hai-visual-report
hylarucoder
Generates a complete, self-contained multi-section HTML report — header + one-line verdict, Mermaid structure map, decision matrix, risk/proof table, and next-move block — from an idea, requirement, PRD, goal, review, architecture topic, plan, or proposal, and returns the generated file path. Use whenever the user wants content turned into a visual report, visualized page, HTML report, webpage version, dashboard, or slides/PPT-like web artifact — and trigger even on casual phrasings: 可视化一下, 做个可视化, 做成网页, 做个网页版, 把这个评审做成网页, 做成一页 HTML, 输出 HTML, 做个汇报页/展示页, 做成 PPT 样子的网页, 弄个好看点的报告, 整理成一份报告页面, 带 mermaid 图的报告, render this as a page/webpage, make it visual/interactive, turn my analysis into slides-like html, dashboard of this (including typos like html repot / viz report). Prefer this over create-visual-card when the content is multi-section and needs structure, tradeoffs, route, risk, and evidence rather than a single shareable card.
multi-touch-canvas-with-flutter
rodydavis
Learn how to create a Flutter canvas with multi-touch support for panning, zooming, and object interaction, overcoming common gesture recognition conflicts.
lit-and-monaco-editor
rodydavis
Learn how to create a Lit web component that wraps the Monaco Editor (powering VSCode) to add a fully functional code editor to your web applications.
lit-and-vscode-extensions
rodydavis
Learn how to build a VSCode extension using a Lit web component, covering setup, template creation, component implementation, and extension activation.
displaying-html-in-flutter
rodydavis
Easily display and interact with HTML content in your Flutter app using the easy_web_view package, which supports both web and mobile platforms.
2d-or-3d-force-graph-with-lit
rodydavis
Learn how to create interactive 2D and 3D force graphs using Lit, a lightweight web component library, with this step-by-step tutorial.
flutter-markdown-view-with-material-3
rodydavis
Learn how to customize the Flutter Markdown widget using Material 3 text and color styles for a visually appealing and consistent design.
spark-app-template
github
Comprehensive guidance for building web apps with opinionated defaults for tech stack, design system, and code standards. Use when user wants to create a new web application, dashboard, or interactive interface. Provides tech choices, styling guidance, project structure, and design philosophy to get users up and running quickly with a fully functional, beautiful web app.
how-to-create-html-web-components-with-dart
rodydavis
Discover the power of Web Components and how to build them with both JavaScript and Dart for reusable, framework-agnostic UI elements.
flutter-input-output-preview
rodydavis
Build responsive Flutter apps with a reusable TwoPane widget and an InputOutputPreview component for side-by-side code and preview display on both mobile and desktop.
mapbox-store-locator-patterns
mapbox
Common patterns for building store locators, restaurant finders, and location-based search applications with Mapbox. Covers marker display, filtering, distance calculation, and interactive lists.
mapbox-android-patterns
mapbox
Official integration patterns for Mapbox Maps SDK on Android. Covers installation, adding markers, user location, custom data, styles, camera control, and featureset interactions. Based on official Mapbox documentation.
mapbox-cartography
mapbox
Expert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective and beautiful maps with Mapbox. Use when designing map styles, choosing colors, or making cartographic decisions.
shadcn-svelte-inertia
inertia-rails
shadcn-svelte (bits-ui) component integration for Inertia Rails Svelte (NOT SvelteKit): forms, dialogs, tables, toasts, dark mode, and more. Use when building UI with shadcn-svelte components in an Inertia + Svelte app or adapting shadcn-svelte examples from SvelteKit. Wire shadcn-svelte inputs to Inertia Form via name attribute and {#snippet} syntax. Flash toasts require Rails flash_keys initializer config.
shadcn-vue-inertia
inertia-rails
shadcn-vue component integration for Inertia Rails Vue 3 (NOT Nuxt): forms, dialogs, tables, toasts, dark mode, and more. Use when building UI with shadcn-vue components in an Inertia + Vue app or adapting shadcn-vue examples from Nuxt. Wire shadcn-vue inputs to Inertia Form via name attribute and #default scoped slot. Flash toasts require Rails flash_keys initializer config.
inertia-rails-typescript
inertia-rails
TypeScript type safety for Inertia Rails (React, Vue, Svelte): shared props, flash, and errors via InertiaConfig module augmentation in globals.d.ts. Use when setting up TypeScript types, configuring shared props typing, fixing TS2344 or TS2339 errors in Inertia components, or adding new shared data.
bundle-size-optimization
aj-geddes
Reduce JavaScript and CSS bundle sizes through code splitting, tree shaking, and optimization techniques. Improve load times and overall application performance.
angular-module-design
aj-geddes
Design Angular modules using feature modules, lazy loading, and dependency injection. Use when organizing large Angular applications with proper separation of concerns.