Build a feature-rich markdown notes application
Build a feature-rich markdown notes application
Overview
Build a feature-rich markdown notes application
The prompt
| 1 | Build a feature-rich markdown notes application with HTML5, CSS3 and JavaScript. Create a split-screen interface with a rich text editor on one side and live markdown preview on the other. Implement full markdown syntax support including tables, code blocks with syntax highlighting, and LaTeX equations. Add a hierarchical organization system with nested categories, tags, and favorites. Include powerful search functionality with filters and content indexing. Use localStorage with optional export/import for data backup. Support exporting notes to PDF, HTML, and markdown formats. Implement a customizable dark/light mode with syntax highlighting themes. Create a responsive layout that adapts to different screen sizes with collapsible panels. Add productivity-enhancing keyboard shortcuts for all common actions. Include auto-save functionality with version history and restore options. |
Connects with Agent Alley MCP · agentalley.io/mcp
Details
- Updated
- Sep 9, 2026
- License
- CC0-1.0
- Source
- prompts.chat ↗
- Creator
- Fatih Kadir Akın · 14 listings
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 listingMore from Fatih Kadir Akın
PromptGenerate hyperrealistic food photographs suitableHyperrealistic food photo creator
f/prompts.chat · by Fatih Kadir AkınGenerate hyperrealistic food photographs suitable for professional use in menus, advertisements, and promotional materials. This prompt ensures high-quality images with realistic textures, appetizing compositions, and perfect lighting.New listing
PromptStart your workflow by brainstorming and generating initialIdea generationf/prompts.chat · by Fatih Kadir AkınStart your workflow by brainstorming and generating initial ideasNew listing
PromptStructured prompt for generating an isometric city dioramaf/prompts.chat · by Fatih Kadir AkınStructured prompt for generating an isometric city diorama in a miniature 3D style, with weather and environment adaptive to the specified city.New listing
PromptCreate professional product imagesLifestyle product imagesf/prompts.chat · by Fatih Kadir AkınCreate professional product imagesNew listing
PromptA photo featuring a man in a cityf/prompts.chat · by Fatih Kadir AkınA photo featuring a man in a city.New listing
PromptCreate a comprehensive pomodoro timer appf/prompts.chat · by Fatih Kadir AkınCreate a comprehensive pomodoro timer appNew listing