#601

Globales Ranking · von 601 Skills

design-system AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill design-system

41

Installationen

Design System

Overview

Single source of truth for visual consistency at scale — a shared language between design and engineering. Covers token architecture, theming infrastructure, component API patterns, accessibility compliance, and governance workflows.

Design systems are not component libraries alone. They unify tokens, patterns, documentation, and contribution processes so teams build once and maintain once.

Quick Reference

Area Pattern Key Points
Token hierarchy Primitive > Semantic > Component Never reference primitives in components; semantic layer is themable
Dark mode Swap semantic tokens via data-theme Use off-white/dark-gray, not pure white/black
Multi-brand theming Override semantic tokens per brand Apply via CSS custom properties at runtime
Tailwind v4 @theme block in CSS (no config file) CSS-first configuration replaces tailwind.config.js
CVA variants cva() for variant + size combinations Type-safe with VariantProps; pair with cn() utility
Compound components Modal.Header, Modal.Body sub-parts Composition over configuration; shared context for implicit state
Headless UI Radix primitives + Tailwind classes Accessibility built-in; bring your own styles
Focus management focus-visible:ring-2 on all controls 2px solid outline with offset; visible on keyboard only
Reduced motion prefers-reduced-motion media query Near-zero duration for all transitions and animations
Style Dictionary JSON tokens to CSS/iOS/Android outputReferences: true preserves token chain
Storybook Stories + autodocs + a11y addon Visual documentation with accessibility audit built in
Governance Semver for tokens and components Breaking = removed props/tokens; minor = new additions

Common Mistakes

Mistake Correct Pattern
Primitive tokens in components (blue-500) Reference semantic tokens (interactive-primary) that map to primitives
Skipping focus states on interactive elements Add focus-visible:ring-2 on every button, link, and input
Body text set to gray-400 Use gray-600 or darker to meet 4.5:1 WCAG AA contrast
Circular token references between layers Tokens flow one direction: primitive > semantic > component
Ignoring prefers-reduced-motion Wrap all animations in a reduced-motion media query
Using scale() transforms for hover Use translateY(-1px) and shadow changes to avoid layout shift
Hardcoded hex/px values in component files All visual values come from semantic or component tokens
Deep CSS nesting for theme overrides Override CSS custom properties at the semantic layer
Theme flash on page load (FOUC) Inject synchronous theme script in <head> before body renders
Flat token list without layers Organize into primitive, semantic, and component tiers

Delegation

  • Audit codebase for hardcoded values that should be tokens: Use Explore agent
  • Migrate a component library to a token-based design system: Use Task agent
  • Plan a multi-brand theming architecture: Use Plan agent
  • Review accessibility compliance across components: Use Task agent

If the motion skill is available, delegate animation token integration and motion design patterns to it.

References

  • Design Tokens — three-layer hierarchy, CSS custom properties, TypeScript definitions, naming conventions
  • Theming — dark mode, theme provider, multi-brand, Tailwind v4, SSR flash prevention
  • Color and Typography — 60-30-10 rule, contrast requirements, type scale, fluid typography
  • Component Architecture — CVA variants, compound components, headless UI, polymorphic rendering
  • Accessibility — WCAG compliance, keyboard navigation, ARIA patterns, screen reader testing
  • Motion and Layout — animation tokens, reduced motion, spacing grid, elevation system
  • Tooling — Style Dictionary, Storybook, component testing, visual regression
  • Governance — versioning, deprecation, contribution workflow, component lifecycle
  • Troubleshooting — common issues, dark mode fixes, token sprawl, pre-delivery checklist

Installationen

Installationen 41
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install design-system by running npx skills add oakoss/agent-skills --skill design-system in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für design-system, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport