skills.rest
renpereiradx
renpereiradxCOMMUNITY
Explore all skills by this author →
GitHub

erp-design-contract

Enforces Fluent 2 design tokens and UI component rules for ERP frontend code.

Updated Jul 9, 2025
Search Tags:#react#design system#design tokens#tailwind#ui components#dark mode#fluent 2
One-click install
npx skills add https://github.com/renpereiradx/erp-webapp --skill erp-design-contract-renpereiradx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: erp-design-contract
Source: https://github.com/renpereiradx/erp-webapp/tree/main/.agents/skills/erp-design-contract
Command: npx skills add https://github.com/renpereiradx/erp-webapp --skill erp-design-contract-renpereiradx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents inconsistent, off-brand UI code in the ERP webapp by enforcing a single authoritative design contract: semantic tokens from design/tokens.json, the Fluent 2 palette, and the existing src/components/ui/ component library. ## Core Features & Use Cases - Token Enforcement: Blocks hardcoded hex colors, generic Tailwind color classes, and arbitrary spacing values; only semantic tokens generated from design/tokens.json are allowed. - Component Reuse Rules: Requires importing and extending existing base components (Button, Card, Input, Table, EnhancedModal, EmptyState, ErrorState) instead of creating duplicates. - State & i18n Coverage: Mandates loading/empty/error states, useI18n() for all UI text, and mono fonts for numbers, amounts, dates, and IDs. - Use Case: When asked to build a new orders table page, the Skill directs you to compose Table, PageHeader, and GenericSkeletonList with token-based classes, then validate with pnpm lint:design and pnpm tokens:check. ## Quick Start Ask the assistant to build or restyle any UI component in this repo while following the erp-design-contract rules and validating with the design lint tooling.

Frequently Asked Questions about erp-design-contract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a new React component with Tailwind design tokens?▼

Use only semantic token classes generated from design/tokens.json, such as p-md or gap-lg for spacing, and never hardcode hex values or generic palette classes like blue-500. Regenerate tokens with pnpm tokens:generate after editing tokens.json.

How do I add dark mode support with Tailwind 4 design tokens?▼

Define each token with light and dark values in design/tokens.json, then run pnpm tokens:generate to emit the @theme and .dark blocks in src/index.css. Toggling the .dark class on the html element flips all tokens automatically.

Can I create a new UI component instead of using existing ones?▼

No. The contract requires importing and extending existing components from src/components/ui/ via className. If a needed component is missing, report it as missing_component and stop rather than improvising one.

Why does pnpm lint:design fail on my new code?▼

The design lint fails when it detects hardcoded hex or rgba colors, generic Tailwind color classes like slate or gray, or arbitrary values that duplicate existing tokens. Replace them with semantic token classes to pass.

What are the limitations of this design contract approach?▼

It only covers this repository's Fluent 2 system and cannot be applied to other codebases or design languages. New tokens must be added centrally in design/tokens.json with both light and dark values, so ad-hoc one-off styling is intentionally blocked.

Related Skills

Explore More Design & Creative Skills→
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
shenjingnanshenjingnan
333

dev-workflow-checker

Automate type checks, linting, and tests after code modifications.

Community
Intermediate
aexol-studioaexol-studio
27

react-hook-form-zod

Automate React form validation and submission with Zod and react-hook-form.

Official
Intermediate
CraftOS-devCraftOS-dev
375

superdesign

Provide frontend design guidelines for layout, theme, and animation with Tailwind CSS.

Community
Intermediate