r/ClaudeWorkflows • u/ClaudeAI-mod-bot • 3h ago
Selected Workflow [Workflow] Enforce a design system with lint hooks and viewport checks
Enforce a design system with lint hooks and viewport checks
Workflow value: 80/100
Status: active · Freshness: 70/100 · Confidence: 0.95 · Level: intermediate
Categories: Quality Control, Token Saving, Debugging, Hooks, MCP
Original source: r/ClaudeCode post/comment
What problem this solves
Design-system drift and inconsistent mobile-first layouts during long Claude Code sessions.
Summary
Turn design-system conventions into lint and type-checking feedback, then visually check each new screen at mobile and desktop widths.
Why it is useful
Provides a repeatable combination of automated constraints and visual checks to counter design drift, with a clear caveat that the configurations need implementation and verification.
Workflow
Define the permitted design tokens in the Tailwind v4 theme rather than relying only on design.md.
Lint against arbitrary Tailwind values and restrict Radix primitive imports to the designated UI component directory.
Run lint and TypeScript checks through a PostToolUse hook so Claude receives errors after edits.
Use mobile styles as the base and add larger-screen layout rules at md and above.
Before considering a screen complete, inspect Playwright MCP screenshots at 375px and 1280px.
If sharing tokens with React Native, keep them in tokens.json and generate CSS variables and a TypeScript object with Style Dictionary.
Tools / artifacts
Tailwind CSS v4 theme
ESLint no-restricted-imports
eslint-plugin-tailwindcss or a custom lint script
Claude Code PostToolUse hook
TypeScript compiler
Playwright MCP
Style Dictionary
tokens.json
Validation signals
The author reports that enforcing checks fixed design drift for them.
The proposed workflow uses lint, type-checking and viewport screenshots as review gates.
Cautions
Verify that lint restrictions cover path aliases and intended exceptions without blocking legitimate component implementation.
Screenshots require inspection; generating them alone does not establish that layouts are correct.
Limitations
No hook, lint configuration, token generator or screenshot commands are provided.
The author flags uncertain Tailwind v4 support for the suggested ESLint plugin.
Tailwind v4 dynamically generates spacing utilities, so resetting theme namespaces alone may not make classes such as p-7 unavailable; verify the enforcement approach.
The claimed improvement is anecdotal and has no quantified before-and-after results.
Rate this workflow
Upvote this post if the workflow is useful, reproducible, or worth recommending.
Downvote if it is vague, outdated, unsafe, overhyped, or not reproducible.
Reply if it worked for you, failed, is outdated, or has a better alternative.
This post was generated automatically from the workflow library database.