Name: ui-package
Author: blazerroadg

Instruction file imported from blazerroadg/front-end-clean-arch (.github/instructions/ui-package.instructions.md). Copyright stays with the author.

Rules for packages/ui

MUI-first: Every atom MUST wrap a component from @repo/ds-adapter. Do not create raw HTML atoms when MUI has a match.
No domain logic: This package has zero knowledge of features, customers, recommendations, or any product concept.
No API calls: Never import from @repo/utils/data or call fetch/createApiClient here.
No mock data: Mock data belongs in apps/sales-cockpit/src/features/.
CSS Modules only: Use *.module.css for styles. No inline styles, no Tailwind, no styled-components.
Semantic tokens: In CSS modules, use var(--color-*), var(--radius-*), var(--spacing-*) — never hardcoded hex/rgb values.
Props use type, not interface. Include children?: ReactNode for composition.
"use client" required if the component uses any React hook.
File structure: component-name/component-name.tsx, component-name.module.css, component-name.test.tsx.
Barrel exports: Each atom/molecule/organism/pattern folder has an index.ts.

Hierarchy

Atoms: wrap ONE component from @repo/ds-adapter
Molecules: compose 2-3 atoms
Organisms: full UI sections from atoms+molecules
Patterns: layout compositions

{ "ocm": "1", "id": "blazerroadg-front-end-clean-arch-ui-package-instructions", "kind": "skill", "name": "ui-package", "description": "Enforces atomic design rules: atoms must wrap MUI via ds-adapter, no domain logic, use CSS Modules, type for props, barrel exports.", "publisher": "blazerroadg", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-instructions" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Enforces atomic design rules: atoms must wrap MUI via ds-adapter, no domain logic, use CSS Modules, type for props, barrel exports." ], "primary": false, "metadata": { "source": { "provider": "github-instructions", "repository": "https://github.com/blazerroadg/front-end-clean-arch", "path": ".github/instructions/ui-package.instructions.md", "ref": "61f4cd0a3982266932bcc72626e850551d63fe77", "url": "https://github.com/blazerroadg/front-end-clean-arch/blob/61f4cd0a3982266932bcc72626e850551d63fe77/.github/instructions/ui-package.instructions.md", "key": "blazerroadg/front-end-clean-arch/.github/instructions/ui-package.instructions.md" }, "applies_to": "packages/ui/**" }, "instructions": "## Rules for packages/ui\n\n1. **MUI-first**: Every atom MUST wrap a component from `@repo/ds-adapter`. Do not create raw HTML atoms when MUI has a match.\n2. **No domain logic**: This package has zero knowledge of features, customers, recommendations, or any product concept.\n3. **No API calls**: Never import from `@repo/utils/data` or call `fetch`/`createApiClient` here.\n4. **No mock data**: Mock data belongs in `apps/sales-cockpit/src/features/`.\n5. **CSS Modules only**: Use `*.module.css` for styles. No inline styles, no Tailwind, no styled-components.\n6. **Semantic tokens**: In CSS modules, u", "cost": { "context_tokens": 312 } }

ui-package

About

Rules for packages/ui

Hierarchy

Use it

Manifest

Reviews