chore: move to skills only for LLMs [AR-55502] by mmurawski-dn · Pull Request #495 · drivenets/design-system

mmurawski-dn · 2026-05-22T12:08:56Z

No description provided.

netlify · 2026-05-22T12:09:02Z

✅ Deploy Preview for drivenets-design-system ready!

Name	Link
🔨 Latest commit	`c7787e4`
🔍 Latest deploy log	https://app.netlify.com/projects/drivenets-design-system/deploys/6a183a8d1a78ce000868d4d6
😎 Deploy Preview	https://deploy-preview-495--drivenets-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

StyleShit · 2026-05-24T05:27:31Z

the AGENTS.md & CONTEXT.md have to be at the top-level?
and isn't it a duplication of the readme?

That would be best. The root is the source/entry point of the whole map of skills for every LLM

Probably we will reduce the readme, as to reduce the noise 💯

iromanchuk-dn · 2026-05-27T14:21:17Z

+- [ ] Matches Figma design
+- [ ] Storybook examples show all states (controlled + localized)
+- [ ] No cross-component internal imports
+- [ ] No unnecessary `useMemo`/`useCallback`


DsTable is the exclusion

iromanchuk-dn · 2026-05-27T14:23:36Z

+  value?: string | null;
+  onValueChange?: (value: string | null) => void;


All props should have JSdocs, except maybe ref, className, style

usually we follow a "common sense". If the prop is not so straightforward then we add the JSDocs, that's my impression. I will add this rule and we will see how it goes 👍

iromanchuk-dn · 2026-05-27T14:26:41Z

Why do we need this skill? It's a general guidance, it doesn't have anything domain specific. In Cursor you can chose Debug option and achieve better result

It gets some praise from the devs using https://www.aihero.dev/ guidance. It can be worth adding and experimenting. The idea is, you try new skills/plugins when another one fails to debug,

If we end up not using it at all, we can remove it 💯

achieve better result How can you know without using it?

iromanchuk-dn · 2026-05-27T14:29:02Z

Everything is a lie here. I think the whole skill is heavily outdated and misleading.

Hmm, I was updating this skill with the annotation to the root_new 🤔 Good catch and I will verify other figma related skills 👍

iromanchuk-dn · 2026-05-27T14:29:23Z

I'm pretty sure Figma MCP server instructios already provide this info.

On paper if you provide direct MCP methods the LLM does not need to scrap the whole MCP and look for a proper method, tokens saving which is crucial for keeping the context for MCPs as small as possible

iromanchuk-dn · 2026-05-27T14:31:25Z

I think the whole skill is heavily outdated and misleading. I would remove everything and write that Figma may use outdated tokens, components and do not use DS component's where they should have been used. This information can live in this skill or you can add it to a different place, I don't mind. But this skill as it is no - harms more than helps.

Only tokens reference is outdated, right? The rest is what we do (naming conventions, pointing LLM to a proper MCP methods, API conventions matching figma props).

"that Figma may use outdated tokens, components and do not use" I know we are aware this can happen in the DAP, but in the DS it's a no-no, right?

iromanchuk-dn · 2026-05-27T14:38:21Z

Why do we need this file? The skill is described in SKILL.md.

Skill is one thing, this is the format file which tells LLM to follow the proper format, copied one to one from the https://www.aihero.dev/

iromanchuk-dn · 2026-05-27T14:38:28Z

Why do we need this file? The skill is described in SKILL.md.

Skill is one thing, this is the format file which tells LLM to follow the proper format, copied one to one from the https://www.aihero.dev/

iromanchuk-dn · 2026-05-27T14:42:41Z

What do you mean? I remember we had problems with vi time mocks and we had to use mockdate, didn't we?

Aa! It probably works since we have browser tests, si?

iromanchuk-dn · 2026-05-27T14:45:13Z

This is specific to a single use case we had in the past. It doesn't make sense to keep this instruction in the skill.

iromanchuk-dn · 2026-05-27T14:46:16Z

+| Requirement                                | Details                                |
+| ------------------------------------------ | -------------------------------------- |
+| **No unnecessary `useMemo`/`useCallback`** | React Compiler handles most cases      |
+| **Justify memoization**                    | Only when profiling shows real benefit |
+
+```typescript
+// Bad
+const filteredItems = useMemo(() => items.filter((i) => i.active), [items]);
+const handleClick = useCallback(() => onChange(value), [onChange, value]);
+
+// Good
+const filteredItems = items.filter((i) => i.active);
+const handleClick = () => onChange(value);
+```


