Enforce DCYFR design token usage via ESLint rules and PR reviews.
npx skills add https://github.com/dcyfr/dcyfr-labs --skill dcyfr-design-tokens
Please help me install this Agent Skill. Skill: dcyfr-design-tokens Source: https://github.com/dcyfr/dcyfr-labs/tree/main/.opencode/skill/dcyfr-design-tokens Command: npx skills add https://github.com/dcyfr/dcyfr-labs --skill dcyfr-design-tokens
In DCYFR projects, design consistency is often compromised by hardcoded Tailwind values, leading to visual drift and maintenance overhead.
Install dependencies and run npm run lint to start enforcing design-token usage across the codebase.
High-intent search queries and answers about installing and using this skill.
To prevent hardcoded Tailwind values, use this Skill to enforce design token usage. It detects and flags values like gap-8 or text-3xl during linting, replacing them with tokens from your design-tokens library to maintain visual consistency.
Yes, ESLint can automatically fix design token violations. This Skill provides ESLint auto-fix guidance for common violations, validating color, spacing, typography, and container widths during PR reviews and component development.
Design tokens are centralized variables for spacing, typography, containers, and colors. You need them during component development to prevent visual drift and reduce maintenance overhead caused by hardcoded values in your codebase.
Yes, this design token linter integrates with OpenCode workflows. It satisfies token import validation and consistent naming conventions through automated ESLint checks specifically tailored for OpenCode-specific development environments.
The best way to convert legacy code is running npm run lint to enforce design-tokens library usage. This automatically identifies hardcoded values and provides replacement guidance to ensure token compliance across the codebase.
hulusi-tuncEstablish naming conventions for design elements, components, and tokens.
jmaglyExecute ESLint to enforce code quality and style for JavaScript and TypeScript projects.
spartDevDetect design-system violations in React components against DESIGN_GUIDELINES.md.
vuminhieuApply Vercel performance best practices to React and Next.js code reviews.
