DEDUPED Hot AI repos, turned into use cases Get 5 a day

How to lock component styling with per-component contracts with Lint

Let pages change some styles on a component while keeping its size, shape, and font fixed.

Who it is forA design system owner who ships shared components and wants pages and agents to change only the parts the design allows.

The problemShared components get restyled in ways the design did not intend, and typed props alone cannot express rules like allow margin but keep padding.

The outcomeEach component gets its own allow and deny rules in config, and violations show a message that explains the allowed options.

What you need first

  • Node.js 20.19 or later
  • A Tailwind v4 project (shadcn/ui is not required)
  • ESLint 9.30 or later, or Oxlint 1.80 or later
  • A React, Vue, or Svelte project

Steps

  1. Run npm install -D @shadcn/lint eslint @typescript-eslint/parser in the project.
  2. In eslint.config.mjs, set "shadcn/no-restyle" with allow: ["layout"] and a contracts entry such as { pattern: "^Button$", allow: ["w-full", "mt-*", "mb-*"] }.
  3. Add a custom message under message, such as spacing: "Use the size prop instead of padding.", so the error tells the agent what to do.
  4. Run npx eslint . and check that an allowed class passes while a disallowed class such as a custom padding is reported.

Prompt for your agent

Use the GitHub repo shadcn-ui/lint to add a no-restyle contract for <component-name> in <project-path>. Write the contract in the ESLint config, then run the lint command. Expected output: the contract allows the listed classes and reports the others. Verify that one disallowed class on <component-name> produces the custom message from the config.

Caveat. The README examples use component names such as Button and CardTitle, so contract patterns must match the names in your own code.

Share: X LinkedIn Hacker News Email Copy link

Disclaimer

Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked "Seen in the wild", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email [email protected] and we will look at it promptly. Full disclaimer page