[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CSR2BPCD04SARPWN7EJ5R0":3,"skill-same:01M7CSR2BPCD04SARPWN7EJ5R0":93},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":26,"commitSha":27,"skillDirectory":28,"forksCount":29,"repositoryHtmlUrl":30,"repositoryHomepageUrl":6,"ownerHtmlUrl":31,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":32,"install":33,"resources":46},"01M7CSR2BPCD04SARPWN7EJ5R0","web-design",null,"Load before planning, designing, auditing or launching any website, landing page, cinematic hero, microsite or above-the-fold layout, or a prompt for Lovable, Bolt or v0 to build one, including regulated (prescription drug, health, finance), multilingual or market-specific launches. Covers page types (home, product, pricing, about, blog), conversion and ethical persuasion, responsive and fluid layouts, Core Web Vitals, SEO and structured data, localization and language-law requirements, stack and CMS choice (Astro, Next.js, WordPress, Webflow, Framer) and launch QA.","newmindsgroup\u002Fvisual-design-kit","newmindsgroup","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F38358889?v=4","01M7CRXVBNJ0WGRTNWHWY2HVQ9","01M7CRXVC9ZXSZBAPZTP3Y39CA",2,"MIT","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: web-design\ndescription: >-\n  Load before planning, designing, auditing or launching any website, landing page, cinematic hero, microsite or\n  above-the-fold layout, or a prompt for Lovable, Bolt or v0 to build one, including regulated (prescription drug, health, finance), multilingual or market-specific launches. Covers\n  page types (home, product, pricing, about, blog), conversion and ethical persuasion, responsive and fluid layouts,\n  Core Web Vitals, SEO and structured data, localization and language-law requirements, stack and CMS choice\n  (Astro, Next.js, WordPress, Webflow, Framer) and launch QA.\nlicense: MIT\nmetadata:\n  version-timestamp: \"2026-11-10 03:00:00 UTC\"\n  agent-attribution: \"computer=vm; tool=Claude Code; version=2.1.321; timestamp=2026-11-10 03:00:00 UTC\"\n---\n\n# Web design\n\nAn excellent website says what it offers and for whom within five seconds, proves it with specifics, makes the next step obvious, loads fast on a mid-range phone, works for everyone, and can be found. Its look comes from the chosen direction and brand tokens, never from the template every other site uses.\n\n## Defaults\n\n| Decision | Default | Change when |\n| --- | --- | --- |\n| Breakpoints | Mobile-first `min-width` at sm 640, md 768, lg 1024, xl 1280, 2xl 1536px (token contract) | Content breaks earlier: add a component-level container query, not a new global breakpoint |\n| Containers | Page max `--container-xl` (1280px); text at `--measure-body` (66ch); side padding `--gutter` | Editorial or luxury: wider canvas with narrower text |\n| Body text | 16-18px, line-height 1.5-1.65 (`--line-height-normal` to `--line-height-relaxed`) | Long-form articles: 18-21px |\n| Fluid type | `clamp()` with rem + vw; max size no more than 2.5x min so 200% zoom still works | Fixed sizes for UI controls |\n| Section rhythm | Vertical padding `clamp(var(--space-12), 2rem + 5vw, var(--space-24))` (48px at 320 to 96px at 1280) | Dense product pages: `--space-8` to `--space-16` |\n| Hero | Headline of 6-12 words naming the outcome, one supporting sentence, one primary CTA, real product or proof visual | Brand campaigns: image-led hero with a short line |\n| CTAs | One primary goal per page; verb + outcome labels (\"Start free trial\"); 44-48px tall | Content pages: soft secondary CTA (newsletter) only |\n| Core Web Vitals (p75, field) | LCP 2.5 s or less, INP 200 ms or less, CLS 0.1 or less; design for LCP 2.0 s to keep margin | Never relax |\n| Budgets (starting points) | JS 150 KB compressed on marketing pages; LCP image 200 KB or less; 2 font families, 4 font files or fewer | App-like pages: JS up to about 300 KB, split by route |\n| Images | AVIF with WebP fallback in `picture`, `srcset` + `sizes`, explicit `width`\u002F`height`, lazy below the fold, `fetchpriority=\"high\"` on the LCP image | Logos and icons: SVG |\n| SEO | Unique `title` (about 50-60 characters), meta description (about 120-160), one `h1`, JSON-LD for Organization and page type, canonical, XML sitemap | Noindex utility and thin pages |\n| Accessibility | WCAG 2.2 AA; axe plus keyboard plus one screen reader before launch | Public sector and EU services: add an accessibility statement |\n| Stack | Astro for marketing and content sites; Next.js for app-like sites; WordPress, Webflow or Framer when the client edits without developers | See [stack selection](references\u002Fstack-selection.md) |\n| Consent | No non-essential cookies or tags before consent in the EU and UK; \"Reject all\" as prominent as \"Accept all\" | Cookieless, consent-exempt analytics where the jurisdiction allows |\n| Social cards | Open Graph and Twitter card per page, image 1200x630 | |\n\n## Workflow\n\nPaths in commands are relative to this skill's directory; resolve them to absolute paths before running.\n\n1. **Brief and discovery.** Goal and KPI per site and per page, audiences and their top tasks, traffic sources, competitors, existing analytics and Search Console data. For a redesign, audit content, SEO, Core Web Vitals field data and accessibility first.\n2. **Direction.** If the look is not set, run the `design-director` skill. Query the atlas: `python3 ..\u002F..\u002Flibrary\u002Fscripts\u002Fatlas.py query \"\u003Cindustry, market, audience, tier> marketing website\"` and read the `channel.marketing-website` entry.\n3. **Structure.** Sitemap, page types and content model with `ux-design` [information architecture](..\u002Fux-design\u002Freferences\u002Finformation-architecture.md); messaging hierarchy per page.\n4. **Page architecture.** Wireframe each page type section by section with real copy using [page architecture](references\u002Fpage-architecture.md) and [conversion](references\u002Fconversion.md).\n5. **Visual design.** Apply the direction's tokens; design at 375px and 1440px, then specify behavior at every breakpoint with [responsive and fluid](references\u002Fresponsive-and-fluid.md). Components and states come from `ui-design`.\n6. **Choose the stack and CMS** with [stack selection](references\u002Fstack-selection.md), including hosting, consent and analytics.\n7. **Build** semantic HTML on the kit tokens (`..\u002F..\u002Flibrary\u002Ftokens\u002Fdist\u002Ftokens.css`), the image pipeline, fluid type, and performance budgets per [performance](references\u002Fperformance.md); SEO per [SEO](references\u002Fseo.md). For a cinematic landing page, hero or single-file showpiece, follow the [cinematic landing workflow](references\u002Fcinematic-landing.md) (decide, calibrate, media, [spec](references\u002Flanding-spec-template.md), build from the [technique recipes](..\u002F..\u002Flibrary\u002Fknowledge\u002Fweb-techniques\u002FINDEX.md), look and fix, deliver); for a prompt to Lovable, Bolt, v0 or another builder, use [builder prompts](references\u002Fbuilder-prompts.md).\n8. **Render and inspect.** Screenshot every page type at 375, 768, 1280 and 1440px in light and dark; review with the `design-critique` skill (add `--early 350` to `render_review.mjs` to catch a white first paint and broken media); run Lighthouse on mobile and axe on every template; fix before showing anyone.\n9. **Launch** with the [launch checklist](references\u002Flaunch-checklist.md); recheck field Core Web Vitals and Search Console after 28 days.\n\n## Decisions that change the answer\n\n- **Site type.** Single-goal landing page: minimal navigation, one CTA repeated. Corporate multi-page: audience routing from the homepage. Content or editorial: reading comfort, search, related content. Commerce: product detail and checkout patterns from `ui-design` [flows](..\u002Fui-design\u002Freferences\u002Fflows.md). Docs: search, versioning, code samples.\n- **Traffic source.** Paid traffic: message match between ad and page. Organic: depth of content and internal linking. Direct and returning: fast paths to sign-in and top tasks.\n- **Industry and market.** Atlas entries set trust signals, regulation and conventions; for a regulated industry, read its entry before laying out the first view (for a prescription drug site, [pharma-biotech](..\u002F..\u002Flibrary\u002Fatlas\u002Findustries\u002Fpharma-biotech.md): fair balance, ISI in the first view, indication and Prescribing Information links). Market changes language and `hreflang`, legal pages (an Impressum in Germany and Austria), consent rules, payment methods and type support for the script.\n- **Audience.** `audience.low-bandwidth-entry-devices`: halve the budgets and test on a low-end Android device. `audience.older-adults`: 18px+ body, high contrast, no hover-only content. `audience.b2b-buying-committee`: pages for each role, pricing transparency, security and procurement content.\n- **Price tier.** Luxury: slower pacing, larger imagery, fewer words, but the same LCP budget. Value: price and proof up front, dense comparison.\n- **Who edits after launch.** Developers only: Astro or Next.js with Markdown or a headless CMS. Marketers daily: a visual CMS or a no-code builder with locked design tokens.\n\n## Common failures\n\n- The generic AI site: centered headline over a purple gradient blob, three icon cards, a logo strip and \"Unlock your potential\". Fix: a specific value proposition, real product proof, the direction's layout logic and copy with numbers.\n- A perfect Lighthouse score with poor field INP from tag managers and chat widgets. Fix: judge by CrUX or RUM at p75; facade or defer third parties.\n- Lazy-loading the hero image. Fix: eager load, `fetchpriority=\"high\"`, preload if discovered late.\n- Autoplaying hero video with no pause control. Fix: poster image, muted, a visible pause button (WCAG 2.2.2), no autoplay under reduced motion.\n- Cookie banners that hide \"Reject\", cover the CTA or trap focus. Fix: equal-weight buttons, bottom placement that does not obscure focus.\n- Eight \"Learn more\" buttons. Fix: one primary CTA per section with a specific label; descriptive links.\n- Staging `noindex` shipped to production, or no redirect map after a migration. Fix: the launch checklist.\n- Pure `vw` font sizes that do not scale with zoom. Fix: `clamp()` with a rem component.\n- Fake countdown timers and \"Only 2 left\" when untrue. Fix: the dark-pattern rules in [conversion](references\u002Fconversion.md).\n\n## References\n\n- [Page architecture](references\u002Fpage-architecture.md): landing page anatomy, section patterns, homepage, product, pricing, about, blog, CTA design.\n- [Conversion](references\u002Fconversion.md): value proposition, social proof, friction, ethical persuasion, dark-pattern rules (FTC, EU DSA, UCPD, UK DMCC).\n- [Responsive and fluid](references\u002Fresponsive-and-fluid.md): breakpoints, fluid type and space, container queries, responsive images, AVIF\u002FWebP, art direction, aspect ratio.\n- [Performance](references\u002Fperformance.md): Core Web Vitals thresholds, budgets, image, font and third-party strategy, lab versus field data.\n- [SEO](references\u002Fseo.md): semantic HTML, titles, meta descriptions, headings, JSON-LD, sitemaps, canonicals, hreflang, Open Graph.\n- [Stack selection](references\u002Fstack-selection.md): Astro, Next.js, WordPress, Webflow, Framer, headless CMS criteria, hosting, consent and privacy.\n- [Launch checklist](references\u002Flaunch-checklist.md): browsers, accessibility, performance, SEO, analytics, legal pages, redirects, 404, favicons, OG images, security headers.\n- [Cinematic landing](references\u002Fcinematic-landing.md): the seven-step workflow for media-led landing pages and heroes, with a look-and-fix loop.\n- [Landing spec template](references\u002Flanding-spec-template.md): the build spec wired to tokens and the atlas; also the body of a builder prompt.\n- [Cinematic craft](references\u002Fcinematic-craft.md): taste rules for media-led pages and a table of where they differ from kit defaults.\n- [Builder prompts](references\u002Fbuilder-prompts.md): adapting the spec for Lovable, Bolt, v0, Cursor, Manus, Google AI Studio and Kimi.\n- [Reference-first](..\u002Fdesign-director\u002Freferences\u002Freference-first.md) and [component libraries](..\u002Fui-design\u002Freferences\u002Fcomponent-libraries.md): evidence before layout, named React libraries instead of hand-built components, one showpiece per page.\n- [Web technique recipes](..\u002F..\u002Flibrary\u002Fknowledge\u002Fweb-techniques\u002FINDEX.md): 58 working recipes (video heroes, glass, type motion, scroll, 3D) with pinned libraries and licenses.\n- Atlas: `python3 ..\u002F..\u002Flibrary\u002Fscripts\u002Fatlas.py query \"boutique hotel website in Japan, luxury\"`; `show channel.marketing-website` for channel specs.\n- Working code: [Astro motion example](..\u002F..\u002Flibrary\u002Fexamples\u002Fastro-motion\u002FREADME.md) (Astro, Vue, Tailwind 4, GSAP, Headless UI) and the [Astro build skill](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-astro\u002FSKILL.md).\n- Deep process for client projects, by lifecycle stage ([website workflow](..\u002F..\u002Flibrary\u002FWEBSITE-WORKFLOW.md)):\n  - **Discover and plan:** [discovery](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-discovery\u002FSKILL.md), [audit](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-audit\u002FSKILL.md), [migration](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-migration\u002FSKILL.md), [content strategy](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-content-strategy\u002FSKILL.md).\n  - **Structure:** [information architecture](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-information-architecture\u002FSKILL.md), [page architecture](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-page-architecture\u002FSKILL.md), [page templates](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-page-templates\u002FSKILL.md), [site search](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-search\u002FSKILL.md).\n  - **Design:** [art direction](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-art-direction\u002FSKILL.md), [responsive](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-responsive\u002FSKILL.md), [media](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-media\u002FSKILL.md), [system assembly](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-system-assembly\u002FSKILL.md), [conversion](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-conversion\u002FSKILL.md), [forms](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-forms\u002FSKILL.md), [copy fit](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-copy-fit\u002FSKILL.md), [storytelling](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-storytelling\u002FSKILL.md), [visual review](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-visual-review\u002FSKILL.md).\n  - **Build:** [frontend](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-frontend\u002FSKILL.md), [Astro](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-astro\u002FSKILL.md), [motion library](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-motion-library\u002FSKILL.md), [CMS](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-cms\u002FSKILL.md), [platform adapters](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-platform-adapters\u002FSKILL.md), [integrations](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-integrations\u002FSKILL.md), [privacy and consent](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-privacy\u002FSKILL.md).\n  - **Verify:** [fidelity](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-fidelity\u002FSKILL.md), [accessibility](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-accessibility\u002FSKILL.md), [performance](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-performance\u002FSKILL.md), [SEO](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-seo\u002FSKILL.md), [browser QA](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-browser-qa\u002FSKILL.md), [analytics](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-analytics\u002FSKILL.md).\n  - **Launch and run:** [release](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-release\u002FSKILL.md), [maintenance](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-maintenance\u002FSKILL.md).\n  - **Site types, when relevant:** [commerce](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-commerce\u002FSKILL.md), [accounts](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-accounts\u002FSKILL.md), [localization](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-localization\u002FSKILL.md), [directories and marketplaces](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-directory\u002FSKILL.md), [editorial](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-editorial\u002FSKILL.md), [booking](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-booking\u002FSKILL.md).\n- Related skills: `design-director` (direction), `ux-design` (research, IA, content), `ui-design` (components, forms, flows), `typography`, `color`, `layout`, `imagery`, `motion`, `design-critique`.\n\nCatalog IDs covered: web-discovery, web-audit, web-migration, web-content-strategy, web-information-architecture, web-page-architecture, web-page-templates, web-search, web-art-direction, web-responsive, web-media, web-system-assembly, web-conversion, web-forms, web-copy-fit, web-storytelling, web-visual-review, web-frontend, web-astro, web-motion-library, web-cms, web-platform-adapters, web-integrations, web-privacy, web-fidelity, web-accessibility, web-performance, web-seo, web-browser-qa, web-analytics, web-release, web-maintenance, web-commerce, web-accounts, web-localization, web-directory, web-editorial, web-booking\n","# Web design\n\nAn excellent website says what it offers and for whom within five seconds, proves it with specifics, makes the next step obvious, loads fast on a mid-range phone, works for everyone, and can be found. Its look comes from the chosen direction and brand tokens, never from the template every other site uses.\n\n## Defaults\n\n| Decision | Default | Change when |\n| --- | --- | --- |\n| Breakpoints | Mobile-first `min-width` at sm 640, md 768, lg 1024, xl 1280, 2xl 1536px (token contract) | Content breaks earlier: add a component-level container query, not a new global breakpoint |\n| Containers | Page max `--container-xl` (1280px); text at `--measure-body` (66ch); side padding `--gutter` | Editorial or luxury: wider canvas with narrower text |\n| Body text | 16-18px, line-height 1.5-1.65 (`--line-height-normal` to `--line-height-relaxed`) | Long-form articles: 18-21px |\n| Fluid type | `clamp()` with rem + vw; max size no more than 2.5x min so 200% zoom still works | Fixed sizes for UI controls |\n| Section rhythm | Vertical padding `clamp(var(--space-12), 2rem + 5vw, var(--space-24))` (48px at 320 to 96px at 1280) | Dense product pages: `--space-8` to `--space-16` |\n| Hero | Headline of 6-12 words naming the outcome, one supporting sentence, one primary CTA, real product or proof visual | Brand campaigns: image-led hero with a short line |\n| CTAs | One primary goal per page; verb + outcome labels (\"Start free trial\"); 44-48px tall | Content pages: soft secondary CTA (newsletter) only |\n| Core Web Vitals (p75, field) | LCP 2.5 s or less, INP 200 ms or less, CLS 0.1 or less; design for LCP 2.0 s to keep margin | Never relax |\n| Budgets (starting points) | JS 150 KB compressed on marketing pages; LCP image 200 KB or less; 2 font families, 4 font files or fewer | App-like pages: JS up to about 300 KB, split by route |\n| Images | AVIF with WebP fallback in `picture`, `srcset` + `sizes`, explicit `width`\u002F`height`, lazy below the fold, `fetchpriority=\"high\"` on the LCP image | Logos and icons: SVG |\n| SEO | Unique `title` (about 50-60 characters), meta description (about 120-160), one `h1`, JSON-LD for Organization and page type, canonical, XML sitemap | Noindex utility and thin pages |\n| Accessibility | WCAG 2.2 AA; axe plus keyboard plus one screen reader before launch | Public sector and EU services: add an accessibility statement |\n| Stack | Astro for marketing and content sites; Next.js for app-like sites; WordPress, Webflow or Framer when the client edits without developers | See [stack selection](references\u002Fstack-selection.md) |\n| Consent | No non-essential cookies or tags before consent in the EU and UK; \"Reject all\" as prominent as \"Accept all\" | Cookieless, consent-exempt analytics where the jurisdiction allows |\n| Social cards | Open Graph and Twitter card per page, image 1200x630 | |\n\n## Workflow\n\nPaths in commands are relative to this skill's directory; resolve them to absolute paths before running.\n\n1. **Brief and discovery.** Goal and KPI per site and per page, audiences and their top tasks, traffic sources, competitors, existing analytics and Search Console data. For a redesign, audit content, SEO, Core Web Vitals field data and accessibility first.\n2. **Direction.** If the look is not set, run the `design-director` skill. Query the atlas: `python3 ..\u002F..\u002Flibrary\u002Fscripts\u002Fatlas.py query \"\u003Cindustry, market, audience, tier> marketing website\"` and read the `channel.marketing-website` entry.\n3. **Structure.** Sitemap, page types and content model with `ux-design` [information architecture](..\u002Fux-design\u002Freferences\u002Finformation-architecture.md); messaging hierarchy per page.\n4. **Page architecture.** Wireframe each page type section by section with real copy using [page architecture](references\u002Fpage-architecture.md) and [conversion](references\u002Fconversion.md).\n5. **Visual design.** Apply the direction's tokens; design at 375px and 1440px, then specify behavior at every breakpoint with [responsive and fluid](references\u002Fresponsive-and-fluid.md). Components and states come from `ui-design`.\n6. **Choose the stack and CMS** with [stack selection](references\u002Fstack-selection.md), including hosting, consent and analytics.\n7. **Build** semantic HTML on the kit tokens (`..\u002F..\u002Flibrary\u002Ftokens\u002Fdist\u002Ftokens.css`), the image pipeline, fluid type, and performance budgets per [performance](references\u002Fperformance.md); SEO per [SEO](references\u002Fseo.md). For a cinematic landing page, hero or single-file showpiece, follow the [cinematic landing workflow](references\u002Fcinematic-landing.md) (decide, calibrate, media, [spec](references\u002Flanding-spec-template.md), build from the [technique recipes](..\u002F..\u002Flibrary\u002Fknowledge\u002Fweb-techniques\u002FINDEX.md), look and fix, deliver); for a prompt to Lovable, Bolt, v0 or another builder, use [builder prompts](references\u002Fbuilder-prompts.md).\n8. **Render and inspect.** Screenshot every page type at 375, 768, 1280 and 1440px in light and dark; review with the `design-critique` skill (add `--early 350` to `render_review.mjs` to catch a white first paint and broken media); run Lighthouse on mobile and axe on every template; fix before showing anyone.\n9. **Launch** with the [launch checklist](references\u002Flaunch-checklist.md); recheck field Core Web Vitals and Search Console after 28 days.\n\n## Decisions that change the answer\n\n- **Site type.** Single-goal landing page: minimal navigation, one CTA repeated. Corporate multi-page: audience routing from the homepage. Content or editorial: reading comfort, search, related content. Commerce: product detail and checkout patterns from `ui-design` [flows](..\u002Fui-design\u002Freferences\u002Fflows.md). Docs: search, versioning, code samples.\n- **Traffic source.** Paid traffic: message match between ad and page. Organic: depth of content and internal linking. Direct and returning: fast paths to sign-in and top tasks.\n- **Industry and market.** Atlas entries set trust signals, regulation and conventions; for a regulated industry, read its entry before laying out the first view (for a prescription drug site, [pharma-biotech](..\u002F..\u002Flibrary\u002Fatlas\u002Findustries\u002Fpharma-biotech.md): fair balance, ISI in the first view, indication and Prescribing Information links). Market changes language and `hreflang`, legal pages (an Impressum in Germany and Austria), consent rules, payment methods and type support for the script.\n- **Audience.** `audience.low-bandwidth-entry-devices`: halve the budgets and test on a low-end Android device. `audience.older-adults`: 18px+ body, high contrast, no hover-only content. `audience.b2b-buying-committee`: pages for each role, pricing transparency, security and procurement content.\n- **Price tier.** Luxury: slower pacing, larger imagery, fewer words, but the same LCP budget. Value: price and proof up front, dense comparison.\n- **Who edits after launch.** Developers only: Astro or Next.js with Markdown or a headless CMS. Marketers daily: a visual CMS or a no-code builder with locked design tokens.\n\n## Common failures\n\n- The generic AI site: centered headline over a purple gradient blob, three icon cards, a logo strip and \"Unlock your potential\". Fix: a specific value proposition, real product proof, the direction's layout logic and copy with numbers.\n- A perfect Lighthouse score with poor field INP from tag managers and chat widgets. Fix: judge by CrUX or RUM at p75; facade or defer third parties.\n- Lazy-loading the hero image. Fix: eager load, `fetchpriority=\"high\"`, preload if discovered late.\n- Autoplaying hero video with no pause control. Fix: poster image, muted, a visible pause button (WCAG 2.2.2), no autoplay under reduced motion.\n- Cookie banners that hide \"Reject\", cover the CTA or trap focus. Fix: equal-weight buttons, bottom placement that does not obscure focus.\n- Eight \"Learn more\" buttons. Fix: one primary CTA per section with a specific label; descriptive links.\n- Staging `noindex` shipped to production, or no redirect map after a migration. Fix: the launch checklist.\n- Pure `vw` font sizes that do not scale with zoom. Fix: `clamp()` with a rem component.\n- Fake countdown timers and \"Only 2 left\" when untrue. Fix: the dark-pattern rules in [conversion](references\u002Fconversion.md).\n\n## References\n\n- [Page architecture](references\u002Fpage-architecture.md): landing page anatomy, section patterns, homepage, product, pricing, about, blog, CTA design.\n- [Conversion](references\u002Fconversion.md): value proposition, social proof, friction, ethical persuasion, dark-pattern rules (FTC, EU DSA, UCPD, UK DMCC).\n- [Responsive and fluid](references\u002Fresponsive-and-fluid.md): breakpoints, fluid type and space, container queries, responsive images, AVIF\u002FWebP, art direction, aspect ratio.\n- [Performance](references\u002Fperformance.md): Core Web Vitals thresholds, budgets, image, font and third-party strategy, lab versus field data.\n- [SEO](references\u002Fseo.md): semantic HTML, titles, meta descriptions, headings, JSON-LD, sitemaps, canonicals, hreflang, Open Graph.\n- [Stack selection](references\u002Fstack-selection.md): Astro, Next.js, WordPress, Webflow, Framer, headless CMS criteria, hosting, consent and privacy.\n- [Launch checklist](references\u002Flaunch-checklist.md): browsers, accessibility, performance, SEO, analytics, legal pages, redirects, 404, favicons, OG images, security headers.\n- [Cinematic landing](references\u002Fcinematic-landing.md): the seven-step workflow for media-led landing pages and heroes, with a look-and-fix loop.\n- [Landing spec template](references\u002Flanding-spec-template.md): the build spec wired to tokens and the atlas; also the body of a builder prompt.\n- [Cinematic craft](references\u002Fcinematic-craft.md): taste rules for media-led pages and a table of where they differ from kit defaults.\n- [Builder prompts](references\u002Fbuilder-prompts.md): adapting the spec for Lovable, Bolt, v0, Cursor, Manus, Google AI Studio and Kimi.\n- [Reference-first](..\u002Fdesign-director\u002Freferences\u002Freference-first.md) and [component libraries](..\u002Fui-design\u002Freferences\u002Fcomponent-libraries.md): evidence before layout, named React libraries instead of hand-built components, one showpiece per page.\n- [Web technique recipes](..\u002F..\u002Flibrary\u002Fknowledge\u002Fweb-techniques\u002FINDEX.md): 58 working recipes (video heroes, glass, type motion, scroll, 3D) with pinned libraries and licenses.\n- Atlas: `python3 ..\u002F..\u002Flibrary\u002Fscripts\u002Fatlas.py query \"boutique hotel website in Japan, luxury\"`; `show channel.marketing-website` for channel specs.\n- Working code: [Astro motion example](..\u002F..\u002Flibrary\u002Fexamples\u002Fastro-motion\u002FREADME.md) (Astro, Vue, Tailwind 4, GSAP, Headless UI) and the [Astro build skill](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-astro\u002FSKILL.md).\n- Deep process for client projects, by lifecycle stage ([website workflow](..\u002F..\u002Flibrary\u002FWEBSITE-WORKFLOW.md)):\n  - **Discover and plan:** [discovery](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-discovery\u002FSKILL.md), [audit](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-audit\u002FSKILL.md), [migration](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-migration\u002FSKILL.md), [content strategy](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-content-strategy\u002FSKILL.md).\n  - **Structure:** [information architecture](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-information-architecture\u002FSKILL.md), [page architecture](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-page-architecture\u002FSKILL.md), [page templates](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-page-templates\u002FSKILL.md), [site search](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-search\u002FSKILL.md).\n  - **Design:** [art direction](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-art-direction\u002FSKILL.md), [responsive](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-responsive\u002FSKILL.md), [media](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-media\u002FSKILL.md), [system assembly](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-system-assembly\u002FSKILL.md), [conversion](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-conversion\u002FSKILL.md), [forms](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-forms\u002FSKILL.md), [copy fit](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-copy-fit\u002FSKILL.md), [storytelling](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-storytelling\u002FSKILL.md), [visual review](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-visual-review\u002FSKILL.md).\n  - **Build:** [frontend](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-frontend\u002FSKILL.md), [Astro](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-astro\u002FSKILL.md), [motion library](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-motion-library\u002FSKILL.md), [CMS](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-cms\u002FSKILL.md), [platform adapters](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-platform-adapters\u002FSKILL.md), [integrations](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-integrations\u002FSKILL.md), [privacy and consent](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-privacy\u002FSKILL.md).\n  - **Verify:** [fidelity](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-fidelity\u002FSKILL.md), [accessibility](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-accessibility\u002FSKILL.md), [performance](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-performance\u002FSKILL.md), [SEO](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-seo\u002FSKILL.md), [browser QA](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-browser-qa\u002FSKILL.md), [analytics](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-analytics\u002FSKILL.md).\n  - **Launch and run:** [release](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-release\u002FSKILL.md), [maintenance](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-maintenance\u002FSKILL.md).\n  - **Site types, when relevant:** [commerce](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-commerce\u002FSKILL.md), [accounts](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-accounts\u002FSKILL.md), [localization](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-localization\u002FSKILL.md), [directories and marketplaces](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-directory\u002FSKILL.md), [editorial](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-editorial\u002FSKILL.md), [booking](..\u002F..\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-booking\u002FSKILL.md).\n- Related skills: `design-director` (direction), `ux-design` (research, IA, content), `ui-design` (components, forms, flows), `typography`, `color`, `layout`, `imagery`, `motion`, `design-critique`.\n\nCatalog IDs covered: web-discovery, web-audit, web-migration, web-content-strategy, web-information-architecture, web-page-architecture, web-page-templates, web-search, web-art-direction, web-responsive, web-media, web-system-assembly, web-conversion, web-forms, web-copy-fit, web-storytelling, web-visual-review, web-frontend, web-astro, web-motion-library, web-cms, web-platform-adapters, web-integrations, web-privacy, web-fidelity, web-accessibility, web-performance, web-seo, web-browser-qa, web-analytics, web-release, web-maintenance, web-commerce, web-accounts, web-localization, web-directory, web-editorial, web-booking\n",{"name":5,"license":14,"metadata":23,"description":7},{"agent-attribution":24,"version-timestamp":25},"computer=vm; tool=Claude Code; version=2.1.321; timestamp=2026-11-10 03:00:00 UTC","2026-11-10 03:00:00 UTC","main","753c596e097d0288f4f74e22d6b8457014eac8b2","plugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design",0,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup","2026-11-10 11:31:50",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add newmindsgroup\u002Fvisual-design-kit --skill web-design",{"tool":39,"command":40},"bunx","bunx skills add newmindsgroup\u002Fvisual-design-kit --skill web-design",{"tool":42,"command":43},"pnpm","pnpm dlx skills add newmindsgroup\u002Fvisual-design-kit --skill web-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002FSKILL.md",true,[47,53,57,61,65,69,73,77,81,85,89],{"path":48,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":51,"sourceHtmlUrl":52},"references\u002Fbuilder-prompts.md","REFERENCE","参考文档",5827,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Fbuilder-prompts.md",{"path":54,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":55,"sourceHtmlUrl":56},"references\u002Fcinematic-craft.md",13113,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Fcinematic-craft.md",{"path":58,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":59,"sourceHtmlUrl":60},"references\u002Fcinematic-landing.md",9587,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Fcinematic-landing.md",{"path":62,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":63,"sourceHtmlUrl":64},"references\u002Fconversion.md",10145,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Fconversion.md",{"path":66,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":67,"sourceHtmlUrl":68},"references\u002Flanding-spec-template.md",9616,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Flanding-spec-template.md",{"path":70,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":71,"sourceHtmlUrl":72},"references\u002Flaunch-checklist.md",9878,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Flaunch-checklist.md",{"path":74,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002Fpage-architecture.md",7862,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Fpage-architecture.md",{"path":78,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":79,"sourceHtmlUrl":80},"references\u002Fperformance.md",8981,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Fperformance.md",{"path":82,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Fresponsive-and-fluid.md",9417,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Fresponsive-and-fluid.md",{"path":86,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Fseo.md",9395,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Fseo.md",{"path":90,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":91,"sourceHtmlUrl":92},"references\u002Fstack-selection.md",10831,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002Freferences\u002Fstack-selection.md",[94,101,108,115,122,129],{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":18},"01M7CSQX00CVQAWP2QDHKVXFMS","ux-design","Load before designing or reviewing any flow, form, onboarding, navigation or content for real users, especially low-literacy, older, neurodivergent, child or other specific audiences. Covers research and usability tests, heuristic reviews, personas and jobs to be done, journeys and service blueprints, information architecture, UX laws, SUS, SEQ and HEART metrics, plain language and reading level, and microcopy and error messages.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fux-design\u002FSKILL.md",[],[],{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":18},"01M7CSQQE0HX6Q8YR2EA1TR6P4","ui-design","Load before designing or specifying any interface screen or component, even a quick one: forms, tables, navigation, dashboards, onboarding, auth and passkeys, pricing, checkout, search and filters, settings, empty, loading and error states, notifications, consent and age-appropriate flows, and AI chat and agent interfaces, all to WCAG 2.2 AA. Also picks React UI libraries (toasts, drawers, command menus). Gives component specs, state matrices, sizes, density and keyboard and accessibility behavior.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fui-design\u002FSKILL.md",[],[],{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":18},"01M7CSQFM0F9QKZ17S54PYN8M7","typography","Choose, pair, size and set type for brand, web, app, print, slides, signage and motion: modular scales, fluid clamp() type, measure, leading, tracking, OpenType features, font licensing and web font loading, and multiscript setting for CJK, Arabic, Hebrew, Devanagari and Thai. Use when selecting or pairing fonts, building a type scale or type tokens, fixing weak hierarchy or bad line breaks, setting long-form text or numbers, loading web fonts, or localizing type for another market.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Ftypography\u002FSKILL.md",[],[],{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":18},"01M7CSQ95PB7K9JBEFYZVA7226","reference-reconstruction","Reconstructs the observed interface and behavior of a supplied app, site or screenshot set using a screen index, measurements, state and command maps, reusable components and matched-condition comparisons. Use when asked to reverse engineer, clone, reproduce or match a reference product, then adapt it if requested.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Freference-reconstruction\u002FSKILL.md",[],[],{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":128,"publishedAt":18},"01M7CSQ1XRH2MBXH21MSZ7PXWJ","print-packaging-social","Load before any print, packaging, label, barcode, social, out-of-home, slide-deck or email design question, even a quick one, and before making finished collateral files. Specs: bleed, safe zones, 300ppi, CMYK, PDF\u002FX preflight, dielines, barcodes, social formats with 9:16 safe areas, billboard letter heights, 16:9 decks, bulletproof email. Renders token-driven brand books, sell sheets, cards, carousels and decks to PDF and PNG with a Canva editable twin.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fprint-packaging-social\u002FSKILL.md",[],[],{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":135,"publishedAt":18},"01M7CSPWKE5ABY3Q942NQ2P029","native-app-design","Design macOS, iOS, iPadOS and Android interfaces: native windows and surfaces, navigation, keyboard and pointer, accessibility, appearance modes, platform tokens, app icons and SwiftUI\u002FCompose handoff. Use for native app screens, flows, store assets, Mac utilities or cross-platform choices. Mac implementation uses the optional BAMA workflow; preserve existing project OS targets and approved brand tokens.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fnative-app-design\u002FSKILL.md",[],[]]