only for genuine styling wrappers with no semantic meaning; every image gets alt text; headings nest in order (one

, then h2s, etc.); interactive elements are real buttons/links, not clickable divs. Don't inline styles or scripts. No claims about speed you can't back — just clean structure. What the page is for: [DESCRIBE THE PAGE] The main sections it needs, in order: [LIST THEM] Any must-have elements: [NAV ITEMS, FORM, HERO, FOOTER LINKS, ETC.] Give me: 1. A complete, valid HTML5 skeleton for this page using semantic tags, with placeholder text/labels I can replace. 2. Comments marking each region so a beginner can see the structure. 3. Explicit width/height (or aspect-ratio) on any image/embed slot so the layout doesn't shift as things load. 4. A short note on which ARIA attributes (if any) this structure genuinely needs — and which it doesn't, because native semantic tags already cover them. 5. The one accessibility check to run before I style it. ``` ## Example output [TO FILL AFTER TESTING] ## Tweaks - Pair with Fluid CSS System next — this gives the bones, that gives the skin - Ask for the same skeleton "as an Astro/React component" if that's your stack - Run the output through a validator (validator.w3.org) — semantic doesn't mean valid until checked --- --- name: Fluid CSS System category: coding works_with: [claude, chatgpt, gemini, cursor] difficulty: plug-and-play version: 1.0 source: adapted (viral "web architect" prompt pack, rewritten; guru naming and puffery removed) tested: no --- # Fluid CSS System ## What it does Writes a modern, responsive stylesheet from your colors and fonts — custom properties, CSS Grid and Flexbox, `clamp()` for type that scales smoothly, and a working dark mode — applied to semantic tags, no framework required. ## When to use it - You have an HTML skeleton and need it to look good and scale to any screen - You want dark mode done properly with variables, not a hacky override - You're tired of fighting breakpoints and want type/space that flows ## The skill ``` Act as a CSS developer who writes clean, modern, framework-free styles. Rules: use CSS custom properties for all colors, spacing, and fonts; use clamp() for fluid font sizes and spacing so fewer breakpoints are needed; layout with Grid and Flexbox; implement dark mode with a [data-theme] or prefers-color-scheme approach using the same variables; mobile-first. Keep specificity low. Don't invent performance numbers — just write maintainable CSS. My colors (name + hex): [LIST, or "suggest an accessible set"] My fonts (heading / body): [NAMES, or "system fonts"] The vibe: [E.G. calm/technical, warm, high-contrast] The HTML I'm styling: [PASTE SKELETON, or describe the sections] Give me: 1. A :root block of custom properties: color, spacing scale, font sizes with clamp(), radii — the design tokens. 2. A dark-mode block that reuses those variables (no duplicated rules). 3. Base + layout styles applied to the semantic tags, using Grid for page structure and Flexbox for components. 4. One fluid type scale so headings and body scale between a min and max without a wall of media queries. 5. A contrast note: confirm my text/background pairs meet WCAG AA, and flag any that don't with a fix. ``` ## Example output [TO FILL AFTER TESTING] ## Tweaks - Give it real hexes and it returns your palette; give it "suggest" and it proposes one — either works - Ask "add a print stylesheet" or "add reduced-motion handling" as a follow-up; both are one line for it - Verify the AA contrast claim yourself with a checker — never trust a color-contrast claim unverified --- --- name: Landing Section Layout category: coding works_with: [claude, chatgpt, gemini, cursor] difficulty: plug-and-play version: 1.0 source: adapted (viral "web architect" prompt pack, rewritten; conversion puffery removed) tested: no --- # Landing Section Layout ## What it does Builds a repeatable, scannable section block for a landing page — clear heading hierarchy, readable at a glance, consistent spacing — so a visitor understands what you offer without hunting. Structure and clarity, not dark-pattern "attention capture." ## When to use it - You have a page skeleton and need the middle sections (services, features, products) laid out - Your current sections are a wall of text nobody reads - You want one reusable pattern instead of designing each section from scratch ## The skill ``` Act as a front-end developer who values clarity over cleverness. Rules: one clear idea per section; a plain, descriptive heading (not vague hype); readable line lengths (~60-75 chars); real contrast for legibility, not just for shouting; consistent vertical rhythm between sections. No manipulation patterns, no fake urgency, no "forces the user to act" language — just a section a tired person can scan and understand. What this section presents: [SERVICES / FEATURES / PRODUCTS / STEPS] The items to show: [LIST EACH with a one-line description] My existing CSS variables (if any): [PASTE, or "none yet"] Give me: 1. A reusable semantic HTML pattern for one section, filled with my items — heading, supporting line, and a clean grid/list of the items. 2. The CSS for it, using my variables (or sensible defaults), responsive with Grid, no fixed heights that cause overflow. 3. A clear heading hierarchy: how this section's h2/h3 relate to the page's h1, so structure stays logical. 4. The "repeat it" note: exactly what to change to reuse this pattern for the next section, so the page stays consistent. 5. A readability check: line length, contrast, and tap-target size on mobile. ``` ## Example output [TO FILL AFTER TESTING] ## Tweaks - Keep one idea per section — the instinct to cram three is what made the old page unreadable - Reuse the exact pattern down the page; consistency is what makes a site feel designed - All-caps for a short label is fine; all-caps for a sentence hurts readability — keep it to 1-3 words --- --- name: Lead Capture Form category: coding works_with: [claude, chatgpt, gemini, cursor] difficulty: plug-and-play version: 1.0 source: adapted (viral "web architect" prompt pack, rewritten; "friction funnel" framing removed) tested: no --- # Lead Capture Form ## What it does Builds an accessible, low-friction contact or signup form as a proper semantic component — labels, validation, and a clear success state — that asks for the least it can and actually works for keyboard and screen-reader users. ## When to use it - You need a contact, callback, or email-capture form on a page - Your current form is unlabeled, ugly on mobile, or inaccessible - You want the markup right before wiring it to a backend ## The skill ``` Act as a front-end developer who builds accessible forms. Rules: every input has a real (not just a placeholder); use correct input types and autocomplete attributes; mark required fields honestly; validation messages are announced to assistive tech; the form works and looks right on a phone; ask for the minimum fields the goal needs — no data-harvesting for its own sake. What the form is for: [CONTACT / CALLBACK / EMAIL SIGNUP / OTHER] The absolute minimum fields the goal needs: [LIST — challenge me if I list more than necessary] Where it submits: [an endpoint / mailto / "just the markup for now"] My CSS variables (if any): [PASTE or "none"] Give me: 1. The semantic HTML form: labelled fields, correct types, autocomplete, required flags, and an accessible submit button. 2. Inline validation: HTML-native where possible, with clear, polite error text and an aria-live region for messages. 3. The success state: what the user sees after submitting, handled accessibly (focus moves to the confirmation). 4. CSS using my variables, comfortable tap targets, no layout shift when errors appear. 5. A one-line note on where to add spam protection (honeypot / provider-side) without adding a captcha wall unless truly needed. ``` ## Example output [TO FILL AFTER TESTING] ## Tweaks - Fewer fields = more completions and less to store; let it talk you down to name + one field where it can - Ask for the matching submit-handler in your stack (Netlify Forms, Formspree, an API route) as a follow-up - Test it with the keyboard only — tab through, submit, read the error. If that works, everyone can use it --- --- name: Frontend Performance Audit category: coding works_with: [claude, chatgpt, gemini, cursor] difficulty: plug-and-play version: 1.0 source: adapted (viral "web architect" prompt pack, rewritten; vanity-metric framing removed) tested: no --- # Frontend Performance Audit ## What it does Takes your real performance numbers (from Lighthouse or PageSpeed Insights) and your page, and tells you the specific thing that's actually slow — and the concrete fix — instead of a generic "optimize your images" list. ## When to use it - Your page feels slow and you have (or can get) real metrics - Lighthouse flagged something and you don't know what to change - Before launch, to catch the obvious wins ## The skill ``` Act as a web performance engineer. Rules: work only from the real numbers and code I give you — do NOT invent metrics or guess at values I didn't provide; if you need a number I don't have, tell me how to get it (Lighthouse / PageSpeed Insights / DevTools). Rank fixes by likely impact, and be honest when a "problem" is actually fine. No made-up percentages. My real metrics (paste what you have — Lighthouse/PSI): [LCP, CLS, INP/TBT, total page weight, request count — whatever I actually have] What the page is: [DESCRIBE, and paste the and any big scripts/styles if you can] What feels slow to me: [FIRST PAINT / JANK ON SCROLL / SLOW TAP / JUST THE SCORE] Give me: 1. The diagnosis: which metric is actually bad vs which is fine, read from MY numbers — no invented data. 2. The likely cause in my specific page (render-blocking resource, unsized image causing CLS, heavy script, no caching, etc.), pointing at the actual code I pasted where possible. 3. The fix list, ranked by expected impact, each with the concrete change to make — not "optimize images" but "add width/height to the hero img and serve it as WebP". 4. What to re-measure after each fix to confirm it worked. 5. The honest note: anything that's already good and not worth touching, so I don't waste effort chasing a green score. ``` ## Example output [TO FILL AFTER TESTING] ## Tweaks - Get real numbers first: run the page through PageSpeed Insights and paste the results — the audit is only as good as the data - Fix one thing, re-measure, then the next; bulk changes hide which one helped - A perfect score isn't the goal — a page that feels fast to real users is; the skill will tell you when to stop --- --- name: Ship a Landing Page category: coding tools_required: [Any AI chat (or Cursor), a code editor, a free host like Netlify or Cloudflare Pages] cost: free time_to_set_up: an afternoon for a real page version: 1.0 source: original system built from 5 adapted skills (see /library coding skills) tested: no --- # Ship a Landing Page ## What it does Chains five skills into one clean path from empty folder to a live, fast, accessible landing page: bones, skin, sections, a form, and a performance pass — no framework required, no template-shop markup. ## What you need - A text editor (or Cursor) and any AI chat - Your content: what the page is for, the sections it needs, your colors/fonts - A free static host (Netlify drop, Cloudflare Pages, GitHub Pages) - The five skills: Semantic HTML Skeleton, Fluid CSS System, Landing Section Layout, Lead Capture Form, Frontend Performance Audit ## The workflow (in order) 1. **Semantic HTML Skeleton** — get the page bones right first: semantic tags, images sized so nothing jumps, accessible structure. Save as index.html. 2. **Fluid CSS System** — feed it your colors and fonts; get design tokens, fluid type, Grid/Flex layout, and a real dark mode. Save as style.css. 3. **Landing Section Layout** — build one reusable, scannable section pattern, then repeat it down the page for each block (services, features, proof). Consistency here is what makes it look designed. 4. **Lead Capture Form** — add the accessible contact/signup form, asking for the minimum. Wire it to your host's form handler or an endpoint. 5. **Deploy, then Frontend Performance Audit** — put it live (drag the folder to Netlify), run it through PageSpeed Insights, paste the real numbers into the audit, fix the top item, re-measure. ## Maintenance habits - Keep the CSS variables as your single source of truth — restyle by changing tokens, not chasing hex codes through the file. - Re-run the performance audit after adding anything heavy (a video, a third-party script). - Every image gets width/height (or aspect-ratio) forever — it's the cheapest way to keep the layout from jumping. ## What we stripped This was rebuilt from a pack of eight "elite web architect" prompts drowning in invented jargon: "Asymmetric-Yield Semantic Skeleton", "Prestige-Identity Fluid Grid", "Pattern-Interrupt", "Humanized-Velocity Value Engine", "Skeptic-Filter Trust Shield". None of the coined names mean anything — they're the exact "rename a normal thing to sound proprietary" move this library exists to undo. Stripped: the manufactured terminology, the "immediate visual authority", "forces immediate interaction", "dissolving visitor skepticism", "ultra-premium launch" puffery, and "eliminate layout shift in 30 minutes" style promises. Also dropped from the original eight: two prompts that were pure conversion theater (a "proof-of-concept matrix that forces interaction" and a vague "3 interactive script layouts") with no real technique under them, and one that was just "write landing copy" — already covered by the content skills. What survived is five genuine front-end tasks. The techniques under them (semantic HTML, clamp() fluid type, Grid/Flexbox, dark-mode custom properties, Core Web Vitals) are current, verifiable best practice — not secrets, just craft.