Except DsTable, because we excluded it from React Compiler

iromanchuk-dn · 2026-05-27T14:46:55Z

+```typescript
+// Bad
+const [local, setLocal] = useState(prop);
+useEffect(() => setLocal(prop), [prop]);
+
+// Good
+const value = isControlled ? externalValue : internalValue;
+```


We useControlled hook now, let's recommend it here instead

iromanchuk-dn · 2026-05-27T14:47:36Z

+
+| Requirement                           | Details                                      |
+| ------------------------------------- | -------------------------------------------- |
+| **Don't spread native objects**       | `{...file}` loses `File` prototype           |


Duplicate and again it's a single use case scenario, we don't need it here.

On the other hand, we will work with files 100% in the future so it will definitely be useful but not all the time 🤔

iromanchuk-dn · 2026-05-27T14:48:21Z

+```tsx
+const copy = new File([originalFile], originalFile.name, { type: originalFile.type });
+```


How come it is a common pitfall? In how many components we deal with File?

That is the only example we have in the repo, so it's a native file pitfall, not common one

iromanchuk-dn · 2026-05-27T14:49:54Z

The benefits from this skill are questionable, almost no usefull info

Why is that? What specifically is not useful? For me most of the things are common and straightforward patterns we use in the repo

iromanchuk-dn · 2026-05-27T14:51:14Z

+| **No `!important`**                   | Refactor selectors instead    |
+| **Transitions**                       | `0.2s` standard               |
+| **Component-scoped variables**        | In component file             |
+| **Avoid `overflow: hidden` band-aid** | Fix root layout cause         |


Strange rule, to abstract, even I have no idea what it s about

It was mentioned in the past code reviews a few times

iromanchuk-dn · 2026-05-27T14:53:51Z

Integrate Storybook MCP best practises into this skill.
https://storybook.js.org/docs/ai/best-practices

iromanchuk-dn · 2026-05-27T15:17:24Z

I don't see use case for this skill.

Then you can play with it. You start with discussing the issue/feature in the agent mode with /grill-me or /grill-with-docs (to keep the new context in the repo) and after final conclusion you run /to-plan in plan mode. That way you will create a brand new file with all the instructions which you use in the brand new context window (agents enter the dumb zone around 100-120k tokens per session)

iromanchuk-dn · 2026-05-27T15:18:32Z

+## Types and exports
+
+| Requirement                        | Details                                                                                              |
+| ---------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| **No redundant JSDoc**             | Don't restate prop name or type; skip `@interface` / `@type`                                         |
+| **Descriptive prop JSDoc**         | Non-trivial props in `*.types.ts` for AI manifest; `@default` when helpful. Reference: `DsTextInput` |
+| **Full type references**           | Import named types                                                                                   |
+| **Export from `.types.ts`**        | Dedicated type files for components                                                                  |
+| **Export variant arrays**          | `as const` for Storybook `argTypes.options` — see [component-api](../component-api/SKILL.md)         |
+| **`Object.freeze` config exports** | Prevent mutation on mapping objects                                                                  |
+
+```typescript
+export const loaderVariants = ['spinner', 'pulsing'] as const;
+export type LoaderVariant = (typeof loaderVariants)[number];
+
+export const circleSizeMap: Record<AvatarSize, number> = Object.freeze({
+  small: 24,
+  medium: 32,
+  large: 48,
+});
+```


I would move all that to skills related to component development. It's not general Typescript rules

iromanchuk-dn · 2026-05-27T15:19:30Z

+| Requirement                    | Details                           |
+| ------------------------------ | --------------------------------- |
+| **Let code breathe**           | Whitespace between logical chunks |
+| **Name magic numbers**         | Descriptive constants             |
+| **Early returns**              | Simplify conditionals             |
+| **No cross-component imports** | Extract shared logic to utils     |


All this falls into general TS best practises, I think LLM is trained to behave like this

I would assume nothing in the LLM world 💯 😄 it's trained on everything, it does not understand what's good or bad in any way

iromanchuk-dn · 2026-05-27T15:22:52Z

