coastai-skills

Design and implement a systematic framework for threaded conversations, managing nesting depths, action hierarchies, and community signaling to foster engagement and readability.

Audit and optimize the alignment between a user's stage in the buyer's journey (Awareness, Consideration, Decision) and the page's content, layout, and CTAs. Trigger this skill when high-traffic pages have high bounce rates or when conversion rates are low despite high-quality traffic.

Implement and debug robust sticky elements like headers, sidebars, and table headers while managing stacking contexts, overflow traps, and stuck-state detection.

Design and implement a systematic framework for structured "Key: Value"

Audit and optimize Secondary Calls-to-Action (SCTAs) to capture "Not Ready Yet" visitors, reducing bounce rates and building a long-term lead pipeline without cannibalizing primary conversions.

Implement and debug real-time input masking for structured data (phone, credit card, dates) while ensuring cursor stability and accessibility.

Design a systematic framework for site-level error states and system statuses (404, 500, Maintenance, Offline) to maintain user trust and provide clear recovery paths.

Implement and debug accessible star rating widgets using radio-group patterns, ensuring clear visual feedback, keyboard operability, and screen reader compatibility.

Design a systematic framework for date and time selection, managing calendar grids, range pickers, and scheduling interfaces to ensure precision and accessibility.

Design and implement a systematic framework for charts and graphs, managing visual hierarchy, accessible color theory, and responsive behavior to transform complex data into actionable insights.

Audit and optimize on-site micro-surveys (intent polls, exit surveys, and feedback widgets) to maximize response rates and capture high-quality qualitative data that drives conversion experiments.

Design and implement a systematic color palette that ensures WCAG 2.2 accessibility compliance. Trigger this skill when asked to define brand colors, create UI themes, or establish a visual system for a website.

Design and implement a systematic framework for progressive disclosure using accordions, ensuring structural integrity, visual affordances, and accessibility across different content densities and devices.

Design and implement a systematic framework for long-form content, managing readability, vertical rhythm, and information density to ensure a superior reading experience.

Design and implement a systematic framework for informational elements that communicate state (Badges) and categorization (Tags) with clarity and accessibility.

Design and implement a systematic framework for non-overlay notifications, managing global announcements and contextual inline alerts to communicate system states without interrupting the user's flow.

Design and implement a systematic framework for secondary navigation trails that provide orientation, context, and one-click access to parent levels in deep information architectures.

Design and implement a systematic framework for buttons and interactive triggers, managing visual hierarchy, variant logic, and action grouping to ensure clear intent and accessible interaction.

Design and implement a systematic framework for modular content containers that maintain hierarchy, structural integrity, and action alignment across variable content and responsive viewports.

Design and implement a systematic framework for horizontal discovery components, managing navigation affordances, scroll behavior, and accessibility to ensure effective content density without compromising usability.

Design and implement a systematic framework for side-by-side comparison interfaces, managing high attribute density and responsive complexity to support informed decision-making.

Design and implement a systematic framework for user privacy, managing consent banners, preference centers, and persistent privacy controls to balance legal compliance with user trust.

Design and implement a systematic framework for data tables that ensures readability, scannability, and structural integrity across complex datasets.

Design and implement a systematic framework for the Z-axis, using shadows, layering, and stacking contexts to communicate hierarchy and depth.

Design and implement purposeful "empty states" (zero-data screens) that guide users, reduce frustration, and provide clear paths to action when content is missing or yet to be created.

Design a systematic framework for uploading and managing files, defining the visual and spatial organization of drop zones, upload queues, and file management actions to ensure a high-trust and efficient user experience.

Design and implement a systematic framework for content discovery interfaces, defining the visual and spatial organization of filters, facets, and sorting controls to maximize findability and reduce cognitive load.

Design and implement a fluid spacing scale using CSS clamp() to ensure consistent white space and vertical rhythm across all devices. Trigger this skill when asked to define spacing systems, margins, paddings, or layout gaps.

Design and implement a typographic scale that scales smoothly across viewports using CSS clamp(). Trigger this skill when asked to create responsive typography, design systems, or fluid layouts.

Design and document a systematic framework for form interfaces, defining anatomy, spatial organization, and visual affordances to ensure consistency, usability, and accessibility.

Design and implement a systematic framework for the visual and spatial anatomy of page introductions, managing layout composition, content hierarchy, and visual layering to ensure immediate clarity and engagement.

Design and implement a systematic iconography framework that ensures visual consistency, semantic clarity, and technical accessibility across a website.

Design and implement a systematic framework for visual assets (photography, illustration, and video) that ensures visual consistency, art direction integrity, and text legibility across all viewports.

Design and document the visual behavior of UI elements during user interaction (hover, focus, active, disabled, etc.) to ensure usability and accessibility.

Design and implement a systematic framework for displaying third-party logos (customers, partners, media) that ensures visual balance, optical normalization, and brand integrity across all viewports.

Design a systematic framework for displaying high-impact quantitative data, ensuring numerical clarity, trend context, and visual hierarchy for KPIs and social proof.

Design a systematic framework for non-persistent UI layers (Modals, Drawers, Popovers, and Toasts) that balances user focus, context, and interruption levels.

Design and implement a systematic framework for page-level headers that provide context, orientation, and primary actions for a specific page or view.

Design and implement a systematic framework for navigating large collections of content, ensuring clear orientation, accessibility, and efficient traversal.

Design and implement a systematic framework for pricing grids and tables, managing tier hierarchy, feature comparison, and billing logic to reduce cognitive load and guide conversion.