Develop AI-powered applications using Genkit in Node.js/TypeScript. Use when the user asks about Genkit, AI agents, flows, or tools in JavaScript/TypeScript, or when encountering Genkit errors, validation issues, type errors, or API problems.
Apply Google's design language to a UI. Load whenever the user wants something to look or feel like a Google product, including requests like "apply Google design style", "make it look like a Google product", "Google-style UI", "design.google guidance", "Google design principles", "Google Sans typography", "Product Sans", "Gemini visual language", "the Gemini sparkle / gradient look", "Material You expressiveness", or any question about how Google approaches color, type, motion, and brand across its products (Search, Gemini, Workspace, Pixel). This is the language layer above the Material 3 spec; for exact M3 token values use the sibling skill m3-docs.
Scaffold a self-contained Material Design 3 md-* web component and/or its React wrapper. Use when the user says: "create an M3 component", "scaffold a Material Design 3 <X> component", "build an md-* web component", "make a new Material component", "wrap a component in React", "add md-<x> to the monorepo".
User-invoked fix skill. Auto-correct Material Design 3 violations in a codebase. Use when asked to "fix M3 violations", "auto-correct Material Design issues", "make this M3-compliant", "clean up MUI residue", "fix hardcoded colors", "fix sx on md components", or "fix wrong icon names".
Turn a natural-language design brief into a Material Design 3 React scaffold with @aphrody-code/m3-design. Use when asked to "scaffold a screen from a description", "generate an M3 layout from a brief", "design compiler", "brief to JSX", or "make an M3 prototype/dashboard/deck from this prompt".
Load this skill whenever the user wants to design or build UI that looks Material Design 3 / Material You / Google-style, including requests like "make this look Material", "apply M3 styling", "which color role or token should I use", "design a Google-style component", "is this on-brand for Material", "M3 color system", "how do I use MD3 tokens on the web", "style this with Material Design", "use M3 elevation or shape", "add M3 motion or animation", "pick the right surface level", "make it look like Google Workspace", or any question about MD3 semantics, color roles, type scale, elevation, shape, motion easing, state layers, or window size classes.
Translate and generate documentation for the monorepo with the @aphrody-code/doc-ai CLI (Google Gemini backend, offline fallback). Use when asked to "translate the docs", "generate an API guide for a Lit component", "sync docs to another language", or "run doc-ai".
Answer Material Design 3 specification questions with attribution. Model-invocable and user-invocable. Use when asked "what does the M3 spec say about X", "look up Material Design docs", "official M3 reference for color / type / shape / motion / layout / components", "cite the Material guideline", or "find the m3.material.io page for X".