Build responsive React UI components with accessibility and performance patterns.
npx skills add https://github.com/rbaumier/skills --skill frontend-rbaumier
Please help me install this Agent Skill. Skill: frontend Source: https://github.com/rbaumier/skills/tree/main/frontend Command: npx skills add https://github.com/rbaumier/skills --skill frontend-rbaumier
Provides a comprehensive, opinionated playbook and implementation guidance for building production-ready front-end interfaces. It reduces guesswork and rework by enforcing patterns for component architecture, data fetching, forms, state management, styling, accessibility, and responsive design so teams ship consistent, maintainable UIs faster.
Design a responsive dashboard page with accessible, composable React components (cards, header, data grid, forms) for B2B SaaS admins on desktop.
High-intent search queries and answers about installing and using this skill.
Build accessible React components by applying a playbook that enforces component colocation, composition over boolean props, design tokens, semantic landmarks, and WCAG-compliant focus management. This ensures consistent, maintainable UI architecture across features.
Structure a B2B SaaS dashboard by applying a context-first design protocol, then building responsive layouts with composable React components like cards, data grids, and forms. This approach ensures maintainable, production-ready admin interfaces.
Suspense-first data fetching uses TanStack Query patterns with cache-first strategies and mutation invalidation, while Zustand manages granular local state selectors. This combination reduces layout shift and ensures performant data loading.
Yes, you can use MUI v7 sx patterns restricted strictly to design tokens for responsive styling. This enforces consistent visual language across breakpoints while maintaining high-performance UI rendering.
Manage form state using useActionState and useOptimistic guidance, combining inline validation with disabled-loading buttons and skeletons. This prevents layout shift and establishes a clear error hierarchy for better UX.
Use virtualization for long lists and lazy-loading for heavy components to achieve measurable frontend performance gains. These techniques prevent UI blocking and reduce initial bundle size for high-performance web applications.
kireevkit15-sysRun a structured discovery interview and generate a design brief.
fiftynotaiGenerate accessible UI component specifications with WCAG 2.1 AA contrast ratios.
Dimon94Provide React/TypeScript frontend guidelines covering Suspense data fetching, lazy loading, MUI v7, and TanStack Router.
stephanjImplement Material-UI v7 components with sx prop styling and theme customization.
