skills.rest
OpenSourceAGI
OpenSourceAGIOFFICIAL
Explore all skills by this author →
GitHub

ask-shadcn-app-dock

Configure prop-driven macOS-style dock navigation in Next.js applications.

74|11|Updated Jul 4, 2024
Search Tags:#react#next.js#navigation#shadcn#next-themes#dock#theme switcher
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-shadcn-app-dock-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-shadcn-app-dock
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/skills/ask-shadcn-app-dock
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-shadcn-app-dock-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, next-themes, framer-motion.

What problem does it solve? Integrating a fixed, magnifying dock navigation into a Next.js app involves wiring dropdown menus, theme switching, keyboard shortcuts, and responsive placement, and small misconfigurations cause icons to 404, clicks to silently fail, or themes to flash on load. ## Core Features & Use Cases - Prop-Driven Dock Composition: Build a CategoryDock from DockNavItem objects with polymorphic icons, active states, and dropdown menus via the renderContent render prop. - Bundled Theme Switcher: Drop ThemeMenu into a dropdown for light/dark/system switching via next-themes plus a shadcn colour-theme picker persisted to localStorage and cookies. - Placement and Shortcut Control: Configure desktop/mobile fixed placements, mobileAlign for chat-input layouts, and Alt+N keyboard shortcuts. - Use Case: You are adding a bottom dock to a Next.js app with a search button and a theme dropdown; this Skill shows the exact props, renderImage wiring for next/image, and fixes for common failures like dead onClick handlers on menu items. ## Quick Start Ask the assistant to add a CategoryDock with a search item and a ThemeMenu dropdown to your Next.js layout using next/image for icons.

Frequently Asked Questions about ask-shadcn-app-dock

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a macOS-style dock to a Next.js app?▼

Install shadcn-app-dock and render CategoryDock with an items array of DockNavItem objects containing key, label, icon, and onClick. Pass a renderImage prop that wraps next/image so string icon sources render correctly in Next.js.

How do I add a theme switcher dropdown to a dock menu?▼

Give a dock item a menu with renderContent and return the bundled ThemeMenu component inside it. ThemeMenu renders loose dropdown items for light, dark, and system modes via next-themes, plus a shadcn colour-theme picker persisted to localStorage and a cookie.

Why does my dock item onClick never fire?▼

An item with a menu prop becomes a dropdown trigger, so its onClick is ignored by design. Move the action inside the menu's renderContent function, which receives side and close arguments for building the dropdown body.

Why do dock icon images 404 or warn in Next.js?▼

The default renderer for string icons is a plain img element, which bypasses Next.js image optimization and path handling. Pass a renderImage prop that renders next/image with the provided src, alt, and size.

Does ThemeMenu work without next-themes?▼

No, ThemeMenu requires a next-themes ThemeProvider above it in the tree and must be placed inside a DropdownMenuContent since it returns loose menu items rather than a container. Without these it renders nothing or throws.

Why does the colour theme flash or reset on page reload?▼

The theme class is applied client-side from localStorage, and unknown names fall back to defaultColorTheme. To avoid first-paint flash, read the theme cookie server-side and set the theme-<name> class on the html element during SSR.

Related Skills

Explore More Software Engineering Skills→
nthplusionthplusio

shadcn-theming

Configure dark/light modes and color palettes for shadcn-ui in Next.js and Tailwind projects.

Official
Intermediate
syncfusionsyncfusion

syncfusion-javascript-sidebar

Adds a Slideable Sidebar component to Blazor apps with Dock and ToggleButton support.

Official
Advanced
mgiffordmgifford
39

keyboard

Ensure keyboard operability and clear focus indicators for interactive UI elements.

Community
Advanced
raduceucaraduceuca

ui-skills

Enforce opinionated UI constraints for consistency, accessibility, and performance.

Community
Intermediate