dylantarre/animation-principles
Skill Claude CodeCodex
Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when confirming user actions - success checkmarks, error alerts, form validation, save confirmations, or any animation acknowledging what the user did.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting.
dylantarre/animation-principles
Skill Claude CodeCodex
Use when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or any choreographed animation sequence.
dylantarre/design-system-skills
Plugin Claude Code
Plugin marketplace listing 1 plugin: design-system-skills.
dylantarre/design-system-skills
Plugin Claude Code
Token generators, component patterns, accessibility guidance, and framework integrations.
dylantarre/design-system-skills
Instructions file
Instructions for dylantarre/design-system-skills, covering claude.md, project overview, architecture, skill file format and skill name.
dylantarre/design-system-skills
Skill Claude CodeCodex
Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing screen reader issues, or implementing modals, tabs, accordions, menus, or dialogs accessibly.
dylantarre/design-system-skills
Skill Claude CodeCodex
Validates WCAG 2.1 contrast ratios and generates accessible color pairings. Use when checking accessibility compliance, fixing contrast issues, or selecting text/background combinations for AA or AAA levels.
dylantarre/design-system-skills
Skill Claude CodeCodex
Generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. Use when styling :focus-visible, keyboard navigation indicators, or fixing focus ring visibility issues.
dylantarre/design-system-skills
Skill Claude CodeCodex
Generates component API documentation with props tables, usage examples, and guidelines. Use when documenting component libraries, creating API references, or building component documentation for designers and developers.
dylantarre/design-system-skills
Skill Claude CodeCodex
Generates design token documentation with visual swatches and code examples. Use when documenting token values, creating token reference guides, or building searchable design system documentation.
dylantarre/design-system-skills
Skill Claude CodeCodex
Builds token-driven Angular components with signals and standalone components. Use when creating Angular component libraries, integrating design tokens, or building design system components with new control flow syntax.
dylantarre/design-system-skills
Skill Claude CodeCodex
Builds token-driven React components with TypeScript and modern patterns. Use when creating React component libraries, integrating CSS custom properties, or building Next.js design system components with forwardRef and composition.
dylantarre/design-system-skills
Skill Claude CodeCodex
Builds token-driven Svelte 5 components with runes ($state, $props) and TypeScript. Use when creating Svelte component libraries, integrating design tokens, or building SvelteKit design system components.
dylantarre/design-system-skills
Skill Claude CodeCodex
Builds token-driven Vue 3 components with Composition API and TypeScript. Use when creating Vue component libraries, integrating design tokens, or building Nuxt design system components with composables.