docs(agent): streamline guidance and skills

Keep always-on instructions concise and route specialized work through focused skills. Split large skills into progressive references and add dedicated change, desktop, sync, and performance guidance.
2026-07-14 00:45:44 +03:00
parent b36afbf5ee
commit 68f1c1efe3
20 changed files with 1257 additions and 1371 deletions
@@ -0,0 +1,59 @@
+# Icon System
+
+## Contract
+
+Use `Icon` from `@/components/icon/Icon` and `IconName` from `@/components/icon/icons`. Do not import icon components directly from `@remixicon/react`.
+
+```tsx
+import { Icon } from '@/components/icon/Icon';
+import type { IconName } from '@/components/icon/icons';
+
+<Icon name="arrow-down-s" className="size-4" />
+```
+
+`Icon` has no `size` prop. Size it with classes.
+
+## Naming
+
+Convert Remixicon names to sprite names:
+
+1. Remove `Ri`.
+2. Remove the `Line` suffix.
+3. Convert PascalCase to lowercase kebab-case.
+4. Preserve filled variants with explicit `-fill`.
+
+| Remixicon | Sprite name |
+|---|---|
+| `RiArrowDownSLine` | `arrow-down-s` |
+| `RiCheckLine` | `check` |
+| `RiLoader4Line` | `loader-4` |
+| `RiGithubFill` | `github-fill` |
+
+## Config Values
+
+Store icon names, not component references:
+
+```tsx
+const items: Array<{ icon: IconName }> = [{ icon: 'stack' }];
+
+return <Icon name={items[0].icon} className="size-4" />;
+```
+
+Use literal inference (`as const`) only when the surrounding type does not already provide `IconName`.
+
+## Adding An Icon
+
+1. Use the correct kebab-case name in source.
+2. Type non-JSX values as `IconName`.
+3. Run `bun run icons:generate`.
+4. Inspect generated changes and run relevant type-check/build validation.
+
+Never edit `packages/ui/src/components/icon/sprite.ts` manually. The generator scans source usages, maps names to Remixicon, and regenerates the sprite.
+
+## Key Files
+
+- Component: `packages/ui/src/components/icon/Icon.tsx`
+- Types: `packages/ui/src/components/icon/icons.ts`
+- Generated sprite: `packages/ui/src/components/icon/sprite.ts`
+- Generator: `scripts/generate-icon-sprite.mjs`
+- Documentation: `packages/ui/src/components/icon/README.md`