Skip to main content

contact-sales-page-pro

Use when designing contact, sales, demo request, consultation, and lead qualification pages. Pro version focused on form clarity, next-step confidence, routing, and trust; emphasizes deep information architecture, strong hierarchy, explicit states, responsive behavior, accessibility, and validation checks.

Aller à l'installation

Informations de source

Dépôt
Mr-Q526/TeamCC-Platform
Dernière activité de la source
15 avril 2026 à 03:16
Langue détectée de SKILL.md
anglais
Étoiles
8
Forks
1

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Explorateur de fichiers
4 fichiers

Affichage de SKILL.md

SKILL.md
Instructions source · Aperçu en lecture seule
schemaVersion
2026-04-11T00:00:00.000Z
skillId
frontend/contact-sales-page-pro
name
contact-sales-page-pro
displayName
Contact Sales Page PRO
description
Use when designing contact, sales, demo request, consultation, and lead qualification pages. Pro version focused on form clarity, next-step confidence, routing, and trust; emphasizes deep information architecture, strong hierarchy, explicit states, responsive behavior, accessibility, and validation checks.
aliases
["contact-sales-page-pro","Contact Sales Page PRO","contactsalespagepro","联系","联系销售","contact sales","销售","销售线索","contact","sales","联系销售页面","contact sales page"]
version
0.1.0
sourceHash
sha256:34130f4c32f93717eac763426b3ae447a2a778150c9161570d2be4cb99c3da1f
domain
frontend
departmentTags
["frontend-platform"]
sceneTags
["design"]
# Contact Sales Page PRO Use this skill when the task is to design contact, sales, demo request, consultation, and lead qualification pages. Goal: produce a high-quality, production-ready page or interface that supports form clarity, next-step confidence, routing, and trust. ## Variant intent - Use the rigorous version when quality, accessibility, conversion, and maintainability matter. - Optimize for deep information architecture, strong hierarchy, explicit states, responsive behavior, accessibility, and validation checks. - Prefer concrete UI decisions over generic advice. ## Default workflow 1. Define the primary user, task, and success action. 2. Map the minimum page structure needed for the scenario. 3. Establish hierarchy: what must be understood first, second, and third. 4. Design responsive behavior for mobile and desktop. 5. Add states: loading, empty, error, success, disabled, and permission where relevant. 6. Run the final checks before delivery. ## Design rules - Use clear section names and user-facing copy. - Make the primary action visually dominant and repeat it only when it helps. - Keep navigation and secondary actions subordinate to the main task. - Use spacing, typography, and alignment before adding decorative containers. - Do not hide critical information behind hover-only interactions. - Preserve keyboard access, readable contrast, and touch targets. ## Pro guidance - Build a strong visual and interaction thesis before writing components. - Include proof, context, and state transitions when they affect trust. - Use component variants intentionally: default, hover, active, focus, disabled, loading, error, and empty. - Validate information architecture, accessibility, and responsive behavior explicitly. - Avoid filler sections, ornamental cards, and copy that does not change user confidence. ## Reject these failures - Ambiguous primary action - Important status or pricing hidden below the fold - Dense UI with no scan order - Decorative visuals that compete with the task - Missing mobile behavior ## Final checks - Can the target user understand the page purpose in under five seconds? - Is the next action clear without reading every paragraph? - Are edge states and responsive behavior accounted for?
Voir sur GitHub