diff --git a/docs/prompts/jsfiddle-page-layout/PROMPT.md b/docs/prompts/jsfiddle-page-layout/PROMPT.md new file mode 100644 index 0000000..ef1f31b --- /dev/null +++ b/docs/prompts/jsfiddle-page-layout/PROMPT.md @@ -0,0 +1,66 @@ +--- +name: jsfiddle-page-layout +description: Create a responsive sample page layout for a user-supplied domain and return paste-ready HTML and CSS for JSFiddle. +x-personal-mcp: + id: jsfiddle-page-layout + version: 1.0.0 + tags: + - frontend + - html + - css + - jsfiddle + - layout + - prototyping + - prompts + capabilities: + - resource://prompts/jsfiddle-page-layout/document + arguments: + domain: + title: Domain + description: The product, service, organization, or subject the sample page should represent, including its audience when known. + required: true + layout_brief: + title: Layout brief + description: Optional page type, required sections, content priorities, visual direction, or constraints. + required: false +--- + +# JSFiddle Page Layout + +Create a polished sample page layout for the supplied domain. The result must run by pasting the markup and styles into the [JSFiddle](https://jsfiddle.net/) HTML and CSS panes. + +## Inputs + +1. `domain`: the product, service, organization, or subject represented by the page, including its intended audience when known +2. `layout_brief`: optional page type, required sections, content priorities, visual direction, or constraints + +## Workflow + +1. Infer the page's primary purpose, audience, content hierarchy, and most important user action from the inputs. +2. If the domain does not provide enough information to choose a useful page type or primary action, ask one concise clarification question before generating code. +3. Choose a visual direction and information density appropriate to the domain. Build the usable page itself, not a marketing explanation of the page. +4. Write semantic HTML with realistic domain-specific sample content. Do not use placeholder text such as lorem ipsum. +5. Build the layout with modern CSS, using [CSS Grid](https://css-tricks.com/complete-guide-css-grid-layout/) for two-dimensional page structure and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for one-dimensional alignment where each fits naturally. +6. Make the page responsive at narrow mobile and desktop widths without horizontal overflow, overlapping content, or clipped text. +7. Keep the example self-contained. Use no JavaScript, build tools, external stylesheets, images, or icon libraries unless the layout brief explicitly requires them. +8. Include accessible landmarks, heading order, labels, focus styles, color contrast, and reduced-motion handling when animation is present. +9. Use CSS custom properties for the color, typography, spacing, border, and shadow system. Avoid generic framework styling and tailor the visual language to the domain. + +## Output Contract + +Return exactly two fenced code blocks in this order: + +1. An `html` block containing only the content for JSFiddle's HTML pane. +2. A `css` block containing only the content for JSFiddle's CSS pane. + +Do not include setup instructions, design commentary, JavaScript, or prose outside the two code blocks. + +## Quality Rules + +1. Prefer semantic elements such as `header`, `nav`, `main`, `section`, `article`, `aside`, and `footer` when they match the content. +2. Reserve large display type for a true hero or primary page title; keep operational interfaces compact and easy to scan. +3. Use cards only for repeated items or genuinely framed tools. Do not place cards inside cards. +4. Use stable responsive constraints for grids, controls, media, and navigation so dynamic content does not shift the layout unexpectedly. +5. Avoid decorative gradients, floating color blobs, excessive rounding, and one-note palettes unless they are explicitly appropriate to the domain. +6. Ensure controls look and behave like their purpose, with visible hover and keyboard-focus states. +7. Keep all visible copy relevant to the fictional domain rather than describing the mockup or its implementation. \ No newline at end of file