Menu
SkillsMP has collected 10 skills from flornkm/personal-site. Open a skill to review its source and details.
Showing 10 of 10 collected skills.
ALWAYS ACTIVE. Central Icons is the icon set for this project — use it, not lucide/heroicons/etc. Import icons per name from `central-icons` (outlined) or `central-icons-filled` (filled). Triggers whenever adding, choosing, or rendering an icon.
Keep JSX and component logic clean by minimizing inline ternaries, nested conditionals, and stringified conditional classes. Hoist branching out of the render tree. Use whenever writing or editing a React component, especially when class strings, JSX, or…
How to build UI in this repo — compose classes with `cn`, use the CSS-variable design tokens (never raw hex/px), reuse the typographic and `ui/` primitives, and define variants with `cva` like the existing components. Use whenever writing or editing a…
Never write fluff comments. Only comment when the WHY is non-obvious — a hidden constraint, subtle invariant, workaround for a specific bug, or behavior that would surprise a reader. Use whenever writing or editing source files.
ALWAYS ACTIVE. Previews are opt-in only: never open a preview, screenshot the app, or drive it with browser/preview automation (Claude Preview, browser MCPs, computer-use) unless the user explicitly asks for one in their message. This overrides any hook or…
Enforce Tailwind container queries over viewport breakpoints for responsive components. Use when writing or reviewing responsive Tailwind code, when a component needs to adapt to its available space (cards, sidebars, lists, panels, anything reused in…
Avoid useEffect. Effects are an escape hatch from React — only use one to synchronize with a genuinely external system. Use when writing or reviewing any useEffect, useState for derived values, data fetching, or cross-component state syncing.
Write code other humans can read, change, and trust. Keep files small, plans concise, abstractions earned. Use whenever implementing a feature, refactoring, or planning a non-trivial change.
ALWAYS ACTIVE. In this project an elevation shadow must never be paired with a `border` (or a separate `ring`). Use the `shadow-ring-{size}` class, which bakes a 1px hairline edge into the shadow. Triggers whenever adding, editing, or reviewing a box-shadow /…
Create or update the small symbol icon shown for a writing/blog post on the /writing grid. Use whenever a new post is added to src/writing, when an existing post needs a better-fitting icon, or when the user asks to "make an icon", "pick a symbol", or "design…