+## Focus areas
+
+- Cross-component internal imports (`../ds-other/...` utilities)
+- Props layer exposes library internals; missing `className` / `style` / `ref`
+- SCSS: hardcoded colors/spacing, `!important`, `overflow: hidden` band-aids
+- Stories: inline styles, missing controlled/localized stories, leftover `play`
+- Browser tests: `getByTestId` without reason, `toBeVisible()`-only tests, no behavior assertion
+- `useMemo`/`useCallback` without justification
+- Raw `<img>` instead of DS image components


why do we repeat staff mentioned in skills?

Eh, same issue as always when working with many files with agents. It reverted the old version while making changes in another files. This skill was calling another skills with explanation. I will fix that 👍

iromanchuk-dn · 2026-05-27T15:40:01Z

-
-7. All green → push and open PR
-```
+Add to `.cursor/mcp.json` (project) or your client’s global MCP config. Local dev: `pnpm --filter @drivenets/ds-storybook-mcp dev`.


@drivenets/design-system-mcp

iromanchuk-dn · 2026-05-27T15:40:43Z

+- [docs/adr/](docs/adr/) — load-bearing decisions agents must not contradict (primitive stack, props layer, interaction testing, doc layout)

-Auto-applied contextual guidance for the AI agent.
+#### Storybook MCP (`@drivenets/ds-storybook-mcp`)


@drivenets/design-system-mcp

iromanchuk-dn · 2026-05-27T15:40:53Z

+    "drivenets-ds": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@drivenets/ds-storybook-mcp"]


@drivenets/design-system-mcp

iromanchuk-dn

Great staff! I've left some comments

github-actions Bot added documentation Improvements or additions to documentation cursor PR that changes cursor rules, skills, etc. labels May 22, 2026

mmurawski-dn force-pushed the drivenets/michal/AR-55502-llm-docs-improvement branch 3 times, most recently from 8b0fc60 to 6274c45 Compare May 22, 2026 13:29

mmurawski-dn changed the title ~~save~~ chore: move to skills only for LLMs [AR-55502] May 22, 2026

mmurawski-dn force-pushed the drivenets/michal/AR-55502-llm-docs-improvement branch 2 times, most recently from 800aeac to 70f70b9 Compare May 22, 2026 13:59

mmurawski-dn marked this pull request as ready for review May 22, 2026 13:59

mmurawski-dn requested review from StyleShit and aroba-dn as code owners May 22, 2026 13:59

mmurawski-dn force-pushed the drivenets/michal/AR-55502-llm-docs-improvement branch 2 times, most recently from 61c7255 to 3c0a755 Compare May 22, 2026 14:10

iromanchuk-dn self-requested a review May 22, 2026 14:31

StyleShit requested changes May 24, 2026

View reviewed changes

github-actions Bot added the ci label May 26, 2026

StyleShit requested changes May 27, 2026

View reviewed changes

Comment thread .github/CODEOWNERS Outdated

StyleShit previously approved these changes May 27, 2026

View reviewed changes

iromanchuk-dn reviewed May 27, 2026

View reviewed changes

mmurawski-dn and others added 6 commits May 28, 2026 09:17

chore: move to skills only for LLMs [AR-55502]

b3741fa

update

fb9badc

codeowners

d5d52f9

Update .github/CODEOWNERS

d31ddf6

figma-to-component

d19c3cc

CR changes

c7787e4

mmurawski-dn dismissed StyleShit’s stale review via c7787e4 May 28, 2026 12:52

mmurawski-dn force-pushed the drivenets/michal/AR-55502-llm-docs-improvement branch from 96cf73a to c7787e4 Compare May 28, 2026 12:52

mmurawski-dn added the skip changelog label May 28, 2026

iromanchuk-dn approved these changes May 28, 2026

View reviewed changes

StyleShit approved these changes May 28, 2026

View reviewed changes

		value?: string \| null;
		onValueChange?: (value: string \| null) => void;

Conversation

mmurawski-dn commented May 22, 2026

Uh oh!

netlify Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for drivenets-design-system ready!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmurawski-dn May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmurawski-dn May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmurawski-dn May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

netlify Bot commented May 22, 2026 •

edited

Loading

mmurawski-dn May 27, 2026 •

edited

Loading

mmurawski-dn May 27, 2026 •

edited

Loading

mmurawski-dn May 27, 2026 •

edited

Loading

mmurawski-dn May 27, 2026 •

edited

Loading