oasis-greenhouse

Animation patterns for Mars Greenhouse Command Center including CSS keyframes, transitions, Framer Motion (React), and greenhouse-specific animations. Dark theme optimized. Use when adding animations, transitions, hover effects, loading spinners, skeleton loaders, page transitions, plant growth effects, sensor transitions, status indicators, or any motion/animation work.

Mock-first API pattern with centralized client for Mars Greenhouse Command Center. Shows namespaced API object, mock-to-real switching, data fetching hooks, loading/error states, and simulation polling. No auth needed (single-operator system).

Data visualization patterns using Recharts and pure CSS charts. Use when building charts, graphs, dashboards, stat cards, progress bars, or any data visualization. Also use when formatting numbers, dates, percentages, or mission-specific values for display.

Mars Greenhouse Command Center design system. Dark-only theme with warm Mars palette, cockpit-inspired UI. Reference for colors, typography, spacing, components, and layout patterns.

Form handling patterns for React apps including controlled/uncontrolled inputs, validation, common input components, file uploads, drag-and-drop, multi-step forms, and submission patterns. Use when building forms, handling user input, implementing validation, creating file upload UIs, or working with form state.

Tailwind CSS utility class reference covering layout (flexbox, grid), spacing, typography, colors, sizing, borders, shadows, positioning, responsive design, states, animations, and common component patterns. Use when writing Tailwind CSS classes, building responsive layouts, styling components with utility classes, or looking up Tailwind class names.

Ready-to-use React UI component implementations for Mars Greenhouse Command Center. Uses shadcn/ui as the primary component library with Tailwind CSS dark theme. Includes reference for shadcn Dialog, DropdownMenu, Tabs, and custom patterns like PillTabs for metric selectors and toast notifications.

Code quality guidelines for writing clean, modular, professional code. Use this skill whenever writing, editing, or reviewing code in any language. Applies to all code output, including scripts, application code, and code snippets in documentation. Trigger this whenever the user asks you to write code, fix a bug, add a feature, refactor, or review code.

Write concise Conventional Commit messages from code changes. Use when drafting commit messages for git commits, pull request squash messages, or release-ready history.

Accessibility (a11y) patterns and best practices for web apps. Use when building UI components, forms, modals, dropdowns, tabs, toggles, or any interactive elements. Also use when the user mentions ARIA, screen readers, keyboard navigation, focus management, color contrast, or accessible HTML.

React hooks, component patterns, and best practices. Use when writing React components, using hooks (useState, useEffect, useRef, useMemo, useCallback, useReducer), creating custom hooks, implementing context/global state, compound components, render props, HOCs, or handling events and list rendering.