UI Components
Code-based UI component generation and styling
weapp-vite-vue-sfc-best-practices
by weapp-vite
面向使用 weapp-vite 的小程序项目的 Vue SFC 实践手册，覆盖 script setup、纯模板 SFC、JSON 宏、definePageMeta/layout、defineModel、usingComponents、JSX/TSX script block、模板指令兼容、多平台 SFC、.weapp-vite 类型支持文件与受管 prepare 工作流。
native-to-weapp-vite-wevu-migration
by weapp-vite
面向原生微信、支付宝、抖音等小程序渐进迁移到 weapp-vite + 原生 或继续升级到 weapp-vite + wevu + Vue SFC 的结构化工作流，覆盖六平台单目标构建、原生扩展名保留、Web 联调边界、路线选择、工具链接入、SFC 试点、响应式升级与可回滚验证。
weapp-vite-react-best-practices
by weapp-vite
面向使用 weapp-vite 与 @weapp-vite/react 开发 React 19 微信小程序的实践手册。适用于配置 weapp.react、编写 JSX/TSX 页面、选择 static/dynamic render mode、接入可选 React Compiler、管理 createReactMiniProgramRoot 生命周期，以及通过 createNativeComponent / Slot 与原生或 Wevu 组件互操作。
seedance-shot-design
by woodfantasy
Professional-grade virtual film director and prompt engineer for Seedance 2.0 (即梦). Transforms vague ideas into cinematic, production-ready video prompts with Hollywood-caliber shot design. Covers every workflow — text-to-video, image-to-video, multi-modal references, video extension, character swap, dialogue-driven short films, and music-synced edits. Ships with a cinematography dictionary (50+ safe camera-move phrases), a director style library (Villeneuve, Wes Anderson, Shinkai, Wuxia & more), a 3-layer lighting & quality-anchor system that kills the "plastic AI look," and a built-in structured validation checklist so every prompt passes before delivery. Supports bilingual output (Chinese/English) with smart >15 s auto-segmentation for long-form storytelling. Trigger words: Seedance, Shot Design, AI video, storyboard, video prompt, short film, cinematic prompt, 即梦, 视频提示词, 分镜, 视频脚本, AI视频, 短片脚本, 镜头设计, 运镜.
dotnet-testing
by novotnyllc
Defines .NET test strategy and implementation patterns across xUnit v3 (Facts, Theories, fixtures, IAsyncLifetime), integration testing (WebApplicationFactory, Testcontainers), Aspire testing (DistributedApplicationTestingBuilder), snapshot testing (Verify, scrubbing), Playwright E2E browser automation, BenchmarkDotNet microbenchmarks, code coverage (Coverlet), mutation testing (Stryker.NET), UI testing (page objects, selectors), and AOT WASM test compilation. Spans 13 topic areas. Do not use for production API architecture or CI workflow authoring.
ohos-chromium-security-review
by openharmonyinsight
OpenHarmony/Chromium 深度代码审计技能 - 专注于线程安全、生命周期管理和逻辑漏洞 基于严谨的系统级编程经验，深度审查 C/C++ 源代码中的： - 线程安全问题（数据竞争、死锁、跨序列访问） - 生命周期问题（UAF、悬空指针、WeakPtr误用） - OpenHarmony/Chromium特定模式风险 - 静态分析工具无法发现的高阶安全风险 核心特性： - 极度严谨的审查风格 - 遵循14条严格的用户自定义规则 - 生成结构化的JSON和Markdown报告 - 按团队责任划分问题
android-to-harmonyos-migration-workflow
by openharmonyinsight
多 agent 协作的 Android 到 HarmonyOS 代码迁移工作流（迭代式）。当用户需要将 Android 项目迁移到 HarmonyOS 时触发，提供：1) Analyzer Agent 扫描代码结构 2) Planner Agent 制定迁移计划 3) Translator Agent 执行代码转换 4) Validator Agent（验证代理） 使用 ohos-app-build-debug skill 进行编译验证、应用打包和上板验证首界面 5) Tester Agent 验证功能（每个模块迁移完成后执行） 6) 所有模块迁移完成后，执行 Feature Comparator Agent 检查遗漏功能 7) UI Comparator Agent 验证界面一致性 8) 将未完成部分反馈给 Planner Agent 继续迭代。包含代码分析脚本、API映射表、组件转换模式和自动化验证工具。触发关键词：迁移Android到鸿蒙、Android迁移、HarmonyOS迁移、Java/Kotlin转ArkTS、Activity转Page、功能比对、UI比对。
tanstack-router
by tanstack-skills
Type-safe routing for React and Solid applications with first-class search params, data loading, and seamless integration with the React ecosystem.
tanstack-ranger
by tanstack-skills
Headless utilities for building range and multi-range sliders in TS/JS, React, Vue, Solid, Svelte & Angular.
writing-react-native-storybook-stories
by storybookjs
Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for testing. Applies to any task involving @storybook/react-native story authoring.
setup-react-native-storybook
by storybookjs
Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack/webpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.
drawio
by markdown-viewer
General-purpose diagramming tool using drawio XML format with 8900+ stencils. Best for custom diagrams requiring pixel-perfect positioning, diagrams with vendor-specific icons (AWS, Azure, Cisco), or any diagram not covered by specialized skills. Use network skill for network topology, uml skill for UML diagrams, architecture skill for layered system views. NOT for simple flowcharts (use mermaid) or data-driven charts (use vega).
unistyles-v2-to-v3-migration
by jpudysz
Migrate react-native-unistyles from v2 to v3. Triggers on: "migrate unistyles", "upgrade unistyles", "v2 to v3", "unistyles migration", "update unistyles", "convert unistyles v2". Covers all API changes including StyleSheet.create, useStyles removal, theme configuration, variants, withUnistyles, Babel plugin setup, style spreading fixes, and third-party component wrapping.
ui-audit
by tommygeoco
"AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco."
smart-docs
by sopaco
"AI-powered comprehensive codebase documentation generator. Analyzes project structure, identifies architecture patterns, creates C4 model diagrams, and generates professional technical documentation. Use when users need to document codebases, understand software architecture, create technical specs, or generate developer guides. Supports all programming languages. Alternative to Litho/deepwiki-rs that uses Claude Code subscription without external API costs."
react-native-best-practices
by storybookjs
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
biome-developer
by biomejs
General development best practices and common gotchas when working on Biome. Use for avoiding common mistakes, understanding Biome-specific patterns, and learning technical tips. Examples:<example>Working with Biome's AST and syntax nodes</example><example>Understanding string extraction methods</example><example>Handling embedded languages and directives</example>
parser-development
by biomejs
Guide for implementing parsers with error recovery for new languages in Biome. Use when creating parsers for JavaScript, CSS, JSON, HTML, GraphQL, or adding new language support. Examples:<example>User needs to add parsing support for a new language</example><example>User wants to implement error recovery in parser</example><example>User is writing grammar definitions in .ungram format</example>
opentui
by msmps
Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing.
aiox-ux-design-expert
by SynkraAI
UX/UI Designer & Design System Architect (Uma). Complete design workflow - user research, wireframes, design systems, token extraction, component building, and quality assurance
aiox-master
by SynkraAI
AIOX Master Orchestrator & Framework Developer (Orion). Use when you need comprehensive expertise across all domains, framework component creation/modification, workflow orchest...
flutter-api
by staruhub
Comprehensive Flutter API reference guide covering widgets, Material Design, Cupertino, animations, gestures, navigation, state management, and platform integration. Use when developing Flutter applications and needing detailed API knowledge for widgets, layout, styling, animations, platform channels, or any Flutter SDK functionality. Essential for building cross-platform mobile, web, and desktop applications with Flutter.
react-component-generator
by staruhub
Generate React components following best practices with TypeScript, Tailwind CSS, and Zustand state management. Use this skill when the user requests creating React components, UI elements, or mentions component generation. Supports common component patterns including basic components, forms, lists, cards, buttons, modals, and stateful components with Zustand integration.
ui-analyzer
by staruhub
Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports and requests implementation. Provides detailed layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices.