> For the complete documentation index, see [llms.txt](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_23/session_02_ui_polish_optional_local_tooling.md). # Session 02: UI Polish And Optional Local Tooling **Session ID**: `phase23-session02-ui-polish-optional-local-tooling` **Status**: Not Started **Estimated Tasks**: \~14-22 **Estimated Duration**: 2-4 hours *** ## Objective Apply the independent v2.3 UI polish items and make explicit decisions about optional local tooling without treating already-copied assets or generated files as feature gaps. *** ## Source Reference Detail ### D UI Polish * Skill-card hover sheen source CSS: [V23/src/styles.css:278](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/src/styles.css:278) through `:310`. * Home skill-tile usage: [V23/src/routes/index.tsx:16262](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/src/routes/index.tsx:16262) through `:16270`. * Skills page usage: [V23/src/routes/skills.tsx:402](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/src/routes/skills.tsx:402) through `:411`. * Sticky sidebar source: [V23/src/components/app-sidebar.tsx:2050](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/src/components/app-sidebar.tsx:2050), where v2.3 uses `sticky top-0 h-screen overflow-y-auto`. * aios target files: `AIOS/src/styles.css`, `AIOS/src/routes/index.tsx`, `AIOS/src/routes/skills.tsx`, and `AIOS/src/components/app-sidebar.tsx`. ### E Optional Local Tooling * Optional VS Code launch config: [V23/.claude/launch.json:1](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/.claude/launch.json:1) through `:11`; absent in aios. If added, adjust to aios's actual dev port. * Optional asset-generation scripts: `V23/scripts/gen-hermes-file-type-art.ts` and `V23/scripts/webp-file-type-art.sh`. * Asset-generation output is already present: `AIOS/src/assets/hermes-art/file-types/*.webp` for all ten file types. *** ## Scope ### In Scope (MVP) * Add the `.skill-card-sheen` keyframes/rules in aios CSS if they fit current Tailwind/CSS conventions. * Update home and skills card markup to use the sheen without layout shift. * Make the sidebar sticky with `top-0`, `h-screen`, and `overflow-y-auto` or the current aios equivalent. * Decide whether `.claude/launch.json` is useful for aios; if added, use aios's dev command and port. * Decide whether optional Hermes file-type art regeneration scripts are worth porting; if not, record deferral because outputs already exist. * Add visual/route smoke checks as appropriate. ### Out of Scope * Reworking the home or skills page layouts beyond the source polish. * Re-generating existing Hermes file-type art. * Importing optional scripts without a current regeneration need. * Hand-editing generated route-tree output. *** ## Prerequisites * [ ] Confirm current CSS naming and home/skills card markup. * [ ] Confirm current dev server port before adding launch config. * [ ] Confirm whether optional asset-generation scripts have a current owner or regeneration need. *** ## Deliverables 1. Skill-card hover sheen applied to home and skills cards, or documented deferral if current markup no longer supports it cleanly. 2. Sticky sidebar class update. 3. Optional launch config and asset-regeneration script decision recorded in implementation notes. 4. Focused UI smoke or regression coverage. *** ## Success Criteria * [ ] Hover sheen renders without text overlap, layout shift, or reduced-motion issues. * [ ] Sidebar remains visible and scrollable on desktop-height layouts. * [ ] Mobile and narrow viewport navigation remain usable. * [ ] Optional tooling is either added with correct aios settings or explicitly deferred with the "outputs already present" rationale. * [ ] Build, relevant tests, and route smoke checks pass. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_23/session_02_ui_polish_optional_local_tooling.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.