Develop a modern sidebar dashboard interface using HTML, CSS
Sidebar dashboard design
Develop a modern sidebar dashboard interface using HTML, CSS, and JavaScript, focusing on user experience and responsive design.
Overview
Develop a modern sidebar dashboard interface using HTML, CSS, and JavaScript, focusing on user experience and responsive design.
The prompt
| 1 | Act as a Frontend Developer. You are tasked with designing a sidebar dashboard interface that is both modern and user-friendly. Your responsibilities include: |
| 2 | |
| 3 | - Creating a responsive layout using HTML5 and CSS3. |
| 4 | - Implementing interactive elements with JavaScript for dynamic content updates. |
| 5 | - Ensuring the sidebar is easily navigable and accessible, with collapsible sections for different functionalities. |
| 6 | - Using best practices for UX/UI design to enhance user experience. |
| 7 | |
| 8 | Rules: |
| 9 | - Maintain clean and organized code. |
| 10 | - Ensure cross-browser compatibility. |
| 11 | - Optimize for mobile and desktop views. |
Connects with Agent Alley MCP · agentalley.io/mcp
Details
- Updated
- Sep 9, 2026
- License
- CC0-1.0
- Source
- prompts.chat ↗
- Creator
- furkan er · 1 listing
Similar prompts
See all →
SkillReverse-lookup glossary that turns a vague descriptionAnimation vocabulary
emilkowalski/skills · by emilkowalskiReverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.★ 40.8k GitHub stars
SkillMake hand-painted watercolour-and-ink cartoon videosPainted animation
edenfunf/reelmimic · by edenfunfMake hand-painted watercolour-and-ink cartoon videos (MP4) with code — p5.js + p5.brush rendered frame by frame in headless Chrome, encoded with ffmpeg — starring Clawd or any character. Use when the user asks to make an animation, animated short, cartoon, music video, lyric video, animated GIF/loop or "a video of Clawd…", or mentions the PDoomVideo / ClaudeAnimationBase approach. Covers storyboarding, the engine API, the render-and-look review loop, music/lyric sync and splitting long videos across subagents.★ 3.6k GitHub stars
SkillSearch tool for modern web development best practicesModern web guidance
GoogleChrome/modern-web-guidance · by GoogleChromeSearch tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip — web APIs evolve rapidly and training weights contain obsolete patterns. Trigger immediately for: - UI/Layout: Modals, dialogs, popovers, Glassmorphism/backdrop-filters, anchor positioning, container queries, `:has()`, `:user-valid`. - Scroll/Motion: View Transitions, Scroll-driven animations, scroll parallax/reveals. - Performance: CWV (LCP, INP), content-visibility, Fetch Priority, image optimization. - System/APIs: Local filesystem access, WebUSB, WebSockets sync, WebAssembly widgets. - Frameworks: Adapting layout/styles in React, Vue, Angular. - General Frontend: Forms, autofill, advanced inputs, custom scrollbars, modern component states, etc. DO NOT trigger for: - Backend: Database SQL, ORMs, Express API routes. - Pipelines: CI/CD deployment, Docker, Actions. - Generic: Local scripts (Python/Go tools), ESLint, Git.★ 2.4k GitHub stars
SkillTraduz pedidos de animação em português para o efeito deBiblioteca de Motion apenasdouglas · Versão Documental
apenasdouglas/ai-motion-library · by apenasdouglasTraduz pedidos de animação em português ("faz o número quicar", "entra um depois do outro", "dá um tranco no zoom") para o efeito de motion graphics certo, com o termo técnico, a duração e a aceleração. Use sempre que o usuário pedir animação, motion, transição ou efeito em vídeo, HTML, CSS, GSAP, Remotion, HyperFrames ou After Effects, principalmente quando o pedido for vago ("faz uma animação bonita") ou o vídeo for de canal dark (faceless) de curiosidades, história ou documentário. Also triggers on English requests for motion graphics, easing and animation effects in documentary or faceless YouTube videos.★ 68 GitHub stars
SkillHeadless, reproducible browser automation with PlaywrightPlaywright Browser
AndyShiu/claude-skill-playwright-browser · by AndyShiuHeadless, reproducible browser automation with Playwright for any project — screenshots of web pages or local dev servers (desktop/tablet/mobile, full page or one element, single page or every page/menu of an app in one batch), frontend audits (console errors, failed requests, broken images/links, responsive overflow, axe accessibility, LCP/CLS performance), before/after visual comparison, scripted E2E flows (log in, click, fill, page through, assert), and logged-in pages via saved sessions. Use this whenever the user wants to screenshot or visually check a site, find frontend bugs, see how a page looks on mobile, compare the UI before and after a CSS/code change, reproduce a bug from an issue or ticket and capture evidence images for it, verify a UI flow works, or run/write a browser test — even if they never say "Playwright" or "browser". If Claude in Chrome could also do the job, briefly ask which to use (with a recommendation) instead of silently picking.★ 49 GitHub stars
SkillDesign, build, redesign, audit and polish websitesSitesmith
byensitmagnus/sitesmith · by byensitmagnusDesign, build, redesign, audit and polish websites and web apps that do not look AI-generated. Use for landing pages, marketing sites, product and e-commerce pages, SaaS sites, dashboards, web apps, local business sites, portfolios and editorial sites, and for improving existing React, Next.js, Astro, Vue, Tailwind, shadcn or plain HTML/CSS projects. Triggers on: build a website, make a landing page, design a page, redesign this, make it look better, fix the design, improve the UI, this looks generic, choose colours or fonts, pick a style, add animations, make it responsive, add dark mode, accessibility pass, hero section, pricing table, dashboard layout, product page, component styling, design system, design review, UI audit.New listing