frontend-ui-engineering
A guide for building production-quality, accessible, and responsive user interfaces that avoid common AI-generated aesthetic patterns.
Is frontend-ui-engineering safe to install?
Safe to install: our audit of frontend-ui-engineering's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. This skill provides documentation and best practices for UI engineering. It does not execute code or perform file operations.
How we audit skills: our security review methodology.
Who is this skill for?
Frontend engineers and developers building or modifying user-facing interfaces.
What can you do with it?
- Building new UI components or pages
- Modifying existing user-facing interfaces
- Implementing responsive layouts
- Adding interactivity or state management
- Fixing visual or UX issues
How good is this skill?
Quality score: 5/10. The skill provides clear, actionable engineering standards and patterns. It effectively defines what constitutes production-quality code versus AI-generated output.
What does the skill file contain?
# Frontend UI Engineering ## Overview Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic." ## When to Use - Building new UI components or pages - Modifying existing user-facing interfaces - Implementing responsive layouts - Adding interactivity or state management - Fixing visual or UX issues ## C...
Frequently asked questions
How should I structure my component files?
Colocate related files such as the implementation, tests, stories, custom hooks, and types within a single directory for each component.
What is the recommended approach for state management?
Use the simplest approach that fits the requirement, ranging from local useState for UI state to global stores like Zustand or Redux for complex app-wide state.
How does this skill address accessibility?
It mandates WCAG 2.1 AA compliance, requiring keyboard navigation, proper ARIA labels, focus management, and meaningful empty or error states.
What breakpoints should I test for responsive design?
Test at 320px, 768px, 1024px, and 1440px.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
web-design-guidelines
440.2KDevelopers and designers who need to verify UI code compliance with interface standards
The web-design-guidelines skill audits UI code against Web Interface Guidelines. It fetches current rules from a remote source and compares them against specified local files.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
remotion-to-hyperframes
157.2KDevelopers migrating existing Remotion video projects to the HyperFrames framework
The remotion-to-hyperframes skill translates Remotion (React) video compositions into HyperFrames (HTML + GSAP) compositions. It uses a linting process to identify incompatible React patterns, maps Remotion APIs to HyperFrames equivalents, generates HTML/CSS/GSAP output, and validates the translation using SSIM-based image comparison against a tiered test corpus.