nattergabriel

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.

How to use reseed to manage agent skills in a project. Use when the user mentions reseed, agent skills, SKILL.md, .agents/skills/, or .claude/skills/, or wants to install, add, remove, sync, or list skills.

Design and build professional, distinctive web frontends, and avoid or remove generic AI-generated design ("slop"). Use this skill whenever creating or styling any web UI, including websites, landing pages, dashboards, web apps, React or Vue components, HTML/CSS pages, artifacts, prototypes, and email templates. Also use it when auditing, unslopping, reviewing, or restyling an existing frontend or codebase, when a design looks generic, templated, or AI-generated, or when the user asks to make something look better, more polished, or more professional, even if they never say the word design or slop. Covers design direction, typography, color, layout, spacing, motion, copy tone, accessibility, and a final anti-slop audit, for new builds and for retrofitting existing frontends.

Keeps AI tells (slop) out of everything you produce and strips them from existing content. Use whenever you write prose of any kind, technical or creative (docs, READMEs, UI copy, landing and marketing copy, reports, fiction, essays), generate or edit code and tests, design or style a frontend, or name variables, functions, files, classes, projects, products, services, or invented people and companies, even when the user never mentions slop or AI. Also use when the user asks to de-slop, humanize, remove AI tells, audit content for AI artifacts, or make something sound less AI-generated.