Design Tools Agent Skills

Kuroryuu Playground Builder

Builds interactive HTML playgrounds pre-populated with live Kuroryuu project data for architecture exploration, theme tuning, and agent configuration.

ViewComponent Coder

Builds modular, component-based Rails UIs using the ViewComponent framework and Evil Martians patterns.

Frontend Design

Creates distinctive, production-grade frontend interfaces with high design quality and framework-specific optimizations.

Stimulus Coder

Creates and refactors Stimulus.js controllers using Hotwire conventions and reusable design patterns.

Modern React & TypeScript Coder

Builds production-grade React components using TypeScript, modern hooks, and industry-standard architecture patterns.

Native Rails Dialog Patterns

Builds accessible, high-performance modal and overlay interfaces for Ruby on Rails using native HTML dialog elements, Turbo, and Stimulus.

Fluxwing Enhancer

Progressively enhances ASCII UI components from low-fidelity sketches to production-ready design specifications.

AI Background Remover

Removes backgrounds from images automatically using AI-powered subject isolation to create high-quality transparent PNG or WebP files.

Version Badge Pattern

Implements a standardized UI component to display application versioning, build metadata, and interactive changelog history.

AI Image Generator & Editor

Generates and edits high-quality photorealistic images, illustrations, and visual assets using state-of-the-art AI models.

UI/UX Pro Max

Accelerates professional frontend development with comprehensive design systems, accessibility audits, and technology-specific UI patterns.

PPTX Research Posters

Generates professional research posters using HTML/CSS optimized for export to PowerPoint and PDF formats.

Tailwind React Styling

Generates responsive, production-ready Tailwind CSS styles and React components using utility-first principles.

Frontend Development Patterns

Implements modern React and Next.js development patterns for performant, scalable, and maintainable user interfaces.

Avant-Garde Frontend Architect

Crafts bespoke, high-performance, and minimalist user interfaces using advanced architectural analysis and a personalized component library.

Netresearch Brand Identity

Automatically applies Netresearch brand guidelines, including typography, colors, and logos, to digital projects and documentation.

OpenAI Image Generation & Editing

Generates, edits, and iterates on professional images and project assets using the OpenAI Image API directly within your coding environment.

LaTeX Research Posters

Generates professional, publication-quality academic posters using LaTeX packages like beamerposter and tikzposter.

Self-Initiated Trigger Design

Designs psychological internal triggers to transition users from external notifications to self-motivated, habit-forming product engagement.

Cognitive Load Optimizer

Optimizes user interfaces and workflows by applying Cognitive Load Theory to minimize mental effort and maximize usability.

Cross-Platform Screenshot Capture

Captures system-level screenshots, application windows, and specific screen regions across macOS, Linux, and Windows for visual analysis.

Halo Effect Design Psychology

Applies cognitive bias principles to product design and UX to optimize first impressions and brand perception.

Landing Page Designer

Generates high-converting, visually unique landing pages using a mandatory 'Vibe Discovery' process to eliminate generic AI-generated aesthetics.

Vercel React Best Practices

Optimizes React and Next.js application performance using Vercel Engineering's proven patterns and 57 core optimization rules.

Document Visualizer

Converts documents and technical reports into professional infographics and visual summaries for easy sharing across team platforms.

UI/UX Design Architect

Generates comprehensive UI/UX design specifications, wireframes, and style guides based on user stories and core solutions.

Frontend Design Pro

Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through intentional design thinking and bold visual choices.

Algorithmic Art & Generative Design

Generates sophisticated, master-level generative art and computational aesthetics using p5.js and seeded randomness.

Canvas Visual Design

Generates museum-quality visual art and sophisticated posters using advanced design philosophies.

Information Architecture

Organizes and structures digital content to improve findability, usability, and navigation design through proven mental model alignment and taxonomy patterns.