Frontend skills

This skill guides you through creating reusable Gluestack UI v4 components, covering planning, structure, styling, TypeScript, and accessibility best practices.

This skill generates standalone VitePress tutorials that explain how a codebase is implemented, with diagrams, code references, and localization options.

This skill helps you audit and fix web accessibility issues for WCAG compliance, providing actionable code fixes and guidance.

This skill enables type-safe component styling with class variance authority by defining variants, defaults, and compounds for reusable UI components.

This skill helps you adopt React 19 patterns and deprecations, guiding component and hook updates for server-first rendering and compiler-assisted optimization.

This skill helps you generate, regenerate, and load Aurora frontend modules, add packages, and create projects efficiently from YAML changes.

This skill helps you design interfaces that reveal complexity progressively, balancing beginners' clarity with experts' control to reduce cognitive load.

This skill helps design page layouts and grid systems, providing structure, spacing guidance, and layout conventions for consistent UI.

This skill enforces logic-less Handlebars patterns to keep templates clean, safe, and maintainable by guiding data preparation and helper usage.

This skill generates complete TanStack Query v5 hooks for data fetching and mutations in TypeScript projects.

This skill helps you implement Storybook CSF 3.0 patterns with typed meta, args, play functions, and autodocs for robust UI documentation.

This skill analyzes React code against best practices for hooks, state, performance, accessibility, testing, and design patterns to improve reliability.

This skill guides and automates the version release flow for PF projects, from changeset creation to deployment and release notes.

This skill helps you apply React 19 patterns and best practices to optimize components, state, and rendering for faster, maintainable UI.

This skill enables server-side rendering for Inertia Rails apps to boost SEO and first-load performance.

This skill enforces a strict React structure with one component per file and one hook per hook file to improve maintainability and reuse.

This skill helps you handle client-side image processing efficiently by previewing, resizing, compressing, and managing EXIF orientation with safe cleanup.

This skill helps you diagnose and fix runtime errors, tests, and performance bottlenecks through systematic reproduction and targeted fixes.

This skill proactively updates codemaps and documentation from code, ensuring READMEs, guides, and architecture maps stay accurate.

This skill helps implement UI components for new features, ensuring responsive layouts, accessible interactions, and consistent design across apps.

This skill helps you apply UI/UX design patterns for an LMS, improving navigation, accessibility, and responsive layouts across pages.