Create distinctive, production-grade frontend interfaces with high design quality. Trigger: When the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying. Triggers: When the user asks to build a Node.js application, API, backend, or any server-side JavaScript project.
Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Trigger: When creating Node.js servers, REST APIs, GraphQL backends, or microservices architectures.
Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization". Trigger: when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Trigger: When styling components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
Guide for styling with Tailwind CSS 4, including utility-first composition, `cn()` usage, theme variable handling, and project-safe class patterns. Trigger: Use when the task involves styling UI with Tailwind classes, composing conditional class names with `cn()`, working with Tailwind 4 theme variables, translating design/UI requirements into utility classes, or reviewing className usage to avoid invalid patterns such as wrapping theme variables with `var()` inside className-driven styling.
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Trigger: When you need to implement complex type logic, create reusable type utilities, or ensure compile-time type safety in TypeScript projects.
Guide for building, validating, submitting, and debugging action-backed forms with AshPhoenix.Form in Phoenix and LiveView, including nested forms, parameter preparation, error transformation, and form lifecycle handling. Trigger: Use when the task mentions or contains `AshPhoenix.Form`, `for_create`, `for_update`, `for_read`, `for_destroy`, `validate`, `submit`, nested form operations like `add_form` or `remove_form`, or when working on Ash-backed form flows in LiveView/Phoenix and deciding how validation, submission, params, or errors should be handled.