# Web Pages

> Build or modify Bionic's server-rendered Dioxus pages and UI components. Use for page layouts, forms, cards, navigation, modals, and authenticated frontend behavior under crates/web-pages.

- Skill: `bionic-gpt/web-pages` (Agent Skill)
- Install (CLI): `npx skillmds@latest add bionic-gpt/web-pages`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bionic-gpt/web-pages/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: bionic-gpt (https://skillmd.com/u/bionic-gpt)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bionic-gpt/web-pages

---


# Web Pages

Use this skill for server-side UI under `crates/web-pages`.

## Structure

- Each route has a folder under `crates/web-pages`.
- The route's main view is normally `page.rs`; supporting components live beside it or under `components/`.
- Typed paths are defined in `crates/web-pages/routes.rs`.
- Corresponding Axum handlers live under `crates/web-server/handlers`.
- Shared widgets belong under `crates/web-pages/components/`.

Use Dioxus `rsx!` and follow existing component patterns. Use Tailwind and
Daisy UI classes, preferably the provided `daisy_rsx` components. Use Daisy UI
colors and existing design tokens rather than introducing a parallel styling
system.

Buttons that open dialogs or popovers should use the existing
`popover_target`/`trigger_id` pattern. Keep semantic HTML, accessible labels,
responsive layouts, and the existing navigation/footer intact.

Client behavior is bundled from `crates/web-assets/index.ts`. When adding or
changing a DOM hook, verify the corresponding TypeScript module and rendered
markup together.