Skip to content

docs: add Frontend Kit section to CLAUDE.md #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
vayungodara wants to merge 1 commit into
base: main
Choose a base branch
from
+27 −0
Draft

docs: add Frontend Kit section to CLAUDE.md #91

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ npm run test:e2e # Playwright e2e tests (auto-starts dev server)
| Auth | Google OAuth via @supabase/ssr |
| Styling | CSS Modules (vanilla CSS) |
| Animations | Framer Motion 12.x |
| Icons | @phosphor-icons/react |
| Email | Resend |
| Celebrations | canvas-confetti |
| Monitoring | Vercel Analytics + Speed Insights |
Expand Down Expand Up @@ -298,6 +299,32 @@ Full design brief lives in [`.impeccable.md`](./.impeccable.md) — users, brand

For design work use impeccable skills (`/critique`, `/polish`, `/arrange`, `/animate`, `/audit`, etc.) — they read `.impeccable.md` automatically. Update via `/impeccable teach` when brand direction shifts.

## Frontend Kit

Project-scoped sources for restyling lockin UI. Do **not** copy this into global `~/.claude/CLAUDE.md` or `~/.codex/AGENTS.md` (that taxes other repos).

**Gate:** no restyle PRs until Vayun names a specific screen. Then: inspect the source → pick what fits → copy the actual component code and customize it. Port into the existing stack. Do not add a component-library package.

**Stack stays:** CSS Modules + Framer Motion (`@/lib/animations`) + Phosphor icons + Inter / Instrument Sans. No shadcn, no Tailwind, no Radix unless Vayun explicitly chooses a primitives change.

**Motion:** purpose first (Emil Kowalski). Dashboard = calm (entrance fade, stagger, hover). Landing/celebrations = theatrical. High-frequency chrome and keyboard actions: no animation. UI motion generally under 300ms. Respect `prefers-reduced-motion`.

**Sources** (copy-own the code; do not wrap as a dependency):

| Source | Use when |
| --- | --- |
| https://beautifului.dev | AI-native primitives (streaming, approvals, prompt bar). Rarely needed here. |
| https://beui.dev | Motion-rich React/Next controls; shadcn-compatible registry at `/r/{slug}`. Port into CSS modules. |
| https://rareui.com | One-off standout animated pieces. Use sparingly. |
| https://transitions.dev | Transition recipes to port into `@/lib/animations`, not whole components. |
| https://ui.shadcn.com | Primitive patterns. Port; do not install the registry unless asked. |
| https://ui-skills.com | Craft/audit skills and playbook. Plans, not widgets. |
| https://coss.com/ui | Base UI primitives. Same rule as shadcn. |
| https://designsystemchecklist.com | Design-system planning checklist. |
| https://reui.io/components | Composed product UI (grids, filters, calendars). Port ideas, not the package. |
| https://emilkowal.ski/ui/you-dont-need-animations | When *not* to animate. |
| https://swagui.rohoswagger.com | Fixed-identity registry (radius/type/shadows/motion stay put; accent-only theming). Compact register for app interiors, generous for marketing. Port tokens/components into CSS modules. |

## Current Status

**Live on Vercel** — github.com/vayungodara/lockin
Expand Down
Loading