ui

The UI skill is a specialized agent capability designed to generate front-end interface components, landing page hero sections, and interactive feedback forms. It acts as a disciplined UI development partner, ensuring that all generated code adheres to strict accessibility (a11y) standards, including alt-attribute enforcement, logical heading structures, and keyboard-navigable interactive elements. The skill functions by utilizing a layered priority system: it references standard UI best practices by default, while allowing for brand-specific or highly unique design requirements only when explicitly requested by the user. By following a structured quality gate approach (Step 0), the agent evaluates every component for screen reader compatibility, contrast ratios, and focus management before delivery. This skill is ideal for developers who need to rapidly scaffold interfaces while maintaining consistent, high-quality front-end architecture. It specifically supports complex animation controls, custom easing functions, and gradient-based decorations only upon explicit instruction, maintaining a clean codebase for standard tasks. The agent is strictly scoped to UI generation and should not be invoked for backend logic, database modeling, or authentication flows.

• Automated generation of responsive React or HTML/CSS UI components and layout hero sections.

• Integrated accessibility auditing (a11y) ensuring compliance with WCAG principles such as tab-indexing, focus state management, and semantic HTML structures.

• Dynamic feedback and contact form generation with built-in validation placeholders.

• Context-aware styling adjustments supporting brand-strengthening, custom animations, and complex easing when explicitly requested.

• Structured quality gate system (Step 0) providing pre-delivery checklists for images, forms, and interactive element keyboard-operability.

• Use this skill when the user explicitly requests UI updates, design prototyping, hero sections, forms, or visual component modifications.

• Avoid invoking this skill for backend API implementation, business logic processing, database schema design, or secure authentication/authorization features.

• Ensure all generated components align with the references defined in the ui-skills.md and frontend-design.md files.

• Prioritize the standard accessibility checklist for every UI task to ensure inclusive development.

• When complex visual effects like glows or animations are requested, verify that the user has explicitly authorized these, as they are excluded from default patterns.