skills.rest
twiced-technology-gmbh
twiced-technology-gmbhOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-design-setup

Automate @toolr/ui-design design system setup with ESLint rules and Claude Code hooks.

1|Updated Jan 30, 2026
Search Tags:#code quality#linting#frontend#design system#eslint#ui-design
One-click install
npx skills add https://github.com/twiced-technology-gmbh/seedr --skill ui-design-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-setup
Source: https://github.com/twiced-technology-gmbh/seedr/tree/main/.claude/skills/ui-design-setup
Command: npx skills add https://github.com/twiced-technology-gmbh/seedr --skill ui-design-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the enforcement of design system rules within a consuming application, preventing common styling and component usage errors.

Core Features & Use Cases

  • Automated Linting: Integrates custom ESLint rules to catch design system violations.
  • Real-time Feedback: Sets up Claude Code hooks for instant suggestions during development.
  • Pre-commit Hooks: Optionally adds checks to ensure code adheres to standards before committing.
  • Use Case: When onboarding a new developer to a project using @toolr/ui-design, this skill ensures they immediately start using components and tokens correctly, preventing costly refactors later.

Quick Start

Run this skill in your application's root directory to set up design system enforcement.

Frequently Asked Questions about ui-design-setup

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

FAQPage Schema
How do I enforce design system compliance in a frontend application?▼

You can enforce design system compliance by automating custom ESLint rules and Claude Code PostToolUse hooks to validate token usage, component patterns, and import paths during development.

How do I set up ESLint rules for a custom design system?▼

Setting up ESLint rules for a custom design system involves running a configuration script in your application root to generate linting checks that catch styling violations and enforce specific component usage patterns.

Can I use pre-commit hooks to check design system token usage before committing?▼

Yes, you can optionally integrate pre-commit hooks via lint-staged or .githooks to ensure code adheres to design system standards and token usage rules before committing changes.

What is the best way to onboard new developers to an existing design system?▼

Onboarding new developers to a design system is best handled by automating enforcement with real-time feedback hooks, ensuring they immediately use components and tokens correctly to prevent costly refactors.

Does this design system enforcement work with lint-staged and Claude Code?▼

Yes, the enforcement setup integrates directly with Claude Code PostToolUse hooks for real-time suggestions and optionally configures lint-staged or .githooks for pre-commit validation.

Why should I automate design system linting instead of manually reviewing code?▼

Automating design system linting prevents common styling and component usage errors instantly, eliminating manual review overhead and ensuring consistent token usage and import paths across the application.

Related Skills

Explore More Software Engineering Skills→
BailipaBailipa
4

setup-pre-commit

Automate pre-commit hook setup with Husky, lint-staged, and Prettier.

Community
Intermediate
bryonjacobbryonjacob

installing-git-hooks

Install git hooks to run format, lint, typecheck, and tests via justfile commands.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
futureteafuturetea

ESLint Setup

Configure ESLint for JavaScript and TypeScript projects with flat or legacy configs.

Community
Intermediate