Builds and modifies React components, Tailwind styling, and Next.js routing for the LANES frontend.
npx skills add https://github.com/pu-roi/LANES --skill ui-agent-pu-roi
Please help me install this Agent Skill. Skill: ui-agent Source: https://github.com/pu-roi/LANES/tree/main/.agents/skills/ui-agent Command: npx skills add https://github.com/pu-roi/LANES --skill ui-agent-pu-roi
src/shared/ui) before creating raw HTML elements, and mandates the central <Button> component with standard variant and size props. - Responsive PWA Design: Enforces dual mobile/desktop implementations for every UI change, using CSS variables like var(--bottom-nav-height) with env(safe-area-inset-bottom) to prevent fixed navigation bars from obscuring content. - Animation Standards: Directs use of framer-motion with <AnimatePresence> for page transitions, modals, and direction-aware sliding interfaces. - Use Case: When asked to add a new flood-report card to the map view, the agent builds it with shared components, framer-motion entry animations, and verifies both the mobile drawer and desktop sidebar variants. ## Quick Start Ask the agent to create a responsive React component for the LANES frontend, such as a flood alert card that works on both mobile and desktop layouts.High-intent search queries and answers about installing and using this skill.
Implement both mobile and desktop variants of every component, such as a mobile drawer and desktop sidebar. Use CSS variables like var(--bottom-nav-height) combined with env(safe-area-inset-bottom) for padding so fixed bottom navigation never obscures scrollable content.
Use framer-motion for page transitions, modals, and sliding tabs, wrapping elements in <AnimatePresence> for smooth entry and exit fade and scale effects. For direction-aware UI like swiping, track state and pass dynamic custom={direction} variants.
Always check the shared UI directory (src/shared/ui) before writing raw HTML elements. Use the central Button component with its standard variant and size props; reserve raw HTML buttons only for highly custom one-off layouts like floating icons over images.
No, frontend code must never query the database directly or use SQL. Data creation, validation, and transformation rules belong to the backend API layer, and the client should only pass JWT tokens provided by the backend in requests.
This happens when bottom padding is hardcoded on main containers. Instead, calculate padding dynamically with pb-[calc(var(--bottom-nav-height)+env(safe-area-inset-bottom))] so the layout adapts to the actual navigation height and device safe area.
okgoogle13Map frontend TypeScript API calls to Python backend endpoints and generate integration reports.
auldsyababuaGenerate CI/CD pipeline configurations for GitHub Actions, GitLab CI, CircleCI, and Jenkins.
aberrantCodePerform automated accessibility and visual checks on web and mobile UI components.
yeohj0710Configure static exports and routing for web frameworks with Capacitor.