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.

StyleSeed is a comprehensive design judgment engine designed to elevate the aesthetic quality of AI-generated user interfaces. It codifies 69 visual rules covering color discipline, spatial rhythm, information hierarchy, and motion feedback. By integrating these principles, developers can ensure that AI output looks professionally designed and polished, rather than simply generated. Includes React components, Tailwind CSS implementation, and actionable design guidelines.

StyleSeed Design Review analyzes UI/frontend code (React/Tailwind/HTML) against a detailed design rubric. It scores the interface (0-100) across coherence, color discipline, hierarchy, and polish. The tool pinpoints specific violations—such as mixed corner radii or non-semantic colors—and generates a prioritized, actionable list of fixes, ensuring the final product looks professional and polished, not generic or 'AI-generated.'

This skill provides a quantified design audit (0-100) for UI files based on StyleSeed's comprehensive design language. It breaks down the score into weighted categories (Color, Typography, Layout, etc.), identifies specific design violations, and generates a prioritized list of fixes, acting as a critical quality gate before deployment.

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 analyzes React, Tailwind, or HTML interfaces against a comprehensive design rubric (74 rules). It scores the UI from 0-100, identifying common flaws that make interfaces look generic, unfinished, or "AI-generated"—such as mixed corner radii, poor color discipline, or missing states. It provides a prioritized list of actionable fixes to ensure a polished, professional, and user-centric experience before deployment.

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.

Score a UI file's design quality 0-100 against StyleSeed's design language, with per-category breakdown, worst offenders, and prioritized fix list. A quantified version of /ss-review for tracking UI quality.

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.