UI Components
Code-based UI component generation and styling
coding-standards
by TheBeardedBearSAS
Coding-Standards für React. Use when reviewing code style or formatting.
security-react
by TheBeardedBearSAS
React Security. Use when reviewing security, implementing auth, or hardening code.
architecture
by TheBeardedBearSAS
React-Architektur. Use when designing architecture or reviewing code structure.
performance
by TheBeardedBearSAS
Performance Optimization - React Native. Use when optimizing performance or profiling code.
coding-standards
by TheBeardedBearSAS
Code-Standards. Use when reviewing code style or formatting.
state-management
by TheBeardedBearSAS
State Management - React Query, Zustand, MMKV. Use when managing application state.
generic-feature-developer
by travisjneuman
Guide feature development with architecture patterns for any tech stack. Covers frontend, backend, full-stack, and automation projects. Use when adding new features, modifying systems, or planning changes.
testing-react
by TheBeardedBearSAS
React Testing Strategy. Use when writing tests, reviewing test coverage, or setting up testing.
coding-standards
by TheBeardedBearSAS
React Native Coding Standards - TypeScript. Use when reviewing code style or formatting.
angular-di
by analogjs
Implement dependency injection in Angular v20+ using inject(), injection tokens, and provider configuration. Use for service architecture, providing dependencies at different levels, creating injectable tokens, and managing singleton vs scoped services. Triggers on service creation, configuring providers, using injection tokens, or understanding DI hierarchy.
angular-ssr
by analogjs
Implement server-side rendering and hydration in Angular v20+ using @angular/ssr. Use for SSR setup, hydration strategies, prerendering static pages, and handling browser-only APIs. Triggers on SSR configuration, fixing hydration mismatches, prerendering routes, or making code SSR-compatible.
deslop
by brianlovin
Remove AI-generated code slop from the current branch. Use after writing code to clean up unnecessary comments, defensive checks, and inconsistent style.
color-system
by sanky369
Master color design with color theory, accessibility, theming, and dark mode. Create harmonious color systems that work across contexts, support accessibility standards, and enable flexible theming. Includes color psychology, contrast ratios, and color-blind friendly palettes.
layout-system
by sanky369
Master responsive layout design using modern CSS (Flexbox, Grid), mobile-first approach, and breakpoint strategies. Create layouts that adapt beautifully across all devices while maintaining accessibility and performance. Includes container queries, aspect ratios, and advanced responsive patterns.
image-generation
by sanky369
Generate images using FAL.ai nanobanana pro. Use when creating product shots, social graphics, brand assets, or any visual content. Integrates with automation system for direct asset generation in Claude Code.
direct-response-copy
by sanky369
Write persuasive sales copy that converts using proven direct response principles. Use when writing landing pages, sales emails, ads, or any copy designed to drive action.
brand-asset
by sanky369
Generate branded design elements and visual assets. Use when creating logos, icons, brand patterns, or other branded visual elements.
interaction-physics
by sanky369
Master microinteractions, animations, transitions, and feedback systems. Create intentional, delightful interactions that guide users and provide clear feedback. Includes animation principles, timing, easing, state transitions, and best practices for performance and accessibility.
talking-head
by sanky369
Create presenter and UGC-style video content. Use when creating educational videos, testimonials, product demos, or personal brand content.
typography-system
by sanky369
Master typography design with font selection, type scales, hierarchy, readability, and accessibility. Create consistent, beautiful typography that works across all devices and contexts. Includes modular scales, fluid typography, variable fonts, and accessibility best practices.
accessibility-excellence
by sanky369
Master web accessibility (A11y) to ensure your product is usable by everyone, including people with disabilities. Covers WCAG standards, semantic HTML, keyboard navigation, screen readers, color contrast, and inclusive design practices. Accessibility is not a feature—it's a fundamental requirement.
project-planner
by adrianpuiu
Comprehensive project planning and documentation generator for software projects. Creates structured requirements documents, system design documents, and task breakdown plans with implementation tracking. Use when starting a new project, defining specifications, creating technical designs, or breaking down complex systems into implementable tasks. Supports user story format, acceptance criteria, component design, API specifications, and hierarchical task decomposition with requirement traceability.
performance-optimization
by sanky369
Master perceived performance through optimistic UI, skeleton screens, and latency strategies. Learn the difference between actual and perceived latency. Use when optimizing load times, designing loading states, or improving user confidence during operations.
design-foundation
by sanky369
Establish or formalize your design system foundation. Create design tokens (color, typography, spacing, shadows, borders), define component architecture, document design principles, and build the structure that enables consistency and scalability. Works with Tailwind CSS and framework-agnostic approaches.