StyleKit

Render a ready-to-use component for a style: the full Tailwind className and JSX code. Components are usually "button", "card", "input" (check recipeIds via stylekit_get_style). Args: - slug (string): style identifier. - component (string): recipe id, e.g. "button", "card", "input". Returns JSON: { slug, component, className, code }. Examples: - "give me a glassmorphism button" -> slug: "glassmorphism", component: "button" - Returns an error listing available recipes if the component isn't found.

Get the one-line shadcn CLI command that installs a style's color theme (light + dark) into a shadcn project. Args: - slug (string): style identifier. Returns JSON: { slug, command, registryUrl, prerequisite }. Examples: - "how do I install the synthwave theme?" -> slug: "synthwave" - The target project must have a tsconfig.json or the shadcn CLI errors out.

Get one style's full profile: philosophy, palette, do/don't rules, keywords, and what's available (tokens, recipes, shadcn install). Args: - slug (string): style identifier, e.g. "glassmorphism", "neo-brutalist". Returns JSON: { slug, name, nameEn, category, tags, description, philosophy, colors, doList, dontList, keywords, hasTokens, hasRecipes, recipeIds, shadcnInstall, url, quality }. Examples: - "how should I use neo-brutalist?" -> slug: "neo-brutalist" - Returns an error with a hint if the slug is unknown.

Get a style's design tokens (Tailwind class mappings): border, shadow, typography, spacing, semantic colors, and forbidden/required classes. Use these to generate style-consistent components. Args: - slug (string): style identifier. Returns JSON: the full StyleTokens object (structuredContent). Examples: - "give me the spacing and border tokens for bento-grid" -> slug: "bento-grid" - Returns an error if the style has no tokens registered.

Check whether code actually follows a style's rules. Use this AFTER generating or editing UI code to verify it matches the style, instead of assuming it does. Reports forbidden classes with the reason they are banned and a concrete replacement. Understands JSX/HTML class attributes, cn()/clsx() calls, and template literals; variant prefixes (dark:, md:, hover:) are resolved before matching. Args: - slug (string): style identifier, e.g. "glassmorphism". - code (string): the source to check. JSX/TSX, HTML, or a bare class string. - checkRequired (array of 'button'|'card'|'input', optional): also report required classes the code is missing. Only pass components the code is supposed to contain. Returns JSON: { slug, ok, violations: [{ className, baseClassName, line, severity, source, rule, reason, fix }], missingRequired, checkedClasses, ruleSources }. Examples: - "does this button match neo-brutalist?" -> slug: "neo-brutalist", code: "<button className=...>", checkRequired: ["button"] - ok: true means no violations were found; it does not assert the design is good.

Search StyleKit's 146 design styles by keyword and/or category, with pagination. Args: - query (string, optional): matches slug, name, description, tags, keywords (case-insensitive). - category ('modern'|'retro'|'minimal'|'expressive', optional): restrict to one category. - limit (number 1-50, default 15): page size. - offset (number >=0, default 0): results to skip (for paging). Returns JSON: { total, count, offset, has_more, results: [{ slug, name, nameEn, category, tags, description }] }. Examples: - "find a glassy frosted style" -> query: "glass" - "next page of retro styles" -> category: "retro", offset: 15 - For full tokens of one style, use stylekit_get_style_tokens instead.