メニュー
Use when implementing approved website content, design rules, assets, routes, conversion goals, schema, and analytics as reusable production pages; do not use to invent the design system or write missing native-language copy.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/peterbamuhigire/website-skills --skill page-builderコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | page-builder |
| description | Use when implementing approved website content, design rules, assets, routes, conversion goals, schema, and analytics as reusable production pages; do not use to invent the design system or write missing native-language copy. |
| metadata | {"portable":true,"compatible_with":["claude-code","codex"]} |
Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com, +256 784 464178.
design-system first.photo-manager or image-compression.| Input | Source | Required | If absent |
|---|---|---|---|
| Approved page content, page-goal matrix, and acceptance criteria | Content/strategy artefacts | yes | Stop the affected page; do not invent commercial claims or copy. |
| Tokens, components, and state rules | design-system | yes |
| Build only a structural prototype clearly marked incomplete. |
| Asset catalogue and image derivatives | photo-manager / image-compression | conditional | Use explicit placeholders in development; do not ship them. |
| Locale route map | i18n | conditional | Build only approved locales and record missing routes. |
| Framework, build, analytics, SEO, and schema contracts | Repository/upstream skills | yes | Stop at an implementation plan if contracts conflict. |
premium-website-product brief: page goal, search intent, proof, CTA, schema, analytics event, and developer-quality evidence must survive implementation..claude/skills or another single install path.blog-writer/references/article-design.md → Author Bio Standard for the full rule, examples, and bilingual requirements.| Artefact | Consumer | Observable acceptance condition |
|---|---|---|
| Production pages and reusable components | Build/deploy pipeline | Build passes; routes render; content, CTA, schema, analytics, states, and responsive behaviour match approved inputs. |
| Page implementation evidence | QA and project owner | Maps each page goal and acceptance criterion to a test or inspected result. |
| Evidence | Format | Acceptance condition |
|---|---|---|
| Build and page QA results | Command output, route matrix, screenshots where available | Failures and unassessed visual checks are explicit. |
Inspect source read-only for review requests. Edit application files and run local builds when implementation is authorised. Never publish, change production data, install unapproved dependencies, or invent claims, testimonials, prices, or credentials.
When build, browser, device, font, or network capability is unavailable, implement the smallest locally verifiable slice and list routes, visuals, analytics, schema, and integrations as not assessed. A source review is not a rendered pass.
| Choice | Action | Failure or risk avoided |
|---|---|---|
| Pattern repeats across pages | Build one accessible reusable component | Drift and duplication |
| Content or claim is unapproved | Stop that section and request the source | Fabricated copy |
| Component has interactive states | Implement and test every applicable state | Dead-end UX |
| Framework contract conflicts with brief | Preserve repository behaviour and escalate | Breaking the build |
Implement a multilingual service template from the approved page-goal matrix, bind locale-safe routes and catalogued imagery, emit the agreed schema and CTA event, then verify build output, keyboard focus, missing-content behaviour, and the mobile layout before marking the route accepted.
references/page-conversion-checklist.md — per-template anatomy, conversion QA gate, instrumentation minimums, pre-launch review. Use when building or reviewing any page.../website-builder/references/narrative-information-architecture-and-empathy.md — translate audience empathy, narrative sequence, proof, choice, and recovery into page implementation.references/authority-content-matrix.md — content architecture by page type, cornerstone pages, pillar + cluster system, editorial ops. Use when planning the content system for Growth / Authority tiers.references/page-goal-matrix.md — convert strategy into page-specific audience, goal, proof, CTA, SEO decisions.../premium-commercial-writing/references/website-page-writing-patterns.md — use when implementation must preserve premium page copy structure for home, service, pricing, about, case-study, contact, or FAQ pages.../premium-commercial-writing/references/professional-writing-quality-gate.md — use before implementation when supplied copy needs final proof, claim, tone, CTA, and scannability checks.references/conversion-sequence-implementation.md — use when the build must preserve value-proposition clarity, CTA ladders, cluster linking, or launch-stage page states.../design-reference/references/trend-selection-and-progressive-enhancement.md — use when approved direction includes kinetic type, modular grids, adaptive UI, spatial/3D, dark mode, voice, live visualisation, or AR.../website-builder/references/premium-website-engine-playbook.md — use when page
production must preserve the premium strategy, acquisition, conversion, measurement,
and handoff artifacts for high-value clients.../premium-website-product/references/premium-website-market-asset-gate.md - use when page production must preserve premium content, SEO, UX, stack, launch, and agency proof requirements.references/legacy-guidance.md — preserved detailed instructions from the previous skill version.../design-system/references/math-for-web-design.md — use when implementing pages with fluid type, bounded spacing, intrinsic grids, aspect-ratio media, full-bleed sections, calculated CTA placement, or JS-driven sizing/motion.launch-campaigns when page states or CTA swaps depend on campaign timing.sales-copywriting when the implementation needs revised value propositions, button labels, or objection handling.premium-commercial-writing when the page copy, SEO/GEO content, document download, blog excerpt, or offer section must meet the premium commercial writing gate before build.