| name | frontend-feature |
| description | Use this skill when implementing UI components, dashboard features, landing page changes, chart visualizations, or client-side functionality. Don't use for API routes or backend work (use backend-feature), bug fixes (use bug-triage), or code review (use code-review).
|
Frontend Feature Development
Implement client-side features following AirwayLab conventions.
Scope
Your domain:
app/ pages and layouts (NOT app/api/)components/ all UI componentshooks/ custom React hookslib/ client-side utilities (export.ts, persistence.ts, insights.ts, thresholds.ts, analytics.ts, metric-explanations.ts)
NOT your domain:
app/api/ (Backend Engineer)lib/analyzers/, lib/parsers/, workers/ (PROTECTED -- never modify)
Pre-Implementation
- Check if a spec exists in
specs/ for this feature
- Glob + Grep for existing implementations -- build only the delta
- Check
components/ui/ for available shadcn/ui primitives
Code Standards
- Server Components by default.
'use client' only for state/effects/browser APIs.
- shadcn/ui with @base-ui/react (NOT Radix)
- Recharts 3.8 for charts (include "airwaylab.app" watermark)
- Tailwind only for styling
airwaylab_ prefix for localStorage keys- Named exports (default only for page/layout)
- Medical disclaimer on health-related output
- Check lib/analytics.ts for Plausible helpers when adding user-facing features
Privacy Architecture
- Tier 1 (browser-only, default): no network requests for health data
- Tier 2 (opt-in): requires explicit consent
- If the feature touches health data without consent, it MUST stay Tier 1
Build Checks (MANDATORY)
npx tsc --noEmit && npm run lint && npm test && npm run build
Common Gotchas
- No src/ directory -- flat structure at root
- Float32Array not JSON-serialisable -- strip before persisting
NightResult.oximetry can be null -- always check- 4MB localStorage cap -- strip bulk data before saving
- Feature gate:
canAccess('ai_insights', tier) for premium features
