Agent skill · jamditis
web-design-picker
Use when creating distinct website directions, a client review picker, asset catalog, previews, and Cloudflare-ready handoffs.
What it needs
About 7k tokens when loaded.
What this skill does
Web design picker Build a complete website-concept review package rather than isolated mockups. The default deliverable is three materially different, responsive website directions; a review shell that switches among them without losing the presentation context; a full-screen presentation mode; a searchable asset catalog with per-format, per-family, and download-all controls; two primary release archives; and supporting review, source, and full-handoff archives. When invoked for an actual website project, perform the work. Do not stop at a strategy document unless the user asks only for strategy. Default output contract Create: 1. Three standalone direction source pages in src/concepts/, built into dist/concepts/. 2. One generated review picker at dist/index.html. 3. One generated asset catalog at dist/design-assets.html. 4. Direction-specific logos, favicons, palettes, design tokens, and supporting graphic elements. 5. Optimized client media when source video or animation is supplied. 6. Desktop and mobile preview images when browser automation is available. 7. A lean static deployment ZIP with index.html at its root. 8. A separate complete design-assets handoff ZIP. 9. A machine-readable and human-readable QA report. Use scripts/webdesignpicker.py as the unified command-line entry point for scaffolding, building, validating, browser-testing, and packaging. Read the workflow reference before beginning a full project. Non-negotiable rules Build three distinct design theses, not one template with three palettes. Each direction must differ in information architecture, typography, spacing, geometry, media treatment, interaction, and emotional register. Keep each concept independently usable as a static page with its own title, viewport metadata, favicon, accessible navigation, and responsive layout. Use real supplied content and media as evidence. Do not invent capabilities, clients, metrics, certifications, software compatibility, or testimonials. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jamditis/web-design-picker