diff --git a/.claude/commands/pr.md b/.claude/commands/pr.md new file mode 100644 index 00000000..f15e41da --- /dev/null +++ b/.claude/commands/pr.md @@ -0,0 +1,6 @@ +--- +description: Create or update a pull request (delegates to the `pr` skill) +allowed-tools: Skill +--- + +Invoke the `pr` skill to handle this request. The skill covers both creating a new PR and updating an existing one's description, including frontend screenshot capture when the diff warrants it. diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 00000000..9e4442c7 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,3 @@ +{ + "enabledMcpjsonServers": ["playwright"] +} diff --git a/.claude/skills/frontend-conventions/SKILL.md b/.claude/skills/frontend-conventions/SKILL.md new file mode 100644 index 00000000..2bed3363 --- /dev/null +++ b/.claude/skills/frontend-conventions/SKILL.md @@ -0,0 +1,86 @@ +--- +name: frontend-conventions +description: >- + Frontend conventions for this project — the `Form::Group`/`Form::Input` + components for form fields, the `twlink` class for basic links, the + `number_display` helper for numbers, the `UI::Time::Component` for times, + the UI component library rule (buttons are `UI::Button`/`UI::ButtonLink` + — check `app/components/ui/` and `app/components/form/` before + hand-rolling markup), the shared collapse helpers for showing/hiding + elements, and ViewComponent rules (keyword arguments, instance + variables, `helpers.` prefix in templates). Trigger when adding or modifying views + (`.html.erb`), view components, Stimulus controllers, Tailwind classes, + or any frontend code that touches styling or interactivity. **Also + trigger before any `mcp__playwright__browser_take_screenshot` call** — + this skill defines the required `tmp/` filename rule so screenshots + don't land in the project root. Stimulus.js is the JavaScript framework. +--- + +# Frontend conventions + +This project uses **Stimulus.js** for JavaScript interactivity and **Tailwind CSS** for styling. + +The `bin/dev` command runs `bin/rails tailwindcss:watch` (see `Procfile.dev`) to build and update Tailwind CSS. JS is served directly via importmap (`config/importmap.rb`, `app/javascript/`) — there's no separate JS build step. + +**Format ERB before committing.** After editing any `.html.erb`, run `bin/lint ` — it runs `herb-format`, which reflows long `class` attributes and normalizes ERB. CI does *not* run the herb steps (`.github/workflows/ci.yml` only calls `standardrb`, `rubocop`, and `bin/brakeman`), so unformatted ERB won't fail the build — run `bin/lint` anyway to keep formatting consistent. It needs `yarn install` to have run, since the herb tools come from `devDependencies`. + +## Standard classes and helpers + +- Form fields should be rendered through `Form::Group::Component` (label + input, `app/components/form/group`) or `Form::Input::Component` directly (`app/components/form/input`) — not hand-rolled ``/`