flornkm/personal-site

central-icons

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.

원문 언어: 영어

clean-jsx-no-inline-ternaries

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…

원문 언어: 영어

design-system

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…

원문 언어: 영어

no-fluff-comments

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.

원문 언어: 영어

no-previews

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…

원문 언어: 영어

prefer-container-queries

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…

원문 언어: 영어

react-useeffect

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.

원문 언어: 영어

reliable-maintainable-code

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.

원문 언어: 영어

shadow-ring

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 /…

원문 언어: 영어

writing-icons-creator

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…

원문 언어: 영어