Dylan Tarre avatar

Dylan Tarre

Community

@dylantarre · San Francisco, CA

13Followers
|
46Public Repos
|
29Published Skills

Built @buoy-design to end design drift

Agent Skills by Dylan Tarre

Showing 29 vetted skills indexed across 1 GitHub repositories.

dylantarredylantarre
38

getting-started

Onboard users to explore available skills and plan a design system implementation.

Community
Basic
dylantarredylantarre
38

component-docs

Generate Markdown component API docs from TypeScript interfaces.

Community
Intermediate
dylantarredylantarre
38

token-docs

Generate structured Markdown documentation from CSS, JSON, or JS design tokens.

Community
Intermediate
dylantarredylantarre
38

storybook

Generate Storybook CSF 3.0 stories and MDX documentation for UI components.

Community
Intermediate
dylantarredylantarre
38

framer

Export design tokens as CSS variables for Framer prototypes.

Community
Advanced
dylantarredylantarre
38

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

Community
Intermediate
dylantarredylantarre
38

style-dictionary

Transform design tokens into CSS, SCSS, Swift, and Android XML outputs.

Community
Intermediate
dylantarredylantarre
38

dark-mode

Implement dark mode with semantic color tokens, CSS variables, and system preference detection.

Community
Advanced
dylantarredylantarre
38

compound-components

Build accessible React UI primitives with compound component patterns.

Community
Advanced
dylantarredylantarre
38

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

Community
Basic
dylantarredylantarre
38

icon-system

Standardize icon delivery with SVG sprites and inline components.

Community
Basic
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
dylantarredylantarre
38

svelte

Build token-driven Svelte 5 components using runes and TypeScript.

Community
Intermediate
dylantarredylantarre
38

vue

Build token-driven Vue 3 components with the Composition API and TypeScript.

Community
Intermediate
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced
dylantarredylantarre
38

react

Create token-driven React components with TypeScript and ARIA compliance.

Community
Intermediate
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic
dylantarredylantarre
38

aria-patterns

Implement accessible ARIA roles, states, and properties for interactive web components.

Community
Basic
dylantarredylantarre
38

focus-states

Generate accessible focus indicators and configurable CSS tokens for UI elements.

Community
Advanced
dylantarredylantarre
38

spacing-scale

Generate centered exponential spacing scales for CSS, Tailwind, and JSON tokens.

Community
Intermediate
dylantarredylantarre
38

type-scale

Generate CSS, Tailwind, or JSON typography scales with modular ratios and auto-calculated line heights.

Community
Intermediate
dylantarredylantarre
38

design-tokens-structure

Structures design tokens into a 3-layer system for theming and governance.

Community
Basic
dylantarredylantarre
38

z-index-scale

Generate semantic z-index token scales for CSS, Tailwind, and JSON.

Community
Basic
dylantarredylantarre
38

responsive-typography

Generate fluid typography scales using CSS clamp() and custom properties.

Community
Basic