Skills tagged: design-tokens

• brand-canon-ingest - Ingest brand-system-skills repo into an Astro site

  astrobrand-systemdesign-tokenscloudflare

  ★ 0 · Updated 2026-09-23

  Ingests a brand-system-skills repo into an Astro site by running gates, copying tokens, serializing schemes, wiring assets, and registering projections.

  ⚙ Run brand repository gate checks⚙ Copy pre-emitted web string tokens⚙ Serialize color schemes into CSS variables
• lumos-import-figma - Import Figma designs into Lumos for Astro

  figmalumosastrodesign-tokens

  ★ 0 · Updated 2026-09-22

  Build Astro pages or generate Lumos tokens from Figma files by reconciling design values against base styles using convert.mjs.

  ⚙ Read Figma context and screenshots⚙ Inventory design values across categories⚙ Convert design values to fluid tokens
• design-system-patterns - Design System Patterns

  design-systemdesign-tokensthemingcomponent-architecture

  ★ 0 · Updated 2026-09-21

  Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns.

  ⚙ Create design tokens⚙ Implement theme switching⚙ Build multi-brand theming systems
• designing-component-systems - Component System Design

  ui-componentsdesign-systemscomponent-apitheming

  ★ 1 · Updated 2026-09-20

  Build reusable UI pieces that are accessible, composable, theme-aware, and testable without framework lock-in.

  ⚙ Build reusable UI components⚙ Design composable component APIs⚙ Define UI state ownership
• design-spec - Create UI/UX design specifications for developer handoff

  design-specui-uxcomponent-inventorydesign-tokens

  ★ 18 · Updated 2026-09-20

  Creates structured UI/UX design specifications covering component inventory, layout tokens, interactions, and responsive breakpoints.

  ⚙ Extract UI requirements from inputs⚙ Build UI component inventory⚙ Define element interaction states
• figma-automation - Figma automation via Rube MCP and Composio

  figmaautomationrube-mcpcomposio

  ★ 77 · Updated 2026-09-18

  Automates Figma file data retrieval, image rendering, design token extraction, comment management, and project browsing using Rube MCP.

  ⚙ Extract Figma file and node data⚙ Render nodes as images⚙ Download rendered Figma images
• placeholder-images - Generate SVG placeholder images for HTML prototypes

  placeholdersvgprototypelayout

  ★ 2 · Updated 2026-09-17

  Generates simple, labeled, and brand-aware SVG placeholder images for prototype layouts and mockups.

  ⚙ Generate simple SVG placeholders⚙ Generate labeled SVG placeholders⚙ Generate brand-aware SVG placeholders
• tailwind-patterns - Tailwind CSS v4 design patterns and principles

  tailwind-csscssdesign-tokenscontainer-queries

  ★ 650 · Updated 2026-09-17

  Guide for Tailwind CSS v4 principles including CSS-first configuration, container queries, modern patterns, and design token architecture.

  ⚙ Configure CSS-based themes⚙ Apply native container queries⚙ Implement responsive design patterns
• ui-styling-assistant - Universal Design System UI styling assistant

  cssstylingdesign-tokenstailwind

  ★ 3 · Updated 2026-09-17

  Provides CSS snippets using Universal Design System tokens with dark mode variants, responsive breakpoints, and framework output support.

  ⚙ Generate CSS code snippets⚙ Provide Universal Design System tokens⚙ Output Tailwind CSS utility classes
• doublea-brand-guidelines - Double A Brand Visual Identity Guidelines for Web UIs

  design-systembrand-guidelinesui-componentsdesign-tokens

  ★ 1 · Updated 2026-09-17

  Provides design tokens, typography, logo guidelines, and component patterns for building official Double A web interfaces.

  ⚙ Apply Double A design tokens⚙ Place Double A brand logos⚙ Configure Poppins and Prompt typography
• design-system - Generate complete design system documentation files

  design-systemdocumentationui-uxmarkdown-generator

  ★ 38 · Updated 2026-09-17

  Generates a complete 3-file design system documentation set from reference materials such as images, PDFs, links, text, or existing code.

  ⚙ Analyze provided design reference materials⚙ Fetch content from web links⚙ Read local design reference files
• moai-connector-figma - Enterprise Figma and Design System Development

  architecturefigmaenterprisepatterns

  ★ 650 · Updated 2026-09-17

  Develops enterprise design systems and UI kits using Figma 2025, handling design tokens, component documentation, and developer handoff.

  ⚙ Build design system architecture⚙ Manage component libraries and variants⚙ Automate design token synchronization
• plaid - Guide product development from idea to launch

  product-developmentidea-validationprd-generationdesign-tokens

  ★ 216 · Updated 2026-09-16

  Guides founders through product discovery, validation, vision planning, design specification, launch strategy, and roadmap execution.

  ⚙ Discover product ideas⚙ Validate product concepts⚙ Plan product vision and documentation
• tailwind-v4-expert - Tailwind CSS v4 expert mode for web application development

  tailwindcssoxidepostcss

  ★ 9 · Updated 2026-09-15

  Provides guidance and patterns for building web applications using Tailwind CSS v4, the Oxide engine, and CSS-first configuration.

  ⚙ Configure CSS-first design systems⚙ Set up Tailwind Vite plugin⚙ Implement container queries
• tailwind-design-system - Build scalable design systems with Tailwind CSS v4.

  tailwind-cssdesign-systemcss-v4design-tokens

  ★ 0 · Updated 2026-09-15

  Build production-ready design systems using Tailwind CSS v4 CSS-first configuration, design tokens, component variants, and responsive patterns.

  ⚙ Configure design tokens using Tailwind v4⚙ Implement component libraries and variants⚙ Set up class-based dark mode
• design-foundation - Derive a project-specific design system and token architecture

  design-systemdesign-tokensdesign-principlesdocumentation

  ★ 15 · Updated 2026-09-15

  A procedure to derive design principles, record design decisions, and set up a 3-layer design token architecture for a project.

  ⚙ Collect domain evidence from project context⚙ Derive design principles with rationales⚙ Record design decisions in project documentation
• cafe - Cafe Design System Guidelines

  design-systemcafeui-guidelinesdesign-tokens

  ★ 0 · Updated 2026-09-12

  Provides design system guidelines, tokens, and rules for creating cozy cafe-inspired user interfaces.

  ⚙ Generate design system guidelines⚙ Define design tokens and foundations⚙ Specify component rules and states
• ckm:brand - Brand identity, voice, messaging, and asset framework

  branddesign-tokensvisual-identityasset-management

  ★ 1 · Updated 2026-09-11

  Provides brand voice definitions, visual identity standards, messaging frameworks, asset validation, and design token sync.

  ⚙ Inject brand context into prompts⚙ Validate asset parameters⚙ Extract palette colors
• tailwind-design-system - Build production-ready Tailwind CSS design systems

  tailwind-cssdesign-systemcomponent-librarydesign-tokens

  ★ 1 · Updated 2026-09-10

  Builds production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

  ⚙ Create component libraries with Tailwind⚙ Implement design tokens and theming⚙ Build responsive and accessible components
• run2_anthropic-brand-identity - Anthropic Brand Identity Management

  anthropicbrand-identitydesign-tokenstypography

  ★ 83 · Updated 2026-09-09

  A skill for managing and applying Anthropic's specific brand identity, including color tokens, typography fallbacks, and technical illustration standards.

  ⚙ Apply Anthropic brand guidelines⚙ Manage brand color tokens⚙ Implement typography fallback strategy

Scroll to load more