Skill UI

Outlines WCAG 2.2 accessibility patterns for web apps, covering semantic HTML, ARIA roles, keyboard navigation, form handling, and contrast checks to keep interfaces usable for assistive technologies.

Provides a comprehensive audit of a UI component or page to ensure WCAG 2.2 AA accessibility compliance. This tool systematically checks for critical issues like insufficient color contrast, poor keyboard navigability, missing alt text, and non-semantic HTML usage. It helps developers integrate robust accessibility checks directly into their design system workflow, improving product usability for all users.

This skill acts as an expert Design Systems Lead, analyzing complex technical assets (HTML, CSS, screenshots) from existing projects. It synthesizes a comprehensive 'Semantic Design System' into a structured DESIGN.md file. This output serves as the authoritative 'source of truth' for AI prompting, ensuring that any new UI generated by tools like Stitch adheres perfectly to the established visual language, color palette, and component standards.

StyleSeed Design Review analyzes UI/frontend code (React/Tailwind/HTML) against a detailed design rubric. It scores the interface (0-100) across coherence, color discipline, hierarchy, and polish. The tool pinpoints specific violations—such as mixed corner radii or non-semantic colors—and generates a prioritized, actionable list of fixes, ensuring the final product looks professional and polished, not generic or 'AI-generated.'

A technical specialization focused on Generative Engine Optimization (GEO). This skill ensures that specific web pages are structured, documented, and optimized for modern AI answer engines (Google AI Overviews, ChatGPT, Bing Copilot). It focuses on technical elements like structured data (JSON-LD), semantic HTML, and robust metadata to maximize discoverability, trustworthiness, and quotability for AI consumption, rather than traditional SEO ranking.

A comprehensive guide to building highly accessible user interfaces using React and Next.js. Covers best practices for semantic HTML, proper ARIA attribute usage, managing form labels and error states, and ensuring full keyboard navigation support. Essential when developing any interactive component or form.

This skill provides expert capabilities for professional HTML development, emphasizing semantic markup, WCAG accessibility, and modern HTML5 standards. Use it to build structurally sound, accessible, and responsive web pages, incorporating complex forms, multimedia (SVG, Canvas), and adhering to industry best practices.