usability enhancements

openspec/changes/p13-usability-enhancements/proposal.md

@@ -0,0 +1,36 @@
+## Why
+
+Several small UX and content-discovery issues are adding friction across navigation, sharing, readability, and trust signals. Addressing them together delivers a noticeable quality jump with low implementation risk.
+
+## What Changes
+
+- Set a stable homepage title (for example, `ClawFort AI News`) instead of changing it to the latest article headline.
+- Add a footer `Back to Top` action for quick navigation.
+- Add per-article permalinks and support deep-link behavior that opens the correct article modal on page load.
+- Add minimal icon-only share actions for permalink sharing (`X`, `WhatsApp`, `LinkedIn`) in modal/footer share area.
+- Improve readability with small typography/color updates, with extra attention to Tamil and Malayalam legibility.
+- Add custom 404/500 pages that prominently show the error code and include safe, playful AI-generated “Oh no!” style messages.
+- Add footer links driven by environment configuration for GitHub repo and contact email; include enhanced hover/near-cursor feedback messages from a randomized safe message pool.
+- Add an AI-themed favicon asset and wire it into the site.
+
+## Capabilities
+
+### New Capabilities
+- `article-permalinks-and-deep-link-modal`: Defines canonical per-article permalink structure and modal auto-open behavior from URL state.
+- `share-and-contact-microinteractions`: Defines social share actions, configurable GitHub/email links, and randomized safe feedback microcopy for contact affordance.
+- `error-pages-with-playful-ai-messaging`: Defines 404/500 UX with prominent status codes and policy-safe AI-style messaging.
+- `site-branding-favicon`: Defines favicon asset requirements and integration.
+
+### Modified Capabilities
+- `seo-meta-and-social-tags`: Update homepage title behavior to remain stable and brand-oriented while preserving metadata quality.
+- `summary-modal-experience`: Extend modal contract to support permalink-driven open state and share entry points.
+- `responsive-device-agnostic-layout`: Apply small typography/color refinements for readability across devices.
+- `language-aware-content-delivery`: Improve Tamil/Malayalam presentation quality in the existing delivery surfaces.
+- `footer-policy-links`: Extend footer navigation with back-to-top, GitHub, and contact affordances.
+
+## Impact
+
+- **Frontend UI:** `frontend/index.html` (title policy, footer controls, permalink/deep-link modal behavior, share icons, readability tweaks, favicon link).
+- **Backend/Config:** environment variables for GitHub URL and contact email exposure; possible API/config exposure if frontend config bootstrapping is needed.
+- **Routing/Pages:** new error page templates/handlers for 404 and 500 responses.
+- **Content/UX:** curated safe message pool for contact tooltip/hover microcopy and error-page “Oh no!” messaging.