shelbeely
- 37 skills
- 0 followers
- 3 hours ago last updated
- ▌ Agp 9 Upgrade · shelbeely bundleUpgrades, or migrates, an Android project to use Android Gradle Plugin (AGP) version 9
- ▌ Navigation 3 · shelbeely bundleLearn how to install and migrate to Jetpack Navigation 3, and how to implement features and patterns such as deep links, multiple backstacks, scenes (dialogs, bottom sheets, list-detail, two-pane, supporting pane), conditional navigation (such as logged-in navigation vs anonymous), returning results from flows, integration with Hilt, ViewModel, Kotlin, and view interoperability.
- ▌ Android Viewmodel · shelbeelyBest practices for implementing Android ViewModels, specifically focused on StateFlow for UI state and SharedFlow for one-off events.
- ▌ Compose Navigation · shelbeelyImplement navigation in Jetpack Compose using Navigation Compose. Use when asked to set up navigation, pass arguments between screens, handle deep links, or structure multi-screen apps.
- ▌ Migrate XML Views To Jetpack Compose · shelbeely bundleProvides a structured workflow for migrating an Android XML View to Jetpack Compose. This skill details the step-by-step process, from planning and dependency setup, to theming and layout migration, validation and XML cleanup. Use this skill when you need to migrate an XML View to Jetpack Compose in an Android project. It solves the problem of converting the UI of a legacy XML View into modern, declarative Compose components while maintaining interoperability.
- ▌ Play Billing Library Version Upgrade · shelbeely bundleUse this skill when upgrading or migrating an Android project from any legacy Google Play Billing Library (PBL) version to the latest stable version of PBL.
- ▌ Humanizer · shelbeelyRemove signs of AI-generated writing to make text sound more natural and human-written. Use when editing or reviewing documentation.
- ▌ Tailwind CSS · shelbeelyTailwind CSS utility-first framework for rapid UI development with responsive design and dark mode
- ▌ Lyria 3 Prompting · shelbeely bundleTranslates any user music request into an optimal prompt for Google's Lyria 3 Pro music generation model (lyria-3-pro-preview). Use this skill whenever a user asks to create, compose, or generate music, songs, jingles, soundtracks, or audio from any description — simple or complex. Handles text-to-music, image-to-music, vocal and lyric prompts, instrumental-only tracks, full structured songs, and multilingual generation. Produces the ideal final prompt string to pass to the model.
- ▌ Android CLI · shelbeely bundleOrchestrates Android development tasks including project creation, deployment, SDK management, and environment diagnostics using the `android` command-line tool.
- ▌
- ▌ Repo Knowledge Base · shelbeelyUse this skill when the user asks to build, refresh, audit, document, map, explain, or deeply understand an entire code repository. Optimized for GitHub Copilot Cloud Agent, GitHub Copilot CLI, and VS Code agent mode. Creates a durable Markdown knowledge base covering architecture, files, features, APIs, configs, tests, workflows, dependencies, data flow, known risks, unanswered questions, and repo instructions that teach agents how to use the knowledge base.
- ▌ Remotion Best Practices · shelbeelyBest practices for Remotion - Video creation in React. Use when working with video animations, compositions, or React-based video content.
- ▌ UI UX Pro Max · shelbeelyUI/UX design intelligence. Plan, build, design, implement, review, improve UI/UX code. Styles: glassmorphism, minimalism, dark mode, responsive. Projects: landing page, dashboard, SaaS, mobile app.
- ▌ Material Design 3 · shelbeelyMaterial Design 3 (Material You) design system knowledge for modern web and Angular applications. Use when implementing Material Design 3 theming, components, typography, color systems, dynamic color, accessibility patterns, or migrating from Material Design 2. Covers design tokens, theming APIs, and Material You principles.
- ▌ Threejs Fundamentals · shelbeelyThree.js scene setup, cameras, renderer, and 3D basics. Use when setting up 3D scenes, creating cameras, configuring renderers, or working with 3D objects and transforms.
- ▌ Google Material Design · shelbeelyDesign interfaces following Google's Material Design system, the unified visual language bridging digital and physical worlds. Emphasizes bold graphic design, intentional motion, adaptive layouts, and the material metaphor. Use when building modern, accessible, delightful user interfaces across platforms.
- ▌ M3 Web Ink · shelbeelyImplement Material Design 3 in terminal CLIs using Ink (React for CLIs) with @inkjs/ui components. Covers M3 token mapping to terminal colors, ThemeProvider setup, component mapping, and ANSI fallbacks. Use this when building M3-styled command-line interfaces.
- ▌ M3 Web Vue · shelbeelyImplement Material Design 3 in Vue.js using Vuetify 3 with M3-aligned theming, dynamic color, and component library. Covers theme setup, components, dark mode, and design tokens. Use this when building M3-styled Vue.js applications.
- ▌ M3 Web React · shelbeely bundleImplement Material Design 3 in React using MUI (Material UI) with M3-aligned theming, or @material/web with React wrappers. Covers theme setup, component usage, dark mode, and Next.js SSR integration. Use this when building M3-styled React or Next.js applications.
- ▌ M3 Web Svelte · shelbeelyImplement Material Design 3 in Svelte using SMUI (Svelte Material UI) or @material/web directly. Covers component usage, theming, and Svelte 5 compatibility. Use this when building M3-styled Svelte or SvelteKit applications.
- ▌ M3 Web Android · shelbeelyImplement Material Design 3 in Android using Jetpack Compose Material 3. Covers theme setup, dynamic color (Material You), M3 Expressive components, and Compose integration. Use this when building M3-styled native Android applications.
- ▌ M3 Web Angular · shelbeely bundleImplement Material Design 3 in Angular using Angular Material (@angular/material) with first-class M3 support. Covers M3 theming via design tokens, SCSS mixins, CLI schematics, and component usage. Use this when building M3-styled Angular applications.
- ▌ M3 Web Flutter · shelbeelyImplement Material Design 3 in Flutter using the built-in material library with M3 theming and dynamic color. Covers theme setup, color schemes, and M3 Expressive packages. Use this when building M3-styled Flutter applications for mobile, web, or desktop.
- ▌ M3 Web Vanilla · shelbeely bundleImplement Material Design 3 using only vanilla CSS custom properties and semantic classes. Zero dependencies. Use this when building M3-styled static sites, simple web apps, or when you need full control over every design token without a framework.
- ▌ License Chooser · shelbeely bundleHelp choose an appropriate software/open-source license (e.g., MIT, Apache-2.0, GPL-3.0, AGPL-3.0, MPL-2.0, BSD) based on the user's goals and constraints; explain tradeoffs (permissive vs copyleft, patent grants, SaaS/network copyleft); check for dependency-driven constraints; and generate or update LICENSE files and short license headers. Use when a user asks what license to pick, whether licenses are compatible, or to add a LICENSE file to a repo.
- ▌ M3 Web Tailwind · shelbeely bundleImplement Material Design 3 with Tailwind CSS by mapping M3 design tokens to Tailwind's theme configuration. Covers the tailwind-material-3 plugin and manual token mapping. Use this when building M3-styled projects with Tailwind CSS.
- ▌ M3 Web Webcomponents · shelbeely bundleImplement Material Design 3 using Google's official @material/web library — Lit-based web components. Framework-agnostic, works with any framework that supports Custom Elements. Use this when you want the official M3 implementation or need cross-framework components.
- ▌ Material Theme Builder · shelbeely bundleGenerate Material Design 3 color themes programmatically from a source color using @material/material-color-utilities, the same engine that powers the Material Theme Builder. Use this when the user asks to generate an M3 color palette, create a custom theme from a brand color, or export M3 tokens to CSS, JSON, or framework configs.
- ▌ Material Design 3 Color · shelbeely bundleApplies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
- ▌ Material Design 3 Guide · shelbeelyMaster guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.
- ▌ Material Design 3 Icons · shelbeelyApplies Material Design 3 icon guidelines using Material Symbols — Google's variable font icon system. Use this when working with icons, Material Symbols, icon sizing, icon accessibility, or when the user asks to apply Material Design 3 icon guidelines.
- ▌ Material Design 3 Shape · shelbeely bundleApplies Material Design 3 Expressive shape and containment principles including rounded corners, morphing shapes, and container design. Use this when working on component shapes, borders, containment, or when the user asks to apply Material Design 3 shape guidelines.
- ▌ Material Design 3 Layout · shelbeelyApplies Material Design 3 Expressive layout, spacing, and size hierarchy principles including grid systems, responsive design, and elevation. Use this when working on page layouts, spacing, grids, responsive design, or when the user asks to apply Material Design 3 layout guidelines.
- ▌ Material Design 3 Motion · shelbeely bundleApplies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.
- ▌ Material Design 3 Components · shelbeely bundleComprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.
- ▌ Material Design 3 Typography · shelbeely bundleApplies Material Design 3 Expressive typography principles including variable fonts, type scales, and hierarchy. Use this when working on text styling, type hierarchy, readable interfaces, or when the user asks to apply Material Design 3 typography guidelines.