UI 组件
基于代码的 UI 组件生成与样式实现
jetpack-compose-ui
peterbamuhigire
"Jetpack Compose UI standards for beautiful, sleek, minimalistic Android apps. Enforces Material 3 design, unidirectional data flow, state hoisting, consistent theming, smooth animations, and performance patterns. Use when building or reviewing Compose UI code to ensure modern, user-friendly, fast-loading interfaces that are standard across all apps."
healthcare-ui-design
peterbamuhigire
Clinical-grade UI/UX patterns for healthcare applications across web (Bootstrap 5/Tabler + PHP) and Android (Jetpack Compose + Material 3). Covers patient records, vital signs, medication safety, care plans, scheduling, telemedicine, dashboards, patient portals, and clinical communication. Enforces HIPAA compliance, WCAG 2.2 AA accessibility, medical safety workflows, and role-based interfaces for clinicians, nurses, patients, and administrators. Use when building or reviewing EMR/EHR systems, hospital management, clinic apps, telemedicine platforms, patient portals, health dashboards, or any healthcare-related interface.
mobile-rbac
peterbamuhigire
"Role-Based Access Control for Android mobile apps integrating with a multi-tenant SaaS backend. Covers permission fetching, caching in EncryptedSharedPreferences, Jetpack Compose permission gates (PermissionGate, ModuleGate, PermissionButton), module-gated bottom navigation, navigation guards, offline-capable permission checks, and defense-in-depth patterns. Use when implementing permission-based UI gating, role-based feature access, or module-based tab visibility in Android apps."
pos-sales-ui-design
peterbamuhigire
Design POS, checkout, and sales entry web UIs that are simple, accessible, and fast for all ages while integrating all backend actions strictly through APIs. Use for creating or reviewing UI patterns, layouts, components, and workflows for web-based sales recording systems.
android-biometric-login
peterbamuhigire
"Optional biometric (fingerprint/face) gate on Android app launch using AndroidX Biometric API. Covers BiometricHelper utility, splash screen integration, settings toggle with verification, EncryptedSharedPreferences storage, and graceful fallback. Use when adding biometric authentication to any Android app."
sdlc-design
peterbamuhigire
"Generate Design & Development documentation for SDLC projects. Covers System Design Document (SDD), Technical Specification, Interface Control Document (ICD), Database Design Document, Code Documentation standards, and API Documentation. Use when translating requirements into technical architecture and guiding development teams."
manual-guide
peterbamuhigire
"Generate end-user manuals and reference guides for ERP modules. Use when the user asks to document a feature, write a user manual, or sync a reference guide. This skill is explicitly separate from doc-architect (which manages AI guidance docs like AGENTS.md)."
react-router-declarative-mode
remix-run
Build React applications using React Router's declarative mode with BrowserRouter. Use when configuring routes with JSX, navigating with Link/NavLink, or reading URL params and search params without data loaders or actions.
android-tdd
peterbamuhigire
"Android Test-Driven Development standards. Enforces Red-Green-Refactor cycle, test pyramid (70/20/10), layer-specific testing strategies, and CI integration. Use when building or reviewing Android apps with TDD methodology."
photo-management
peterbamuhigire
Manage photo uploads, previews, storage, and deletion across the app. Use when building any photo upload UI or API, and always apply client-side compression via skills/image-compression before upload.
chrome-extension-dev
aktsmm
"Chrome/ブラウザ拡張機能開発の包括的ガイド。WXTフレームワーク、Manifest V3、Chrome API、テスト手法をカバー。Use when: ブラウザ拡張機能を作成・修正する時。Triggers on 'ブラウザ拡張機能', 'Chrome拡張', 'browser extension', 'WXT', 'content script', 'service worker'."
gis-mapping
peterbamuhigire
"Use for web apps that need Leaflet-first GIS mapping, location selection, map-driven UIs, or geofencing validation. Covers Leaflet setup, optional tile providers, data storage, and backend validation patterns."
react-router-data-mode
remix-run
Build React applications using React Router's data mode with createBrowserRouter and RouterProvider. Use when working with route objects, loaders, actions, Form, useFetcher, or pending/optimistic UI without the Vite plugin.
sdlc-planning
peterbamuhigire
"Generate Planning & Management documentation for SDLC projects. Covers Project Vision & Scope, SDP, SCMP, QA Plan, Risk Plan, SRS, and Feasibility Study. Use when starting a new project, conducting project governance, or establishing the planning baseline before development begins."
image-compression
peterbamuhigire
"Client-side image compression before upload using Squoosh with Canvas fallback and server-side Sharp validation. Use for web apps needing max width 1920px, max size 512KB, transparent UX, and consistent compression stats."
report-print-pdf
peterbamuhigire
"Guidance for building report templates that serve both mPDF exports and the browser-based print workflow, including the auto-print standard introduced in the report-printing-style guide."
magazine-layout
isjiamu
将文本内容转换为精美的杂志风格HTML页面，支持专业排版和多种视觉风格。触发场景：(1) 用户想将文本/文章转换为杂志风格HTML，(2) 用户提到"杂志排版"、"杂志设计"、"文章排版"、"专业排版"、"文本美化"、"magazine layout"，(3) 用户需要优雅排版的HTML页面，(4) 用户需要将设计内容导出为PDF。支持12种独特视觉风格，使用Tailwind CSS。
3d-web-experience
boisenoise
"Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing ..."
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.
nx-plugins
nrwl
Find and add Nx plugins. USE WHEN user wants to discover available plugins, install a new plugin, or add support for a specific framework or technology to the workspace.
link-workspace-packages
nrwl
'Link workspace packages in monorepos (npm, yarn, pnpm, bun). USE WHEN: (1) you just created or generated new packages and need to wire up their dependencies, (2) user imports from a sibling package and needs to add it as a dependency, (3) you get resolution errors for workspace packages (@org/*) like "cannot find module", "failed to resolve import", "TS2307", or "cannot resolve". DO NOT patch around with tsconfig paths or manual package.json edits - use the package manager''s workspace commands to fix actual linking.'
nx-ai-agents-config
nrwl
Install plugins pnpm nx add <plugin>. Example: pnpm nx add @nx/react.
nextjs-app-router
sabahattinkalkan
Next.js App Router best practices, Server Components, Server Actions, routing patterns, and data fetching strategies. Use when building Next.js applications with the App Router.
Link Workspace Packages
nrwl
Root package.json should have "private": true to prevent accidental publish