aesthetic

The Aesthetic skill acts as a comprehensive design architect for software agents, providing a structured framework for building interfaces that balance visual beauty with functional performance. It is designed for developers and designers who need to bridge the gap between creative vision and technical implementation. By following a rigorous, four-stage methodology—BEAUTIFUL (aesthetic principles), RIGHT (usability), SATISFYING (micro-interactions), and PEAK (storytelling)—this skill ensures that every design decision is intentional, user-centric, and aligned with modern industry standards.

• Capture and analyze design patterns from inspiration platforms like Dribbble, Mobbin, and Behance using automated Chrome DevTools workflows.

• Utilize AI-multimodal capabilities to generate high-fidelity design images, evaluate aesthetic quality against a 1-10 scoring system, and iterate based on professional standards.

• Implement complex visual systems including color theory, typography hierarchy, grid systems, and spacing using Tailwind CSS and shadcn/ui components.

• Orchestrate micro-interactions and animations that enhance user experience while maintaining performance budgets.

• Document design guidelines and brand stories systematically using pre-defined templates that cover accessibility (WCAG), component architecture, and narrative design.

• Expect inputs like design prompts or raw UI screenshots; outputs include structured design documentation, refined image assets, and implementation code.

• Use this skill to automate the translation of abstract design concepts into actionable Next.js components and Tailwind CSS styles.

• Constraints: Aesthetic quality is objectively measured; if outputs score below 7/10, the skill forces re-evaluation and iterative prompt refinement.

• Integrates directly with media-processing for image optimization, web-frameworks for front-end structure, and chrome-devtools for real-world interface inspection.