Menu
Refactor frontend components to follow Mantine coding conventions. Use when asked to refactor, modernize, or clean up UI code.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Review code changes from a specific angle or do a general pass. Use when the user wants a code review of their current branch or specific changes. For a thorough review covering all checks, use the @agent-review subagent instead. To review changes against a spec/source of truth (with doc-coverage and duplication checks), use /scoped-review instead.
Scoped code review — determines the change scope (explicit, discussion, or git), picks a source of truth (discussion, new docs, or code), then reviews the changes for correctness, doc agreement, doc coverage, convention adherence, duplicated shapes that want a shared abstraction, hand-rolled complex logic that wants a named/shared function, and unit-test coverage of complex logic.
Create a git commit with a well-crafted message. Use proactively whenever the user asks to commit changes or amend a commit.
Review documentation for accuracy against the current implementation. Use when documentation files are modified, when code changes may have made docs outdated, or when the user asks about documentation accuracy.
Refactor outdated patterns in the codebase based on user input
| name | refactor-frontend |
| description | Refactor frontend components to follow Mantine coding conventions. Use when asked to refactor, modernize, or clean up UI code. |
| argument-hint | <file, directory, or pattern to refactor> |
You MUST read src/client/coding-conventions.md before making any changes.
Every change must conform to the conventions in that file.
You are not patching old code — you are rewriting it from scratch using the conventions. For each file, think about how you would build the component fresh if starting today, then write that. This may involve breaking the layout or structure of the existing code to fit the new patterns. You only need to retain the functionality of the components, not the exact layout. The old code used custom CSS to achieve what Mantine's theme and standard styles can do out of the box. After refactoring, the code should be simple and clean, using Mantine's theming to lay out the elements in a clean fashion. Any design work on the UI will be performed after the refactoring.
Apply all of these:
Box, Group, Stack, Flex with Mantine props.p="md" not p={16}, gap="sm" not gap={12}).c="primary.7" not style={{ color: '...' }}, bg="neutral.1" not
style={{ backgroundColor: '...' }}).div, span) with Mantine components
(Box, Text, Group).visibleFrom, hiddenFrom,
withRowBorders, truncate).style prop is used for hover states,
pseudo-elements, or complex selectors.Prefer:
style prop (one-off CSS)src/client/coding-conventions.md.bun format && bun lint after changes