Add or review CASL permission checks for Next.js 15 frontend components and routes.
npx skills add https://github.com/lety-ai/lety-skill-hub --skill fe-permissions
Please help me install this Agent Skill. Skill: fe-permissions Source: https://github.com/lety-ai/lety-skill-hub/tree/main/plugins/casl/skills/casl Command: npx skills add https://github.com/lety-ai/lety-skill-hub --skill fe-permissions
Inconsistent or missing permission checks in the frontend lead to insecure UI surface and leaked functionality where users can see or act on features they should not access. This Skill provides concrete patterns and rules to centralize authorization checks, avoid fragile role-string logic, and ensure route and component-level protection are applied correctly.
Add Actions.READ for TenantResourceObjectEnum.BILLING to the sidebar item for /billing and verify AuthRedirect blocks users without that permission.
High-intent search queries and answers about installing and using this skill.
To add permission checks to Next.js routes, register CASL abilities on sidebar items using Actions and TenantResourceObjectEnum enums so AuthRedirect can automatically block unauthorized access and redirect users to a 403 page.
To conditionally render UI components based on CASL abilities, use the usePermissionsStore Zustand store to reliably check user permissions and show or hide frontend elements according to their authorized access.
Yes, you can prevent impersonated users from performing destructive actions by enforcing specific restrictions that block DELETE operations even if the user's CASL abilities would normally allow them.
No, this approach avoids fragile role-string logic by centralizing frontend authorization checks with CASL abilities and a Zustand permissions store to reliably protect UI elements and routes.
To protect a billing dashboard route, add Actions.READ for TenantResourceObjectEnum.BILLING to the sidebar item configuration and verify that AuthRedirect redirects unauthorized users to the 403 page.
lety-aiScaffold domain-organized frontend feature modules for Next.js 15 App Router TypeScript projects.
splits-networkImplement authentication and authorization with Clerk and RBAC across microservices.
gouravsingh311Standardize React component development with routing and zustand store conventions.
Arnutt-NImplement Role-Based Access Control for multi-role authorization in HR-IMS.
