Skill UI

This skill generates new UI components that strictly adhere to the StyleSeed design system conventions. It ensures the component is structurally sound, accessible, and uses specified design tokens for colors, spacing, and typography. Use this when creating isolated, reusable UI parts following the defined design system standards.

This utility allows developers to view, add, and modify design tokens (such as colors, spacing, typography, and shadows) within the StyleSeed design system. It ensures visual consistency by managing the synchronization of changes across JSON source files and corresponding CSS custom properties, supporting both light and dark mode variations.

This skill analyzes your project's current StyleSeed setup, detects outdated engine files, and safely updates the core components, skills, and rules. It follows a structured, non-destructive process, ensuring that user-defined code, such as theme.css and custom components, remains untouched while applying necessary upgrades.

This skill generates new UI components adhering to the StyleSeed design conventions. It ensures consistency with Tailwind v4, CVA, and accessibility standards. Use it for creating reusable primitives or patterns within React projects. Do not use for full-page scaffolding or non-StyleSeed projects.

Apply StyleSeed motions to React components using five personality seeds (Spring/Silk/Snap/Float/Pulse) or distinctive keyword moves from the motion library. Translate user vibe descriptions into precise motion parameters, recommend appropriate motions for use cases, and implement them as motion.X JSX.

Scaffold new mobile pages/screens using StyleSeed layout patterns. Provides a template with PageShell, TopBar, and BottomNav components, enforces design tokens, spacing rules, and verifies against Golden Rules.

This skill provides an interactive wizard to configure your project's design system step-by-step. It guides you through selecting app type, brand colors, design concepts, fonts, and generating the initial app page. It supports React and Tailwind-v4 stacks, ensuring consistent styling via StyleSeed. Use it for new projects needing a complete UI setup.

This skill enables you to view, add, or modify design tokens within the StyleSeed design system. It manages core visual properties like colors, typography, spacing, radius, and shadows by synchronizing JSON source files with CSS implementations. Use it to maintain consistency across your UI components and ensure design system integrity during development.

Analyzes a project's StyleSeed engine files, compares them with a pinned upstream revision, and safely updates skills, .cursorrules, DESIGN-LANGUAGE.md, and Golden Rules with explicit user approval. Use for maintaining the design system engine without overwriting custom UI.