Dylan Tarre
Community@dylantarre · San Francisco, CA
Built @buoy-design to end design drift
Agent Skills by Dylan Tarre
Showing 29 vetted skills indexed across 1 GitHub repositories.
getting-started
Onboard users to explore available skills and plan a design system implementation.
component-docs
Generate Markdown component API docs from TypeScript interfaces.
token-docs
Generate structured Markdown documentation from CSS, JSON, or JS design tokens.
storybook
Generate Storybook CSF 3.0 stories and MDX documentation for UI components.
framer
Export design tokens as CSS variables for Framer prototypes.
figma
Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.
style-dictionary
Transform design tokens into CSS, SCSS, Swift, and Android XML outputs.
dark-mode
Implement dark mode with semantic color tokens, CSS variables, and system preference detection.
compound-components
Build accessible React UI primitives with compound component patterns.
layout-primitives
Create reusable layout primitives with CSS flexbox, grid, and React components.
icon-system
Standardize icon delivery with SVG sprites and inline components.
animation-principles
Map Disney's 12 animation principles to UI motion guidelines.
svelte
Build token-driven Svelte 5 components using runes and TypeScript.
vue
Build token-driven Vue 3 components with the Composition API and TypeScript.
angular
Build token-driven Angular components with signals and standalone components.
react
Create token-driven React components with TypeScript and ARIA compliance.
color-contrast
Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.
aria-patterns
Implement accessible ARIA roles, states, and properties for interactive web components.
focus-states
Generate accessible focus indicators and configurable CSS tokens for UI elements.
spacing-scale
Generate centered exponential spacing scales for CSS, Tailwind, and JSON tokens.
type-scale
Generate CSS, Tailwind, or JSON typography scales with modular ratios and auto-calculated line heights.
design-tokens-structure
Structures design tokens into a 3-layer system for theming and governance.
z-index-scale
Generate semantic z-index token scales for CSS, Tailwind, and JSON.
responsive-typography
Generate fluid typography scales using CSS clamp() and custom properties.