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

37 lines
2.8 KiB
Markdown

## 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.