Enforce mode-specific navigation patterns for Next.js and Tailwind CSS headers.
npx skills add https://github.com/OthmanAdi/gmira --skill gmira-nav
Please help me install this Agent Skill. Skill: gmira-nav Source: https://github.com/OthmanAdi/gmira/tree/main/skills/gmira-nav Command: npx skills add https://github.com/OthmanAdi/gmira --skill gmira-nav
This skill solves the issue of generic, unauthored site navigation that fails to reflect the specific material world or purpose of a product, preventing the common trap of using identical, low-effort UI patterns across different projects.
Use the gmira-nav skill to audit the current site header and implement a mode-specific navigation structure that aligns with the page direction.
High-intent search queries and answers about installing and using this skill.
Build accessible site navigation in Next.js and Tailwind CSS by enforcing mode-specific structural patterns, semantic landmarks, focus trapping, and aria-current usage. This approach standardizes headers and menus while ensuring robust keyboard interactions.
Mode-based navigation design tailors the site header structure based on page intent, such as Persuade, Operate, Read, or Experience. This ensures the navigation chrome actively serves the user's specific goal rather than using generic layouts.
Implement a command palette with focus trapping in Tailwind CSS by applying accessibility-first chrome patterns and semantic landmarks. These structural rules prevent focus escape and ensure keyboard users can navigate the overlay without getting stuck.
Mobile menu overlays fail accessibility audits when they use generic full-screen patterns without proper focus management or skip links. Replacing them with context-aware navigation and robust focus trapping resolves these structural pitfalls.
Yes, you can design web navigation chrome using a consistent structural line system with rule tokens and CSS utilities. This integrates the header and mobile menus seamlessly with the page's visual rhythm and material aesthetic.
Audit an existing site header by checking if the navigation reflects the product's thesis and mode direction. Replace generic hamburger menus with context-aware structures that enforce accessibility standards and mode-specific patterns.
darthlinuxerDefine Tailwind v4 design tokens and responsive patterns in CSS-first stylesheets.
coastdigitalgroupCreate accessible responsive navigation with ARIA attributes and semantic header/nav/ul structure.
corey-alixCreate atomic CSS utility classes using token-based custom properties.
aaronbassettImplement Flutter animations with AnimatedContainer, AnimationController, Tween, CurvedAnimation, Hero, and SpringSimulation.
